CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Andrei P
Andrei P

Reputation: 309

Bootstrap columns not aligning correctly

I've built a layout using Bootstrap 3, and I have the following problem: I have a news section that is set to display a total of 9 news items, 3 on each row, summing 3 rows. However, they don't seem to align properly. Please see the picture below.

Columns not aligning correctly

The html:

          <div class="row">
            <div class="col-md-12 small-article-container"><!-- Small articles container -->
              <div class="col-md-4 small-article"><!-- Start small article -->
                <div class="col-md-12 small-category">
                  <strong><a href="#">Stil de viata</a></strong>
                </div>
                <div class="col-md-12 small-article-img">
                  <a href="#"><img src="images/MH-370-200x130.jpg" width="253" height="164" alt="Small article picture" class="img-responsive"></a>
                </div>
                <div class="col-md-12 small-article-date">
                  astăzi, 14:08
                </div>
                <div class="col-md-12 small-title">
                  <a href="#"><strong>asdasds: CELE MAI AŞTEPTATE TITLURI ALE LUI 2014</strong></a>
                </div>
                <div class="col-md-12 small-excerpt">
                  În articolul publicat luni în  Financial Times, liderul spiritual turc Fethullah Gülen arată care  este...
                </div>
              </div>
              <div class="col-md-4 small-article"><!-- Start small article -->
                <div class="col-md-12 small-category">
                  <strong><a href="#">Stil de viata</a></strong>
                </div>
                <div class="col-md-12 small-article-img">
                  <a href="#"><img src="images/MH-370-200x130.jpg" width="253" height="164" alt="Small article picture" class="img-responsive"></a>
                </div>
                <div class="col-md-12 small-article-date">
                  astăzi, 14:08
                </div>
                <div class="col-md-12 small-title">
                  <a href="#"><strong>AMENINŢĂRI CU MOARTEA ee df PENTRU PREŞEDI as HOLLANDE</strong></a>
                </div>
                <div class="col-md-12 small-excerpt">
                  În articolul publicat luni în  Financial Times, liderul spiritual turc Fethullah Gülen arată care  este...
                </div>
              </div>
              <div class="col-md-4 small-article"><!-- Start small article -->
                <div class="col-md-12 small-category">
                  <strong><a href="#">Stil de viata</a></strong>
                </div>
                <div class="col-md-12 small-article-img">
                  <a href="#"><img src="images/MH-370-200x130.jpg" width="253" height="164" alt="Small article picture" class="img-responsive"></a>
                </div>
                <div class="col-md-12 small-article-date">
                  astăzi, 14:08
                </div>
                <div class="col-md-12 small-title">
                  <a href="#"><strong>AMENINŢĂRI CU MOARTEA PENTRU PREŞEDINTELE HOLLANDE</strong></a>
                </div>
                <div class="col-md-12 small-excerpt">
                  În articolul publicat luni în  Financial Times, liderul spiritual turc Fethullah Gülen arată care  este...
                </div>
              </div>
              <div class="col-md-4 small-article"><!-- Start small article -->
                <div class="col-md-12 small-category">
                  <strong><a href="#">Stil de viata</a></strong>
                </div>
                <div class="col-md-12 small-article-img">
                  <a href="#"><img src="images/MH-370-200x130.jpg" width="253" height="164" alt="Small article picture" class="img-responsive"></a>
                </div>
                <div class="col-md-12 small-article-date">
                  astăzi, 14:08
                </div>
                <div class="col-md-12 small-title">
                  <a href="#"><strong>asdasds: CELE MAI AŞTEPTATE TITLURI ALE LUI 2014</strong></a>
                </div>
                <div class="col-md-12 small-excerpt">
                  În articolul publicat luni în  Financial Times, liderul spiritual turc Fethullah Gülen arată care  este...
                </div>
              </div>
              <div class="col-md-4 small-article"><!-- Start small article -->
                <div class="col-md-12 small-category">
                  <strong><a href="#">Stil de viata</a></strong>
                </div>
                <div class="col-md-12 small-article-img">
                  <a href="#"><img src="images/MH-370-200x130.jpg" width="253" height="164" alt="Small article picture" class="img-responsive"></a>
                </div>
                <div class="col-md-12 small-article-date">
                  astăzi, 14:08
                </div>
                <div class="col-md-12 small-title">
                  <a href="#"><strong>AMENINŢĂRI CU MOARTEA ee df PENTRU PREŞEDI as HOLLANDE</strong></a>
                </div>
                <div class="col-md-12 small-excerpt">
                  În articolul publicat luni în  Financial Times, liderul spiritual turc Fethullah Gülen arată care  este...
                </div>
              </div>
              <div class="col-md-4 small-article"><!-- Start small article -->
                <div class="col-md-12 small-category">
                  <strong><a href="#">Stil de viata</a></strong>
                </div>
                <div class="col-md-12 small-article-img">
                  <a href="#"><img src="images/MH-370-200x130.jpg" width="253" height="164" alt="Small article picture" class="img-responsive"></a>
                </div>
                <div class="col-md-12 small-article-date">
                  astăzi, 14:08
                </div>
                <div class="col-md-12 small-title">
                  <a href="#"><strong>AMENINŢĂRI CU MOARTEA PENTRU PREŞEDINTELE HOLLANDE</strong></a>
                </div>
                <div class="col-md-12 small-excerpt">
                  În articolul publicat luni în  Financial Times, liderul spiritual turc Fethullah Gülen arată care  este...
                </div>
              </div>
              <div class="col-md-4 small-article"><!-- Start small article -->
                <div class="col-md-12 small-category">
                  <strong><a href="#">Stil de viata</a></strong>
                </div>
                <div class="col-md-12 small-article-img">
                  <a href="#"><img src="images/MH-370-200x130.jpg" width="253" height="164" alt="Small article picture" class="img-responsive"></a>
                </div>
                <div class="col-md-12 small-article-date">
                  astăzi, 14:08
                </div>
                <div class="col-md-12 small-title">
                  <a href="#"><strong>asdasds: CELE MAI AŞTEPTATE TITLURI ALE LUI 2014</strong></a>
                </div>
                <div class="col-md-12 small-excerpt">
                  În articolul publicat luni în  Financial Times, liderul spiritual turc Fethullah Gülen arată care  este...
                </div>
              </div>
              <div class="col-md-4 small-article"><!-- Start small article -->
                <div class="col-md-12 small-category">
                  <strong><a href="#">Stil de viata</a></strong>
                </div>
                <div class="col-md-12 small-article-img">
                  <a href="#"><img src="images/MH-370-200x130.jpg" width="253" height="164" alt="Small article picture" class="img-responsive"></a>
                </div>
                <div class="col-md-12 small-article-date">
                  astăzi, 14:08
                </div>
                <div class="col-md-12 small-title">
                  <a href="#"><strong>AMENINŢĂRI CU MOARTEA ee df PENTRU PREŞEDI as HOLLANDE</strong></a>
                </div>
                <div class="col-md-12 small-excerpt">
                  În articolul publicat luni în  Financial Times, liderul spiritual turc Fethullah Gülen arată care  este...
                </div>
              </div>
              <div class="col-md-4 small-article"><!-- Start small article -->
                <div class="col-md-12 small-category">
                  <strong><a href="#">Stil de viata</a></strong>
                </div>
                <div class="col-md-12 small-article-img">
                  <a href="#"><img src="images/MH-370-200x130.jpg" width="253" height="164" alt="Small article picture" class="img-responsive"></a>
                </div>
                <div class="col-md-12 small-article-date">
                  astăzi, 14:08
                </div>
                <div class="col-md-12 small-title">
                  <a href="#"><strong>AMENINŢĂRI CU MOARTEA PENTRU PREŞEDINTELE HOLLANDE</strong></a>
                </div>
                <div class="col-md-12 small-excerpt">
                  În articolul publicat luni în  Financial Times, liderul spiritual turc Fethullah Gülen arată care  este...
                </div>
              </div>
              <div class="col-md-12 more-news">
                <a href="#">MAI MULTE stiri</a>
              </div>
            </div>
          </div>

The css:

.small-article-container {
margin-top: 1em;
}

.small-article {
/*  padding: 0;
*/  margin-bottom: 1em;
padding-right: 0.5em;
padding-left: 0.5em;
/*  float: right;
*/}

.small-category {
padding: 0;
font-size: 0.9em;
}

.small-article-img {
padding: 0;
width: 100%;
}

.small-article-date {
padding: 0;
padding-top: 0.5em;
font-size: 0.9em;
color: #545454;
}

.small-title {
padding: 0;
line-height: 1.3em;
font-size: 1em;
text-transform: uppercase;
}

.small-excerpt {
padding: 0;
font-size: 0.9em;
}

Could anyone please hep me out on this ? I'm having nightmares about it. Thanks.

Upvotes: 15

Views: 23296

Answers (4)

matt
matt

Reputation: 2840

Also late suggestion - same problem here with 2 columns containing images all the same height. Because of the way the divs are generated, I couldn't add a clearfix to individual divs and when added by targeting the odd divs via css, it didn't work. So the simplest solution for me was to add padding to the odd divs:

.col-md-6:nth-child(odd){padding-bottom:15px;}

Or alternatively give the odd divs a height slightly more than the image height:

 .col-md-6:nth-child(odd){height:310px;}

Upvotes: 0

neizan
neizan

Reputation: 2321

Old question, but I just had the same issue.

As @alex mentioned in comments, Bootstrap developers recommend using clearfix for this. That link refers you to here, which discusses responsive column resets using a clearfix div.

Instead of inserting an extra div for the clearfix, I just selected the nth-of-type elements, based on the number of columns per row (three in this case), and cleared the float on those elements. It works if all elements in the row are the same width, which appears to be the case here. It worked for me.

For the example given by the OP, the CSS might look something like this:

@media only screen and (@screen-md-min) {
    .small-article:nth-of-type(3n + 1) {
        clear: both;
    }
}

Upvotes: 7

Richard Howell
Richard Howell

Reputation: 359

Very late to this party, however, for anyone else who stumbles on this problem:

As j.burnette said wrapping every 3 .small-article(s) in a .row class will resolve this issue.

Instead of adding additional HTML a CSS only approach would be to set a min-hight attribute for .small-article: 

.small-article {
    min-height: (height of largest .small-article)px;
}

This would depend knowing the height of the tallest .small-article and setting this as the min-height. You should be able to ascertain this based on how you are generating your images and text excerpts maximum length.

If it needs to be more automated you can use CSS and JS to obtain the height of the tallest box and then apply the min-height to your .small-article classes.

For the sake of speed you can always grab a plug to do this for you. Here is a jQuery plugin I use regularly:

jquery.heightMatch.js

I assume jQuery is available as you are using BS3. I do not condone using JS plugins for such a small tasks, but chances are you will have somewhere else on your site this plugin maybe useful for matching heights

Upvotes: 4

j.burnette
j.burnette

Reputation: 547

You're so close. The column classes have the float attribute set in the bootstrap styles and your column is floating, just not where you expect it. That middle column in the 1st row is preventing the one you see floating off in the blank space from wrapping properly because it's taller than the others. All you need to do is wrap each group of 3 in a row like this:

<div class="row">
    <div class="col-md-4">
        //stuff here
    </div>
    <div class="col-md-4">
        //stuff here
    </div>
    <div class="col-md-4">
        //stuff here
    </div>
</div>
<div class="row">
    <div class="col-md-4">
        //stuff here
    </div>
    <div class="col-md-4">
        //stuff here
    </div>
    <div class="col-md-4">
        //stuff here
    </div>
</div>
<div class="row">
    <div class="col-md-4">
        //stuff here
    </div>
    <div class="col-md-4">
        //stuff here
    </div>
    <div class="col-md-4">
        //stuff here
    </div>
</div>

Set it up like that and you're ready to go.

Upvotes: 11

Related Questions