CODEWITHSUNDEEP
csstwitter-bootstrap
norr
norr

Reputation: 2177

Mixing different types of columns in bootstrap

Can I mix different columns (col-xs-, col-sm- etc) in my layout?

For example, I have:

<div class="col-xs-12">
   ...
</div>
<div class="col-xs-12">
   ...
</div>
<div class="col-xs-6">
   ...
</div>
<div class="col-xs-6">
   ...
</div>

and more many col-xs columns.

But now for example, I want to change first column from full width to half in tablets and monitors, so I added "col-sm-6 col-sm-offset-3" and remove "col-xs-12" because "col-sm-6" means "col-xs-12":

<div class="col-sm-6 col-sm-offset-3">
   ...
</div>
<div class="col-xs-12">
   ...
</div>
<div class="col-xs-6">
   ...
</div>
<div class="col-xs-6">
   ...
</div>

And it works, but this is correct with bootstrap grid system and standards?

Or Maybe I have to add "col-sm-*" to others? :

<div class="col-sm-6 col-sm-offset-3">
   ...
</div>
<div class="col-xs-12 col-sm-12">
   ...
</div>
<div class="col-xs-6 col-sm-6">
   ...
</div>
<div class="col-xs-6 col-sm-6">
   ...
</div>

Or maybe I have to keep "col-xs-12"?

<div class="col-xs-12 col-sm-6 col-sm-offset-3">
   ...
</div>
<div class="col-xs-12">
   ...
</div>
<div class="col-xs-6">
   ...
</div>
<div class="col-xs-6">
   ...
</div>

Or maybe I have to keep "col-xs-12" and add "col-sm-*" to others to have identical types in all divs?

<div class="col-xs-12 col-sm-6 col-sm-offset-3">
   ...
</div>
<div class="col-xs-12 col-sm-12">
   ...
</div>
<div class="col-xs-6 col-sm-6">
   ...
</div>
<div class="col-xs-6 col-sm-6">
   ...
</div>

Which versions is correct? How do I properly mix different types of columns?

Upvotes: 2

Views: 3666

Answers (4)

Jon
Jon

Reputation: 1027

All the other answers explain what overrides what, but to answer your question about what you have to have, the default is 100% width. So if you only specify:

<div class="col-sm-6">
  ...
</div>

then when you get smaller than 768px it will go from 50% (6 columns) to 100 (12 columns)

Upvotes: 1

Dan
Dan

Reputation: 1018

Column sizing will default with the smallest size first (xs) with subsequent classes overriding the original size.

For example:

<div class="col-xs-12"></div>

Will appear as with 100% width on all browsers.

The following will appear as 100% on mobile browsers and 50% on tablets and up.

<div class="col-xs-12 col-sm-6"></div>

Upvotes: 1

Tim Lewis
Tim Lewis

Reputation: 29288

This information is all found in Bootstrap's Documentation. It is perfectly fine to add multiple col-*-* classes to a <div> element:

<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
...
</div>

Is a perfectly viable class structure, that renders different column sizes depending on the current size of the viewport. If xs, it would be a full-width column. Small is half, medium is a 3rd and large is a 4th (based on a 12 column layout.)

If you need more information, take a look here:

Bootstrap Grid System

Upvotes: 2

Christian
Christian

Reputation: 2200

Bigger sizes override smaller sizes (e.g. col-sm will override col-xs unless the screen is smaller than col-sm). Personally I always add a col-xs and I only add the bigger sizes when I need them.

Example:

<!-- full width on phones and half on anything bigger -->
<div class="col-xs-12 col-sm-6">
  ...
</div>

Upvotes: 3

Related Questions