15

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.

Andrei P
  • 309
  • 1
  • 5
  • 18
  • I have ran into the same problem and the problem with the .row solution is that row breaks will get hardcoded and it doesn't work if you have different number of columns for different resolutions. Is there another way? – Niclas Feb 02 '15 at 15:45
  • No idea so far, I actually fixed the problema a while back, but I will have to re-check and see – Andrei P Feb 05 '15 at 13:55
  • The Bootstrap developers recommend using `.clearfix`: https://github.com/twbs/bootstrap/issues/14855 – alex Aug 10 '16 at 15:19

4 Answers4

11

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.

j.burnette
  • 547
  • 6
  • 15
  • Thanks. If I set it up like that, they will display one above the over, one in each row. – Andrei P Apr 04 '14 at 15:25
  • Try adding .col-sm-4 to each one that has .col-md-4. If it's not specified, bootstrap will use the default width when it hits certain media query widths. You might also need .col-xs-4 as well. I copied all of your html into this bootply and it displays them in rows. I did add the .col-sm-4 to it: http://www.bootply.com/127415 Edit: It won't let me save due to limits, but wrap all the rows with your
    element
     – j.burnette Apr 04 '14 at 15:36
7

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;
    }
}
neizan
  • 2,291
  • 2
  • 37
  • 52
4

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

Community
  • 1
  • 1
Richard Howell
  • 359
  • 4
  • 11
0

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;}
matt
  • 2,690
  • 2
  • 16
  • 17