Twitter Bootstrap Question posted in

Twitter bootstrap – Same height elements – bootstrap

I would like to make all elements in my list the same height even when one of them has more text in it, then it would be great if others could adjust. I have used divs but have no problem to change to li, actually I’m looking for advise how to solve this the best way.

I am using twitter-bootstrap, to ilustrate my issue I have prepared example https://jsfiddle.net/f2vwvsgu/1/

<div class='container'>
  <div class='row'>
    <div class='col-sm-4 col-xs-12'>
      <div class='img'>
        <img src='http://lorempixel.com/image_output/nature-q-g-707-400-2.jpg' class='img-responsive' />
      </div>
      <div class='description'>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sed commodo sapien, vitae congue velit.
      </div>
    </div>
    <div class='col-sm-4 col-xs-12'>
      <div class='img'>
        <img src='http://lorempixel.com/image_output/nature-q-g-707-400-2.jpg' class='img-responsive' />
      </div>
      <div class='description'>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sed commodo sapien, vitae congue velit.
      </div>
    </div>
    <div class='col-sm-4 col-xs-12'>
      <div class='img'>
        <img src='http://lorempixel.com/image_output/nature-q-g-707-400-2.jpg' class='img-responsive' />
      </div>
      <div class='description'>
        Lorem ipsum dolor sit amet
      </div>
    </div>
    <div class='col-sm-4 col-xs-12'>
      <div class='img'>
        <img src='http://lorempixel.com/image_output/nature-q-g-707-400-2.jpg' class='img-responsive' />
      </div>
      <div class='description'>
        Lorem ipsum dolor sit amet
      </div>
    </div>
    <div class='col-sm-4 col-xs-12'>
      <div class='img'>
        <img src='http://lorempixel.com/image_output/nature-q-g-707-400-2.jpg' class='img-responsive' />
      </div>
      <div class='description'>
        Lorem ipsum dolor sit amet
      </div>
    </div>
    <div class='col-sm-4 col-xs-12'>
      <div class='img'>
        <img src='http://lorempixel.com/image_output/nature-q-g-707-400-2.jpg' class='img-responsive' />
      </div>
      <div class='description'>
        Lorem ipsum dolor sit amet
      </div>
    </div>    
  </div>
</div>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I have debugged some existing solutions and found out that it is possible to use clear: both; in CSS for last list element, in this specific example it would be:

    .col-sm-4:nth-child(3n + 1){
      clear: both;
}

    This is exactly what I was looking for.


  2. 0

    Doing this in bootstrap or CSS without JS is possible only with some flexbox-tweaks, which would need another approach to the grid. Check out CSS-Flexbox, it’s absolutely worth it.

    To help our problem, I wrote a short script to get the desired result with minimal markup-changes. You will only need to add:

    <div class='container js-equalize-container'>

<div class='col-xs-4 js-equalize-target'>

    https://jsfiddle.net/685f822q/

    A short explaination: What the script does: It sets all heights to “auto”, looks for the highest one, and applies this height to every element with the js-equalize-target-class.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search