CODEWITHSUNDEEP
twitter-bootstrap-3
user2926577
user2926577

Reputation: 1827

Aligning nested rows

I'm trying to create a grid of images (of equal dimensions), where each image has a (variable sized) title. I would like the images to align horizontally, but that only works if the text titles are equally long (see below). How can I make the text and images align if the text length is variable (some images have one line text, others have 2 lines)?

Described in ASCII, this is what I want:

================================   ================================   ================================
|                              |   |          More text           |   |                              |
|         Text text!           |   |   that doesn't fit in 1 line |   |         Some text!           |
|    ####################      |   |    ####################      |   |    ####################      |
|    ##THIS IS AN IMAGE##      |   |    ##THIS IS AN IMAGE##      |   |    ##THIS IS AN IMAGE##      |
|    ####################      |   |    ####################      |   |    ####################      |
================================   ================================   ================================

================================   ================================   ================================
|          More text           |   |                              |   |                              |
| that doesn't fit in 1 line   |   |         Some text!           |   |         Some text!           |
|    ####################      |   |    ####################      |   |    ####################      |
|    ##THIS IS AN IMAGE##      |   |    ##THIS IS AN IMAGE##      |   |    ##THIS IS AN IMAGE##      |
|    ####################      |   |    ####################      |   |    ####################      |
================================   ================================   ================================

Adding rows, as suggested by @ShawnTaylor, improves the situation. http://www.bootply.com/y7a75YLaQa

However, the images still don't align:

enter image description here

Upvotes: 2

Views: 117

Answers (2)

Shawn Taylor
Shawn Taylor

Reputation: 15730

Ok, here is another step closer. In short, use the visible-xs/hidden-xs classes and duplicate your titles, putting one group of them in a single row, and the other group mixed in with your row of images.

http://www.bootply.com/f7eewvCviR

<div class="container">
  <!-- row of H4s hidden on xs -->  
  <div class="row hidden-xs">
    <div class="col-sm-4">
      <h4>One Two(2)</h4>
    </div>
    <div class="col-sm-4">      
      <h4>One Two Three Four Five Six Seven(2)</h4>      
    </div>
    <div class="col-sm-4">
      <h4>One Two(2)</h4>
    </div>
  </div>

  <!-- your H4s below are connected to each image and only visible on xs -->
  <div class="row">
    <div class="col-sm-4">
      <h4 class="visible-xs">One Two(1)</h4>
        <img src="//placehold.it/720x405" class="img-responsive" alt="">
    </div>
    <div class="col-sm-4">
      <h4 class="visible-xs">One Two Three Four Five Six Seven(1)</h4>
      <img src="//placehold.it/720x405" class="img-responsive" alt="">
    </div>
    <div class="col-sm-4">
      <h4 class="visible-xs">One Two(1)</h4>
      <img src="//placehold.it/720x405" class="img-responsive" alt="">
    </div>
  </div>

The last issue here is that fact that the titles are top-aligned, not bottom aligned like your request. You could min-height the row they are in and vertical-align the content to the bottom, but that's harder than it sounds, and a diminishing return, in my opinion...

Upvotes: 1

Shawn Taylor
Shawn Taylor

Reputation: 15730

Because you're only using one breakpoint, it can be easily fixed by putting each set of three col-sm-4's into their own row, like example below. Although, this may only be a partial fix as there is a secondary alignement issue, depending on your requirements... also visible in example:

http://www.bootply.com/y7a75YLaQa

<div class="container">
    <div class="row">
        <div class="col-sm-4">
            <h4>One Two</h4>
            <img src="http://carpetdiscountdundee.co.uk/Gallery/MontBlanc725LightGrey.jpg" class="img-responsive" alt="">
        </div>
        <div class="col-sm-4">
            <h4>One Two Three Four Five Six Seven Eight</h4>
            <img src="http://carpetdiscountdundee.co.uk/Gallery/MontBlanc725LightGrey.jpg" class="img-responsive" alt="">
        </div>
        <div class="col-sm-4">
            <h4>One Two</h4>
            <img src="http://carpetdiscountdundee.co.uk/Gallery/MontBlanc725LightGrey.jpg" class="img-responsive" alt="">
        </div>
    </div>
    <div class="row">
        <div class="col-sm-4"> 
...

Upvotes: 2

Related Questions