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 Androi

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