CODEWITHSUNDEEP
twitter-bootstrap-3
sdalby
sdalby

Reputation: 163

Bootstrap 3 gridsize

I am trying to figure out the new grid system in bootstrap 3 (I am new to Bootstrap in general).

In the bootstrap tutorial they state that the grid has 12 units but for .col-xs the sum often reaches 18 while others reach 12.

I cannot figure out why.

Upvotes: 1

Views: 63

Answers (1)

ringstaff
ringstaff

Reputation: 2325

As you can see in the grid options, the grid always has 12 columns for any screen size. Keep in mind that you can have multiple column classes on one div, such as:

<div class="col-xs-12 col-md-8">stuff</div>

This will make this div 12 columns on extra small devices, and 8 columns wide on medium.

EDIT:

I think this example may have been what you were referring to (here's its fiddle):

<div class="row">
  <div id="a" class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
  <div id="b" class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

This will keep the first column to a width of 12 for extra small screens, and the second column will be bumped to the next row ( with a width of 6 columns ). On small screens, however, the first column will be 6 wide and the second column will be 6 wide.

Upvotes: 1

Related Questions