Bootstrap columns with flexbox are not taking proper width on iOS and Safari

Question

I am trying to use flex box with bootstrap columns so that all the columns are always horizontally centered. The markup mentioned below works fine for firefox, chrome and Android but fails on iOS and safari. I haven't tested IE yet.

HTML:

<!-- The fourth column falls down -->
<div class='row row-1 text-center'>
    <div class="col-xs-3 red">Hi</div>
    <div class="col-xs-3 blue">Hi</div>
    <div class="col-xs-3 blue">Hi</div>
    <div class="col-xs-3 blue">Hi</div>
</div>
<!-- Works Fine and centers the columns -->  
<div class='row text-center'>
    <div class="col-xs-3 red">Hi</div>
    <div class="col-xs-3 blue">Hi</div>
    <div class="col-xs-3 blue">Hi</div>
</div>

CSS:

.row {
    display: flex;
    display: -webkit-flex; 
    flex-wrap:wrap;
    -webkit-flex-wrap: wrap;
    -webkit-justify-content: center;
            justify-content: center;
}
div[class^=col-] {
  float: none;  
  display: inline-block;
  vertical-align: top;
}

On Chrome, Firefox and Android

On Safari and iOS

JSFIDDLE

Is there anything that I should be adding to the columns so that they appear in one line.

Answer 1

It's pseudo-element in the .row causing the problem.

This happens because Safari browser treats :before and :after pseudo-elements as if they were real elements.

Try

 .row:before, .row:after{
      display: none;
    }

or better create a class say, .flex-row and do this

<div class="row flex-row">
  {{contents here..}}
</div>


.flex-row{
     display: flex;
    display: -webkit-flex; 
    flex-wrap:wrap;
    -webkit-flex-wrap: wrap;
    -webkit-justify-content: center;
            justify-content: center;
}
.flex-row:before, .flex-row:after{
   display: none;
}

FIDDLE