I am learning bootstrap.
They say “bootstrap is a 12 column grid system”
I don’t understand what is a grid system
Can anyone please simplify it ?
Think of it like a math grid.
12 columns / grids = the entire page.
So a 6 grid column elemenet would be 50% of the containing blocks width. An 8 would be 3/4th width.
Did you go through any examples on bootstraps website? It should clear things up for you.
If I need to make a website for mobile device and Desktop both …which grid to use out of these two then ? I am confused.
.col-xs // for extra small device
.col-lg //for desktop
They are hte same grid. col-xs is saying "for extra small screens, use x amount of width. E.g. .col-xs-12 would say, for extra small screens (and up), make this element 100% width. While .col-large-6 (on the same element) would say for large screen (and up) make this element 50% width.
So that means an element like this
<div class="col-xs-12 col-large-6"></div>
Is saying for xs, small, and medium screens, this element will be 100% width. Large and up will be 50% width.
I recommend you read the bootstrap documentation website, since I am basically repeating what is on there 
.
I see you have put both class in the same element.
<div class="col-xs-12 col-large-6"></div>
Does it work this way …
If the user opens the site in Desktop then col-xs-12 is ignored but col-large-6 works
If the user opens the site in extra small device then col-xs-12 works but col-large-6 is ignored.
Am I right ?
For that specific case, yes. Sort of.
The xs/small/medium/large/xl/xxl etc. ALl those sizes actually work off of how wide the screen is.
So technically if someone has a small desktop screen, not maximized, they could activate the medium/large size if you have it set.
Again please play around with some demos on bootstraps website. It will answer all of this 
.
still have confusion.
Case 1: if user opens in large screen ,
we know, large screen is : Large devices Desktops (≥1200px)
say desktop size is 1400 px …so element width size would be 1400 px * 50% = 700 px …right ?
Case 2: Now if I had this code only ,
<div class="col-large-6"></div>
but user opens in small device (<=768 px) … how much width this element is gonna take ?
It should still be 50% of the available number of pixels.
But I am not using class=“col-xs-6” ! …and hence the confusion.
I just went back to the Bootstrap source code. Looking through it, I can’t see any specific rules that apply in that situation, due to the ≥1200px media query. It’s entirely possible I’ve missed something (it’s 6800 lines of CSS), but my guess is that it will rely on the user agent stylesheet, which in this case probably means the DIVs will size to fit the content.
I’m hoping someone with more experience of Bootstrap will tell me different, but that’s how my beginners eye reads it.
Why don’t you create a demo file and try it? FYI it won’t work.
First of all there isn’t a col-large-6 class in bootstrap3 it’s col-lg-6.
The ‘lg’ classes only apply at widths greater than or equal to 1200px and then take on a 50% width. At smaller than 1200px the class has no effect because there are no other rules for it and therefore the width will be the default width of auto.
Thanks Paul.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.