Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

Bootstrap columns not aligning correctly

Tags:

html

css

twitter-bootstrap

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.

like image 685
Andrei P Avatar asked Apr 04 '14 14:04

Andrei P

2 Answers

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.

like image 111
j.burnette Avatar answered Oct 15 '22 02:10

j.burnette

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;
    }
}
like image 39
neizan Avatar answered Oct 15 '22 02:10

neizan
Sign in to Comment

Related questions

Adding canvas inside another canvas: obj.setCoords is not a function( fabric js)
How to create a hover effect in a newsletter?
What is the semantically correct way to use the `<article>` tag in HTML 5, with `<ol>, <ul>, and <li>`?
Styling the hint on a HTML5 input field using required attribute
CSS: Gradients repeating in Chrome when set to tbody/thead
Can I rely on the implicit creation of the `<tbody>` tag?
HTML Select + limit number of options visible
Bottom to top <ul> element arrangement
A fast python HTML parser [closed]
PHP, HTML, Javascript execution order
What's the maximum number of simultaneous connections a browser will make? [closed]
HAML: Create data-xxx-yyy attribute
Positioning div elements horizontally, not vertically
getting users geolocation via html5 and javascript
Html.BeginForm routing to Web Api
Why does outerHTML bring back <!-​- --> comments?
HTML2Canvas converting overflowed content to image
How to make the Chart.js animate when scrolled to that section?
Which bootstrap 3 class should I use to create vertical list of items / "cards" (Rails 3.2, bootstrap3)
An alternative to using negative margin?

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!