CODEWITHSUNDEEP
csstwitter-bootstrapgrid-system
Jude Maranga
Jude Maranga

Reputation: 886

Bootstrap grid system columns clarification

I'm still starting to learn Bootstrap and I'm puzzled by the grid system. The description of the grid system says

Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases.

But how come in the succeeding examples, they show it like this?

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

I know that xs is extra small devices and md is for medium device but how come the classes for xs are "col-xs-12" and "col-xs-6"? I mean, they now add up to 18 columns in contrast to the definition of the Bootstrap Grid System. Can someone please enlighten me on this?

Upvotes: 0

Views: 272

Answers (2)

Farzad Yousefzadeh
Farzad Yousefzadeh

Reputation: 2561

you are getting it wrong. in extra small devices the first div will fill the whole row and the second one will be placed below it containing only half of the row because of the col-xs-12 class. If the sum of integers in bootstrap grid system is larger than 12, the column that is making the grid system more than 18 will be placed on the following row.

Explain by code:

<div class="row">
    <div class="col-xs-4"></div>
    <div class="col-xs-8"></div>
</div>

in this case the two .col-xs elements will stick together because 4+8 = 12 and the .row will only contain 12 columns.

<div class="row">
    <div class="col-xs-5"></div>
    <div class="col-xs-8"></div>
</div>

Now the .col-xs-5 column will be on the first row and .col-xs-8 will fall into second row.

For more clarification see the below image:

enter image description here

Upvotes: 1

Bhavin Bhandari
Bhavin Bhandari

Reputation: 7

xs & md set their fix size so, in lg(big sceen), you can use col-xs-12 col-xs-6 it will be set as its size. so, This is wrong :"they now add up to 18 columns in contrast to the definition of the Bootstrap Grid System."

Try this:

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

Upvotes: 0

Related Questions