CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Smarty_Coder
Smarty_Coder

Reputation: 87

Floating Divs in Bootstrap Grid System

I'm using the twitter bootstrap grid system for a responsive website. Most of my markup works just fine, but I've one nasty problem, which makes me mad. I've prepared a JSFiddle to let you see what happens: http://jsfiddle.net/gqb5hbza/

Here is my markup

<section>
<div class="content">
    <div class="row">
        <div class="col-xs-6 col-sm-4">
            <div class="item">
                <a href="#">
                    <img class="adaptive-img" src="http://placehold.it/400x330" />
                </a>

                <div class="item-content">
                    <a href="#"><h4 class="h4 black">Title Title Title Title Title Title Title Title Title Title Title Title </h4></a>
                </div>
            </div>
        </div>
        ..........
    </div>
  </div>
</section>

I've multiple div boxes which contains an image and a headline. These boxes are rearranged when changing the browser window. But if one of these boxes has a different height (i.e. too long headline which needs two lines), the system breaks and doesn't rearrange correctly - as you can see in the fiddle. The fourth box should be under the first box and not beneath.

Hope that somebody can help me with this problem.

Upvotes: 0

Views: 1670

Answers (1)

esvendsen
esvendsen

Reputation: 1510

As mentioned, if you want to keep your layout as-is (e.g. not explicitly defining each row), the best solution is to keep each col div the same height. You could use Bootstrap's thumbnail/caption classes to make things look a little more tidy, and then adjust the min-height values for the caption using media queries to keep the extra white space to a minimum.

<section>
<div class="content">
    <div class="row">
        <div class="col-xs-6 col-sm-4">
            <div class="thumbnail">
                <a href="#">
                    <img class="adaptive-img" src="http://placehold.it/400x330" />
                </a>

                <div class="caption">
                    <a href="#"><h4 class="h4 black">Title Title Title Title Title Title Title Title Title Title Title Title </h4></a>
                </div>
            </div>
        </div>
        ...
   </div>
</div>
</section>

Then add something similar to this css:

.caption { min-height: 275px;}

@media(min-width: 400px) {
  .caption { min-height: 100px;}
}

Here's an updated fiddle with this code. Hope this helps you out.

Upvotes: 1

Related Questions