<div class="col-xs-6 col-sm-4">Column 1</div> <!-- 1/2 width on mobile, 1/3 screen on tablet) -->
<div class="col-xs-6 col-sm-8">Column 2</div> <!-- 1/2 width on mobile, 2/3 width on tablet -->
NOTE: as per comment below, grid classes for a given screen size apply to that screen size and larger unless another declaration overrides it (i.e. col-xs-6 col-md-4 spans 6 columns on xs and sm, and 4 columns on md and lg, even though sm and lg were never explicitly declared)
NOTE: if you don't define xs, it will default to col-xs-12 (i.e. col-sm-6 is half the width on sm, md and lg screens, but full-width on xs screens).
NOTE: it's actually totally fine if your .row includes more than 12 cols, as long as you are aware of how they will react. --This is a contentious issue, and not everyone agrees.
–
–
–
–
lg (for larger desktops)
The classes above can be combined to create more dynamic and flexible layouts.
Tip: Each class scales up, so if you wish to set the same widths for
xs and sm, you only need to specify xs.
OK, the answer is easy, but read on:
col-lg- stands for column large ≥ 1200px
col-md- stands for column medium ≥ 992px
col-xs- stands for column extra small ≥ 768px
The pixel numbers are the breakpoints, so for example col-xs is targeting the element when the window is smaller than 768px(likely mobile devices)...
I also created the image below to show how the grid system works, in this examples I use them with 3, like col-lg-6 to show you how the grid system work in the page, look at how lg, md and xs are responsive to the window size:
The main point is this:
col-lg-* col-md-* col-xs-* col-sm define how many columns will there be in these different screen sizes.
Example: if you want there to be two columns in desktop screens and in phone screens you put two col-md-6 and two col-xs-6 classes in your columns.
If you want there to be two columns in desktop screens and only one column in phone screens (ie two rows stacked on top of each other) you put two col-md-6 and two col-xs-12 in your columns and because sum will be 24 they will auto stack on top of each other, or just leave xs style out.
small grid (≥ 768px) = .col-sm-*,
medium grid (≥ 992px) = .col-md-*,
large grid (≥ 1200px) = .col-lg-*.
to Read More...
Here you go
col-lg-2 : if the screen is large (lg) then this component will take space of 2 elements considering entire row can fit 12 elements ( so you will see that on large screen this component takes 16% space of a row)
col-lg-6 : if the screen is large (lg) then this component will take space of 6 elements considering entire row can fit 12 elements -- when applied you will see that the component has taken half the available space in the row.
Above rule is only applied when the screen is large. when the screen is small this rule is discarded and only one component per row is shown.
Below image shows various screen size widths :
The child element where you place this class,
will occupy inside its parent element, 6 columns out of the 12 available,
when the screen size is equal or greater than ≥768px (medium size screens).
Remember that in Bootstrap (5.1):
There are available 12 columns in their grid system for every and all elements.
Those 12 columns are found (as expected) in the parent element, and the child occupies as many columns as you tell it to occupy with that number (the 6, in this example).
In your code you could see something like this:
<div class="row" id="parent">
<div class="col-12 col-md-6" id="child">
Content.
col-12 will make the child occupy all available columns from the parent, when the viewport size is below the given medium screen size of 768px
Links:
Grid system
Breakpoints
