Are you having troubles with Bootstrap 4 Grid System in Safari? What used to work doesn’t seem to anymore within Safari. As the example below shows, this is how we usually create 3 columns within a row.
<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>
However, in Safari, instead of these being positioned side by side, they all fall into one column. This can be fixed easily with the CSS below.
/**
Fixing bootstrap columns for safari
*/
.row:before, .row:after{
display: inline-block !important;
}
This overrides the standard Bootstrap styling for the row:before and :after.
Hopefully this helps, and the same doesn’t occur in Bootstrap 5.
For more helpful posts, check out our Web Development section and learn about Bootstrap 5.