Menu
There is an issue with Bootstrap 4 and Safari brower on Mac. When using cols inside a row it breaks it, and doesn't work like on firefox or chrome. I'm using a simple code like this:
<div class="row align-items-center"> <div class="col-sm-12 col-md-3 hidden-xs align_left"><h3>TEXT</h3></div> <div class="col-sm-4 col-md-3">TEXT</div> <div class="col-sm-4 col-md-3">TEXT</div> <div class="col-sm-4 col-md-3">TEXT</div> </div> I'm trying different 'fix codes' from another questions but they doesn't solve the problem. Any clue?
Thanks in advance
942
But works perfectly fine on android devices.
Any reference to Bootstrap refers to the Grid system used in Bootstrap (which is based on Flexbox). So as a general rule 'content out' is for Bootstrap and 'layout in' is for CSS Grid. If we want to control the layout in either row or column direction, then we should go for Bootstrap's Flexbox-based grid.
Go to the Customize menu on Bootstrap website and choose your preferred size. In Less Variables -> Grid system you can find a form to input your preferred sizes. Then you can easily download the preferred grid. Hope this will help.
The Bootstrap Grid System is used for layout, specifically Responsive Layouts. Understanding how it works is vital to understanding Bootstrap. The Grid is made up of groupings of Rows & Columns inside 1 or more Containers. The Bootstrap Grid can be used alone, without the Bootstrap JavaScript and other CSS Components.
Finally solved the problem with this simple CSS:
.row:before, .row:after {display: none !important;} It seems there is some code hidden in :before and :after elements inside the rows. This causes some kind of issues in safari browsers.
Hope it helps.
75
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With