bootstrap grid xs becomes 18 columns not 12 columns

Question

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

I have read in bootstrap grid, the grids should be equal to the 12 columns totally. but in bootstrap site itself in grid examples they have mentioned above code.. col-xs-12 and col xs-6 equals to becomes 18 but not 12. please clarify this confusion .

Answer 1

The markup in your question is "correct", but probably doesn't explain why. Basically, if you choose to use more than 12 columns, any extra columns after the initial 12 will wrap onto the next line. For example:

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

Will produce a similar result to the following:

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

Both methods are allowed, but you have much more control over the look and style of your page when using the row, columns, row, columns method in the second example.

Read More Here: Bootstrap Column Wrapping

If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.

<div class="row">
  <div class="col-xs-9">.col-xs-9</div>
  <div class="col-xs-4">.col-xs-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
  <div class="col-xs-6">.col-xs-6<br>Subsequent columns continue along the new line.</div>
</div>

Answer 2

Bootstrap does only allow for 12 columns total.

Why the example itself shows 18 also eludes me but the thing to consider is that if more than 12 columns are defined the next group of columns is pushed to the next line. This is normally easily shown with lg or sm or md.

With xs columns, the width is completely auto. This could possibly mean that you can define 18 on one line and they would all auto width. I say your best bet is to play around with xs and see why bootstrap provides it as an example of 18.

I would focus on the width (auto) and the definition of other column types as a comparison to xs. That is the key.