Bootstrap layout doesn't work with safari

Question

I made a website where the layout renders perfectly with any browser but Safari... The cols are not aligned I get images out of their divs. I have no idea why this happen. Did you experience such problems ?

Here is an example of the code (using Bootstrap 4):

        <div class="row" style="margin: 0px; padding: 0px;">
        <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 col-xl-6"
            style="margin: 0px; padding: 0px;">
            <div class="row align-items-center" style="margin: 0px; padding: 0px;">
                <div
                    class="hidden-xs hidden-sm col-md-3 col-lg-3 col-xl-3 text-center"
                    style="margin: 0px; padding: 0px;"></div>
                <div
                    class="col-xs-12 col-sm-12 col-md-9 col-lg-9 col-xl-9 text-center"
                    style="margin: 0px; padding: 0px;">
                    <titre2>{{sections[section.sections[0]]['name']}}</titre2>
                </div>
                <div
                    class="hidden-xs hidden-sm col-md-3 col-lg-3 col-xl-3 box empty2"
                    style="margin: 0px; padding: 0px;"></div>
                <div class="col-xs-12 col-sm-12 col-md-9 col-lg-9 col-xl-9 boxsup"
                    style="margin: 0px; padding: 0px;">
                    <a
                        href="{{ path('section', {'section_name': sections[section.sections[0]]['name']}) }}">
                        <center>
                            <img class="ownthumbnail1"
                                src="{{ asset(contents[0]|first) | imagine_filter('medium') }}"
                                alt="">
                        </center>
                    </a>
                </div>
            </div>
        </div>


        <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 col-xl-6"
            style="margin: 0px; padding: 0px;">
            <div class="row align-items-center" style="margin: 0px; padding: 0px;">
                <div
                    class="col-xs-12 col-sm-12 col-md-9 col-lg-9 col-xl-9 text-center"
                    style="margin: 0px; padding: 0px;">
                    <titre2>{{sections[section.sections[1]]['name']}}</titre2>
                </div>
                <div
                    class="hidden-xs hidden-sm col-md-3 col-lg-3 col-xl-3 text-center"
                    style="margin: 0px; padding: 0px;"></div>
                <div class="col-xs-12 col-sm-12 col-md-9 col-lg-9 col-xl-9 boxsup"
                    style="margin: 0px; padding: 0px;">
                    <a
                        href="{{ path('section', {'section_name': sections[section.sections[1]]['name']}) }}">
                        <center>
                            <img class="ownthumbnail2"
                                src="{{ asset(contents[1]|first) | imagine_filter('medium') }}"
                                alt="">
                        </center>
                    </a>
                </div>
                <div
                    class="hidden-xs hidden-sm col-md-3 col-lg-3 col-xl-3 box empty2"
                    style="margin: 0px; padding: 0px;"></div>
            </div>
        </div>
    </div>

Answer 1

For anyone who is still having this issue, I was able to fix it by adding

.row:before, .row:after {
display: flex !important;
}

Obviously this isn't the most elegant solution and you may have to look through your code for checks and balances sake, but it should do the trick in the meantime until they fix it.

Answer 2

As per my understanding from your question, First you need to check that have you add image responsive class or not. In bootstrap4 , they change some class name. So you can go through here. If possible put link of your site so I can give you better answer for that.

You need add class.

img-thumbnail

NOTE

First check your bootstrap version.Sometime you used version bootstrap version 3 and class used bootstrap version 4. That's why they conflict by class.

Answer 3

Without a better example of code it's difficult to diagnose the exact problem you claim to be experiencing with Apple Safari and Bootstrap v4. That being said, it seems that based on the structure provided you could greatly simplify your code which might have the added benefit of addressing your issues.

In case you have issues with SO rendering Bootstrap v4 Alpha you can also view a Bootply of this code: https://www.bootply.com/o8dF8rD9IH

But essentially what is happening here is that we're relying on the .offset-*-* feature of the Bootstrap Grid system to avoid the various empty <div> elements in your current code. This greatly simplifies the amount of code necessary to achieve the same results.

Applying .img-responsive to the images (and a width to that class) allows the images to better scale depending on the screen resolution. This should help alleviate situations where the image exceeds the confines of your column.

/* Backgrounds just to illustrate .container shape */
.container-fluid {
  background: #eee;
}

.col-md-4 {
  background: #ddd;
}

/* Make .img-responsive images use 100% of the space */
.img-responsive { 
  width: 100%;
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet">

<div class="container-fluid">
	<div class="row text-center">
		<div class="col-xs-12 col-sm-12 col-md-4 offset-md-2">
			<h1>Title #1</h1>
			<a href="#null"><img src="http://placehold.it/350x250/" class="img-responsive" /></a>
		</div>
		
		<div class="col-xs-12 col-sm-12 col-md-4">
			<h1>Title #2</h1>
			<a href="#null"><img src="http://placehold.it/350x250/" class="img-responsive" /></a>
		</div>
	</div>
</div>