bootstrap grid xs becomes 18 columns not 12 columns -


 <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, grids should equal 12 columns totally. in bootstrap site in grid examples have mentioned above code.. col-xs-12 , col xs-6 equals becomes 18 not 12. please clarify confusion .

the markup in question "correct", doesn't explain why. basically, if choose use more 12 columns, columns after initial 12 wrap onto next line. example:

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

will produce similar result following:

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

both methods allowed, have more control on , style of page when using row, columns, row, columns method in second example.

read more here: bootstrap column wrapping

if more 12 columns placed within single row, each group of columns will, 1 unit, wrap onto 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, 4-column-wide div gets wrapped onto new line 1 contiguous unit.</div>   <div class="col-xs-6">.col-xs-6<br>subsequent columns continue along new line.</div> </div> 

Comments

Popular posts from this blog

Java 3D LWJGL collision -

spring - SubProtocolWebSocketHandler - No handlers -

methods - python can't use function in submodule -