Twitter Bootstrap Question posted in

Creating a grid (each div is the same responsive height) in Twitter bootstrap?

I’m trying to create a grid in bootstrap, when I add multiple columns (which will span multiple lines) into a single row it looks like this:

enter image description here

Here’s my code:

<div class="row">
    <div class="col-md-4">
        <div class="col-md-4"><img src="http://icons.iconarchive.com/icons/thiago-silva/palm/256/Photos-icon.png"></div>
        <div class="col-md-8"><h4>Subheading</h4>Text goes here. <br /><br /> This one's a little longer and breaks the horizontal alignment with other columns.<br /></div>
    </div>
    <div class="col-md-4">
        <div class="col-md-4"><img src="http://icons.iconarchive.com/icons/thiago-silva/palm/256/Photos-icon.png"></div>
        <div class="col-md-8"><h4>Subheading</h4>Text goes here.</div>
    </div>
    <div class="col-md-4">
        <div class="col-md-4"><img src="http://icons.iconarchive.com/icons/thiago-silva/palm/256/Photos-icon.png"></div>
        <div class="col-md-8"><h4>Subheading</h4>Text goes here.</div>
    </div>
    <div class="col-md-4">
        <div class="col-md-4"><img src="http://icons.iconarchive.com/icons/thiago-silva/palm/256/Photos-icon.png"></div>
        <div class="col-md-8"><h4>Subheading</h4>Text goes here.</div>
    </div>
    <div class="col-md-4">
        <div class="col-md-4"><img src="http://icons.iconarchive.com/icons/thiago-silva/palm/256/Photos-icon.png"></div>
        <div class="col-md-8"><h4>Subheading</h4>Text goes here.</div>
    </div>
    <div class="col-md-4">
        <div class="col-md-4"><img src="http://icons.iconarchive.com/icons/thiago-silva/palm/256/Photos-icon.png"></div>
        <div class="col-md-8"><h4>Subheading</h4>Text goes here.</div>
    </div>
</div>

If I use .row-eq-height it converts it to a flexbox layout and indeed all of the rows are the same height, but it places every single column onto the same line like so:

enter image description here

Finally, my other option is to split each row into three different columns manually, which outputs the row how I’d like it do, but is also very impractical since the divs are added dynamically – some pages may only have 2 divs, some may have 10 or more.

enter image description here

Any ideas on how I can add a simple grid please, where each div/.col has the same height? Thank you.

Tags:

3

Answers


  1. 0

    Rather than using bootstrap for this, why not use custom classes?

    that way, all you need to do is add a vertical-align to your elements.

    DEMO:

    .normal,.bigger,.short {
  height: 50px;
  display: inline-block;
  width: 28%;
  min-width:150px;
  background: lightgray;
  margin:2px;
}
.bigger{
  height:100px;
  vertical-align:top;
  }
.short{
  height:20px;
  }
    <div class="bigger">longer</div>
<div class="normal">normal size</div>
<div class="normal">normal size</div>
<div class="normal">normal size</div>
<div class="normal">normal size</div>
<div class="short">short size</div>
    Login or Signup to reply.
  2. 0

    Some times it isn’t possible to use rows as @WhiteLine suggested because you may wish to use multiple col-XX-XX classes on the same element.

    The way I have solved this before is to add an empty div with the clearfix class and a visible-XX class to simulate row breaks.

    Bootply Demo

    <div class="row">
    <div class="col-md-4">
        <div class="col-md-4"><img src="http://icons.iconarchive.com/icons/thiago-silva/palm/256/Photos-icon.png"></div>
        <div class="col-md-8"><h4>Subheading</h4>Text goes here. <br /><br /> This one's a little longer and breaks the horizontal alignment with other columns.<br /></div>
    </div>
    <div class="col-md-4">
        <div class="col-md-4"><img src="http://icons.iconarchive.com/icons/thiago-silva/palm/256/Photos-icon.png"></div>
        <div class="col-md-8"><h4>Subheading</h4>Text goes here.</div>
    </div>
    <div class="col-md-4">
        <div class="col-md-4"><img src="http://icons.iconarchive.com/icons/thiago-silva/palm/256/Photos-icon.png"></div>
        <div class="col-md-8"><h4>Subheading</h4>Text goes here.</div>
    </div>

  <div class="visible-md visible-lg clearfix"></div>

    <div class="col-md-4">
        <div class="col-md-4"><img src="http://icons.iconarchive.com/icons/thiago-silva/palm/256/Photos-icon.png"></div>
        <div class="col-md-8"><h4>Subheading</h4>Text goes here.</div>
    </div>
    <div class="col-md-4">
        <div class="col-md-4"><img src="http://icons.iconarchive.com/icons/thiago-silva/palm/256/Photos-icon.png"></div>
        <div class="col-md-8"><h4>Subheading</h4>Text goes here.</div>
    </div>
    <div class="col-md-4">
        <div class="col-md-4"><img src="http://icons.iconarchive.com/icons/thiago-silva/palm/256/Photos-icon.png"></div>
        <div class="col-md-8"><h4>Subheading</h4>Text goes here.</div>
    </div>
</div>

    If you use multiple col-XX-XX classes you can use mutiple clearfix divs that are visible at different resolutions…

    <div class="row">
    <div class="col-md-4 col-lg-3">
        <div class="col-md-4"><img src="http://icons.iconarchive.com/icons/thiago-silva/palm/256/Photos-icon.png"></div>
        <div class="col-md-8"><h4>Subheading</h4>Text goes here. <br><br> This one's a little longer and breaks the horizontal alignment with other columns.<br></div>
    </div>
    <div class="col-md-4 col-lg-3">
        <div class="col-md-4"><img src="http://icons.iconarchive.com/icons/thiago-silva/palm/256/Photos-icon.png"></div>
        <div class="col-md-8"><h4>Subheading</h4>Text goes here.</div>
    </div>
    <div class="col-md-4 col-lg-3">
        <div class="col-md-4"><img src="http://icons.iconarchive.com/icons/thiago-silva/palm/256/Photos-icon.png"></div>
        <div class="col-md-8"><h4>Subheading</h4>Text goes here.</div>
    </div>

  <div class="visible-md clearfix"></div>

    <div class="col-md-4 col-lg-3">
        <div class="col-md-4"><img src="http://icons.iconarchive.com/icons/thiago-silva/palm/256/Photos-icon.png"></div>
        <div class="col-md-8"><h4>Subheading</h4>Text goes here.</div>
    </div>

  <div class="visible-lg clearfix"></div>

    <div class="col-md-4 col-lg-3">
        <div class="col-md-4"><img src="http://icons.iconarchive.com/icons/thiago-silva/palm/256/Photos-icon.png"></div>
        <div class="col-md-8"><h4>Subheading</h4>Text goes here.</div>
    </div>
    <div class="col-md-4 col-lg-3">
        <div class="col-md-4"><img src="http://icons.iconarchive.com/icons/thiago-silva/palm/256/Photos-icon.png"></div>
        <div class="col-md-8"><h4>Subheading</h4>Text goes here.</div>
    </div>
</div>

    Example using multiple col-XX-XX classes

    Login or Signup to reply.
  3. 0

    How about a flex solution? If you don’t need ancient browser support, this is the way to go.

    .row {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-direction: normal;
    -webkit-box-orient: horizontal;
    -webkit-flex-direction: row;
    -moz-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: space-between;
    -moz-justify-content: space-between;
    justify-content: space-between
}
.flexcol {
    width: 30%;        /* adjust this for different column number */
    background: #eee;
    margin-bottom: 2vw;
    padding: 1vw;
}
.flexcol img {
    max-width: 100%;
}
    <div class="row">
    <div class="col-md-4 flexcol">
        <div class="col-md-4"><img src="http://icons.iconarchive.com/icons/thiago-silva/palm/256/Photos-icon.png"></div>
        <div class="col-md-8"><h4>Subheading</h4>Text goes here. <br /><br /> This one's a little longer and breaks the horizontal alignment with other columns.<br /></div>
    </div>
    <div class="col-md-4 flexcol">
        <div class="col-md-4"><img src="http://icons.iconarchive.com/icons/thiago-silva/palm/256/Photos-icon.png"></div>
        <div class="col-md-8"><h4>Subheading</h4>Text goes here.</div>
    </div>
    <div class="col-md-4 flexcol">
        <div class="col-md-4"><img src="http://icons.iconarchive.com/icons/thiago-silva/palm/256/Photos-icon.png"></div>
        <div class="col-md-8"><h4>Subheading</h4>Text goes here.</div>
    </div>
    <div class="col-md-4 flexcol">
        <div class="col-md-4"><img src="http://icons.iconarchive.com/icons/thiago-silva/palm/256/Photos-icon.png"></div>
        <div class="col-md-8"><h4>Subheading</h4>Text goes here.</div>
    </div>
    <div class="col-md-4 flexcol">
        <div class="col-md-4"><img src="http://icons.iconarchive.com/icons/thiago-silva/palm/256/Photos-icon.png"></div>
        <div class="col-md-8"><h4>Subheading</h4>Text goes here.</div>
    </div>
    <div class="col-md-4 flexcol">
        <div class="col-md-4"><img src="http://icons.iconarchive.com/icons/thiago-silva/palm/256/Photos-icon.png"></div>
        <div class="col-md-8"><h4>Subheading</h4>Text goes here.</div>
    </div>
</div>

    It is possible to use the same method inside the containers, demo here:
    http://jsfiddle.net/fpfbcs3c/

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

Back To Top
Search