Topic: Bootstrap Grid System is not working in Safari browser

shejanbd pro asked 4 years ago


HI,

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>
</div>

 


Bartłomiej Malanowski staff commented 4 years ago

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

ermushin pro commented 4 years 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 pro commented 4 years 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 pro commented 4 years 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. .rowfafari{ display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; }

shreeUIDevloper free answered 2 years ago


Add code below .row{ &:before, &:after{ display: block; } } row will not preserve its height depending on the elements inside it,


Debabrata sahu free answered 3 years ago


In safari it's not working for me. showing error "shrink-to-fit"  not recognized or ignored.

Still I have added the shrink-to-fit=no" still getting error.


Bartłomiej Malanowski staff commented 3 years ago

How can I reproduce your issue? 



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

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
Tags