Bootstrap Row breaks apart on mobile

Question

I have a row of 4 products, essentially like so:

<div class="row">

  <div class="col-xs-6 col-sm-3">

    <div class="image">
      <img src="...">
    </div>
    <div class="text">
      Text here
    </div>

  </div>
  <div class="col-xs-6 col-sm-3">

    <div class="image">
      <img src="...">
    </div>
    <div class="text">
      Text here
    </div>

  </div>
  <div class="col-xs-6 col-sm-3">

    <div class="image">
      <img src="...">
    </div>
    <div class="text">
      Text here
    </div>

  </div>
  <div class="col-xs-6 col-sm-3">

    <div class="image">
      <img src="...">
    </div>
    <div class="text">
      Text here
    </div>

  </div>

</div>

This looks great on desktop:

However on mobile it breaks apart:

All images have the same height, therefore I think this is due to the differing caption lengths. I don't want to have a set height on the <div class="text"> as I cannot guarantee that the caption will fit within it.

Is there a clever way in CSS (or jQuery if must) to set the heights of the captions to equal the tallest caption in the row? This would have to fire on browser resize too.

Thanks

Is there any other css at work here. Is there any CSS for `.image` or .text` for instance? — Goose, Sep 19 '16 at 20:00
Where's your `.container/.container-fluid` element? Also, add `.img-responsive` to the images. — Vucko, Sep 19 '16 at 20:17

score 2 · Accepted Answer · edited May 23 '17 at 12:19

2

There is actually, using clearfix elements every nth row that will only appear on certain breakpoints.

<div class="clearfix visible-xs-block"></div>

Every second element, place this clearfix element, and you can set it to visible-xs-block so that is only appears on xs.

 <div class="col-xs-6 col-sm-3">
    /* .. */
 </div>
 <div class="col-xs-6 col-sm-3">
    /* .. */
 </div>
 <div class="clearfix visible-xs-block"></div>
 <div class="col-xs-6 col-sm-3">
    /* .. */

.. and so on.

A clearfix is a way for an element to automatically clear its child elements

from Madara Uchiha

edited May 23 '17 at 12:19

Community

1
1

answered Sep 19 '16 at 20:14

bitten

2,463
2
25
44

1

I have no idea how this wizardry works, but it's absolutely bob on. Thanks for this - genius – Lee Sep 20 '16 at 06:54
1

Haha. Yeah, it's quite nice. Especially if you do away with row's and combine it with `clearfix visible-md-block visible-lg-block` and set this element every 3 rows, then it's possible to have a 3 column layout on md and above, and 2 rows on smaller devices. – bitten Sep 20 '16 at 12:56
1

What do you not understand? How a clearfix works? In theory it clear all previous floats and reset the space for the next elements. Like above, your browser tries to place floated elements in the closest available space. With a clearfix, the browser will place it after the clearfix'd element. Bootstrap uses the micro clearfix solution from Nicolas Gallagher. [Read more here](http://nicolasgallagher.com/micro-clearfix-hack/). – bitten Sep 20 '16 at 12:58
Thank you for that explanation! I get how it works now, as long as I don't think about it too hard :) I'm just happy theres a nice clean fix for this - I'm sure I'm not the only person who's bumped into this issue. – Lee Sep 20 '16 at 13:18
Just think of it like a ruler that resets the positions and so doesn't let elements be placed above the "line". Nah, I was in the same boat (3 columns desktop, 2 on mobile) and was told about this. – bitten Sep 20 '16 at 13:27

Bootstrap Row breaks apart on mobile

1 Answers1