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 read in the bootstrap grid, the grids should be 12 columns completely. but in the loading site itself in the grid examples they mentioned the above code .. col-xs-12 and col xs-6 is 18 but not 12. please clear this confusion.
source to share
The markup in your question is "correct", but probably doesn't explain why. Basically, if you choose to use more than 12 columns, any additional columns after the initial 12 will wrap to the next row. For example:
<div class="row">
<div class="col-xs-12">...</div>
<div class="col-xs-6">...</div>
</div>
The result will look like this:
<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 using the method row, columns, row, columns
in the second example gives you much more control over the look and feel of your page.
More details here: Wrapping Bootstrap Columns
If more than 12 columns are placed in one row, each group of additional columns will, as one block, wrap on a new row.
<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 > 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>
source to share
Bootstrap only allows 12 columns.
Why the example itself shows 18 also eludes me, but it must be borne in mind that if more than 12 columns are defined, the next group of columns will wrap to the next row. This is usually easy to show with lg or sm or md.
With xs columns, the width is fully automatic. This could mean that you can define 18 on one line and they will all be automatically width. I say the best thing to do is play with the xs and see why bootstrap provides it as example 18.
I would focus on width (auto) and defining other column types versus xs. This is the key.
source to share
Your Bootstrap grid has been read, but you haven't read Bootstrap's CSS grid. It is not possible for Bootstrap's grid to be 18 columns. Below the Bootstrap CSS grid.
.col-xs-12, .col-sm-12, .col-md-12, col-lg-12{
width: 100%;
float: left:
position: relative;
padding-left: 15px;
padding-right: 15px;
min-height: 1px;
}
.col-xs-6, .col-sm-6, .col-md-6, col-lg-6{
width: 50%;
float: left:
position: relative;
padding-left: 15px;
padding-right: 15px;
min-height: 1px;
}
.col-xs-1, .col-sm-1, .col-md-1, col-lg-1{
width: 8.3333%;
float: left:
position: relative;
padding-left: 15px;
padding-right: 15px;
min-height: 1px;
}
The three @meida CSS query width differences are the same (100/12).
source to share
You cannot use the col-xs
default becusase of 12 columns use this code below
<div class="container">
<div class="row">
<div class="col-lg-8 col-sm-6 col-xs-12">.col-lg-8 .col-sm-6 .col-xs-12</div>
<div class="col-lg-4 col-sm-6 col-xs-12">.col-lg-4 .col-sm-6 .col-xs-12</div>
</div>
</div>
this code is correct and does not contain any errors
You may not be using the class container
and when you use one row
it means you can put 12 columns you used one row, there should be a collection of each column not exceeding 12 columns eg clo-lg-8
+ col-lg-4
= col-lg-12
this is true but if collecting a column less than 12 columns is not a problem. but should not exceed 12 columns.
in your example col-xs-12
+ col-xs-6
= col-xs-18
This is an error because you used one row
and put the whole column, if the div first and you can put another colimn on that line, you must shrink col-xs-12
until the column in the second div is added to that line.
source to share