Bootstrap Grid System is not working in Safari browser

shejanbd asked 9 months ago


The Bootstrap 4 grid system is not working in Safari browser. Whatever I use column class, it falls in a single column.

<div class="row">
   <div class="col-4">Column 4</div>
   <div class="col-4">Column 4</div>
   <div class="col-4">Column 4</div>


Bartłomiej Malanowski commented 9 months ago

what is your version of Safari? What's your device? Do you use iOS or Mac OS?

ermushin commented 9 months ago

Hi. I have a such problem too. My devidce is ipad A1395. The problem is appeared in all browsers I have(safari, chrome) with my site. OS version is 8.1(12b410). The same trouble I can see on mdbootstrap site also

shejanbd commented 9 months ago

@Bartloiej Malanowski, I'm using Safari 5.1.7 version and I've also tested 2007 Macbook Pro but result is still same.

shejanbd commented 9 months ago

@ermushine after searching for hours over the internet, I've found the following solution. I've added the following class rowsafari with the row class and it is working but I do not it is still the best solution for my problem.

display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;

Please insert min. 20 characters.


Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No