Bootstrap columns not floating/wrapping onto next row with flex-box

Question

I am trying to make the bootstrap columns of same height using several approaches that I found over here. Everywhere it is working perfectly except the safari on mac, where all the columns stack up in the first row instead of floating to the next one. here is the HTML:

<div class="row">
    <div class="col-md-4 col-sm-4 col-xs-6 text-center">

        <div class="product_card">
            <a href="/buy/handsome-cream-3-pc-jodhpuri-suit"><img alt="Handsome Cream 3 Pc Jodhpuri Suit"
                                                                  src="/system/images/attachments/000/000/174/normal/open-uri20160927-22035-h7grcj?1474996752"></a>
            <div data-target="#loginSignUpModal" data-toggle="modal" onclick="return false;">
                <i class="fa fa-star-o" aria-hidden="true"></i> Shortlist
            </div>

            <a class="caption" href="/buy/handsome-cream-3-pc-jodhpuri-suit">
                <h3>Handsome Cream 3 Pc Jodhpuri Suit</h3>
                <span class="price">$380.00</span>
            </a></div>
    </div>
</div>

here is the CSS that is being used:

.row {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    &> [class*='col-'] {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -webkit-flex-direction: column;
      -ms-flex-direction: column;
      flex-direction: column;
    }
  }

here is the screenshots on MAC SAFARI:

here is the screenshots on Ubuntu Chrome:

Why is safari goofing up with my col-mds? How to fix this without using JS?

I had a similar problem to this when transitioning from bootstrap 3.x to 5.x turns out that row needs to be a specific parent of col class. e.g. ```.row > * { -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; width: 100%; max-width: 100%; padding-right: calc(var(--bs-gutter-x) * 0.5); padding-left: calc(var(--bs-gutter-x) * 0.5); margin-top: var(--bs-gutter-y); }``` This was not the case in bootstrap 3. This may not specifically answer this question but hopefully helps someone else as I spent a while trying to figure out why my grid was not working as expected. — Daniel, Aug 23 '23 at 18:15

score 0 · Answer 1 · answered Sep 28 '16 at 10:10

I think the easier way to do it is by setter the height you want in CSS, remove the img tag, and add a background cover image on your first a tag:

.product_card {
  height: 300px;
  width: 190px;
  float: left;
  margin: 4px;
}

.product_card a:first-child {
  display: block;
  height: 100%;
  background-image: url('http://i.imgur.com/8YsAmq3.gif');
  background-position: center center;
  -webkit-background-size: cover;
  background-size: cover;
 }

 .product_card:first-child {
   margin-left: 0px;
 }

 .product_card:last-child {
   margin-right: 0px;
 }

<div class="row">
<div class="col-md-4 col-sm-4 col-xs-6 text-center">

    <div class="product_card">
        <a href="/buy/pork" title="Amazing porks" style="background-image: url('http://lorempixel.com/output/animals-q-c-640-480-6.jpg');"></a>
        <div data-target="#loginSignUpModal" data-toggle="modal" onclick="return false;">
            <i class="fa fa-star-o" aria-hidden="true"></i> Shortlist
        </div>

        <a class="caption" href="/buy/pork">
            <h3>Porks</h3>
            <span class="price">$380.00</span>
        </a></div>
<div class="product_card">
        <a href="/buy/rhinoceros" title="Rhinoceros from Africa" style="background-image: url('http://lorempixel.com/output/animals-q-c-600-400-1.jpg');"></a>
        <div data-target="#loginSignUpModal" data-toggle="modal" onclick="return false;">
            <i class="fa fa-star-o" aria-hidden="true"></i> Shortlist
        </div>

        <a class="caption" href="/buy/rhinoceros">
            <h3>Rhinoceros</h3>
            <span class="price">$8 000.00</span>
        </a></div>
<div class="product_card">
        <a href="/buy/dog" title="Cuttie dog" style="background-image: url('http://lorempixel.com/output/animals-q-c-800-800-8.jpg');"></a>
        <div data-target="#loginSignUpModal" data-toggle="modal" onclick="return false;">
            <i class="fa fa-star-o" aria-hidden="true"></i> Shortlist
        </div>

        <a class="caption" href="/buy/dog">
            <h3>Dogs</h3>
            <span class="price">$380.00</span>
        </a></div>
</div>
</div>

I can't use background image – Vipin Verma Sep 28 '16 at 18:15 — Vipin Verma, Sep 28 '16 at 18:15

Bootstrap columns not floating/wrapping onto next row with flex-box

1 Answers1