CODEWITHSUNDEEP
jqueryhtmlcsstwitter-bootstrap
chandan
chandan

Reputation: 1574

Bootstrap 3: columns float right when resized

firstly here's the link: http://isotopethemes.com/extenso/all-sliders.html

There is a bootstrap row with three columns with 'col-lg-4 col-md-4 col-sm-6' assigned to each. All is well in viewport above 992px. Below 992px the lists 2 and 3 float right, not sure why.

This has happened previously but just adding a solved the problem but this seems to be a different case.

Any help would be appreciated.

HTML Code:

<div class="container">
   <div class="row">
      <div class="col-lg-4 col-md-4 col-sm-6">
         <!-- Some Content -->
      </div>
      <div class="col-lg-4 col-md-4 col-sm-6">
         <!-- Some Content -->
      </div>
      <div class="col-lg-4 col-md-4 col-sm-6">
         <!-- Some Content -->
      </div>
   </div>
</div>

Upvotes: 1

Views: 1902

Answers (3)

Pred
Pred

Reputation: 686

All of your columns float left due to the col-*-* class. The the issue you are seeing in the "layouts 1" row is that your first and second columns have the same height, which causes the third column to float: left to the containing div. In rows "layouts 2" and "layouts 3" your first column has more content (height) than your second column. This forces the third column to float: left to the first column. For an easy solution you could change your code to:

<div class="container">
   <div class="row">
      <div class="col-md-4 col-sm-6">
         <!-- Some Content -->
      </div>
      <div class="col-md-4 col-sm-6">
         <!-- Some Content -->
      </div>
      <div class="col-md-4 col-sm-12">
         <!-- Some Content -->
      </div>
   </div>
</div>

When the viewing size is "medium" (according to bootstrap) or larger you will see three columns on the same row. For a "small" viewing size the first two columns will take up the whole first row, and the third column will take up the whole second column to itself (courtesy of the col-sm-12 class). As a side note, it is not necessary for you to use both col-md-4 and col-lg-4 on the same element; when the viewing area is "large" or "medium" the styles will default to the largest appropriate class, which is col-md-4.

Upvotes: 2

Pau
Pau

Reputation: 538

That's because you're using three col-sm-6 and you only have 12 columns to fill.

It should be like so if you want all of them on the same row:

<div class="container">
   <div class="row">
      <div class="col-lg-4 col-md-4 col-sm-4">
         <!-- Some Content -->
      </div>
      <div class="col-lg-4 col-md-4 col-sm-4">
         <!-- Some Content -->
      </div>
      <div class="col-lg-4 col-md-4 col-sm-4">
         <!-- Some Content -->
      </div>
   </div>
</div>

This is you want them on top of each other:

<div class="container">
   <div class="row">
      <div class="col-lg-4 col-md-4 col-sm-12">
         <!-- Some Content -->
      </div>
      <div class="col-lg-4 col-md-4 col-sm-12">
         <!-- Some Content -->
      </div>
      <div class="col-lg-4 col-md-4 col-sm-12">
         <!-- Some Content -->
      </div>
   </div>
</div>

Upvotes: 2

Valerio Riggi
Valerio Riggi

Reputation: 91

The problem you have here is that your upper right div is shorter than the one on the left so the third div is pushed under it in order to take up less vertical space.

To avoid that consider either setting the divs height manually or using a plugin like Javascript-Equal-Height-Responsive-Rows.

Upvotes: 1

Related Questions