504

I am confused with the grid system in the new Bootstrap, particularly these classes:

col-lg-*
col-md-*
col-xs-*

(where * represents some number).

Can anyone please explain the following:

  1. How that number is aligning the grids?
  2. How to use these numbers?
  3. What they actually represent?
informatik01
  • 16,038
  • 10
  • 74
  • 104
Bravo
  • 8,589
  • 14
  • 48
  • 85
  • 17
    You will find an explaination [here](http://getbootstrap.com/css/#grid-options). You can use number in column however you want, but make sure that the sum of all column's numbers in a same row must equal to 12 – Doan Cuong Jun 12 '14 at 03:31

6 Answers6

976

Applies to Bootstrap 3 only.

Ignoring the letters (xs, sm, md, lg) for now, I'll start with just the numbers...

  • the numbers (1-12) represent a portion of the total width of any div
  • all divs are divided into 12 columns
  • so, col-*-6 spans 6 of 12 columns (half the width), col-*-12 spans 12 of 12 columns (the entire width), etc

So, if you want two equal columns to span a div, write

<div class="col-xs-6">Column 1</div>
<div class="col-xs-6">Column 2</div>

Or, if you want three unequal columns to span that same width, you could write:

<div class="col-xs-2">Column 1</div>
<div class="col-xs-6">Column 2</div>
<div class="col-xs-4">Column 3</div>

You'll notice the # of columns always add up to 12. It can be less than twelve, but beware if more than 12, as your offending divs will bump down to the next row (not .row, which is another story altogether).

You can also nest columns within columns, (best with a .row wrapper around them) such as:

<div class="col-xs-6">
  <div class="row">
    <div class="col-xs-4">Column 1-a</div>
    <div class="col-xs-8">Column 1-b</div>
  </div>
</div>
<div class="col-xs-6">
  <div class="row">
    <div class="col-xs-2">Column 2-a</div>
    <div class="col-xs-10">Column 2-b</div>
  </div>
</div>

Each set of nested divs also span up to 12 columns of their parent div. NOTE: Since each .col class has 15px padding on either side, you should usually wrap nested columns in a .row, which has -15px margins. This avoids duplicating the padding and keeps the content lined up between nested and non-nested col classes.

-- You didn't specifically ask about the xs, sm, md, lg usage, but they go hand-in-hand so I can't help but touch on it...

In short, they are used to define at which screen size that class should apply:

  • xs = extra small screens (mobile phones)
  • sm = small screens (tablets)
  • md = medium screens (some desktops)
  • lg = large screens (remaining desktops)

Read the "Grid Options" chapter from the official Bootstrap documentation for more details.

You should usually classify a div using multiple column classes so it behaves differently depending on the screen size (this is the heart of what makes bootstrap responsive). eg: a div with classes col-xs-6 and col-sm-4 will span half the screen on the mobile phone (xs) and 1/3 of the screen on tablets(sm). 

<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.

Shawn Taylor
  • 15,590
  • 4
  • 32
  • 39
  • 55
    It's also worth noting that grid classes for a given screen size apply to screens that size **and larger**, unless further overridden. For example, `.col-xs-2.col-sm-2.col-lg-7` is equivalent to .`col-xs-2.col-lg-7` – cvrebert Jun 12 '14 at 05:34
  • 7
    You need to make a correction to your example regarding nesting. Nesting requires a row to be inserted into the column that you are nesting the other columns inside. Not adding a row will cause you to have double padding. For a better understanding of this, see the diagram in my answer here: http://stackoverflow.com/questions/23899715/bootstrap-balancing-bullet-columns/23912463#23912463 – jme11 Jun 14 '14 at 00:27
  • 1
    very nice explanation , thanks. I love the bit about wrapping the `.cols` in `.row` to avoid and cacel the padding. I was always wondering why to use row and what difference does it make. – Rishiraj Purohit Nov 09 '15 at 05:09
  • But in the documentation it seems the total width of divs exceeds more than 12, upto 18 for 'xs'. Please take a look on the section 'Mixed: mobile and desktop' and why it so? https://getbootstrap.com/docs/3.3/examples/grid/ – Michel Nov 24 '17 at 15:42
  • @Michel it looks like you're misunderstanding their documentation. they are showing two separate xs options there - one for 12 columns (full width) and one for 6 columns (half-width). You'll see that those columns also show lg-8 and lg-4 - what they are showing you is that they will span 8 and 4 columns (2/3 + 1/3 of total width width) on large displays, and 12 and 6 (full width + 1/2 of following row) on phone displays. hope that helps! – Shawn Taylor Nov 25 '17 at 22:03
  • 2
    `col-xs-*` have been dropped in Bootstrap 4 in favor of `col-*` – Zohab Ali Aug 16 '18 at 12:54
  • In my tests, it doesn't seem that `col-sm-*` actually does anything. When I make the page thinner it jumps from being affected by `col-md-*` to `col-xs-*`. – Aaron Franke Aug 18 '19 at 04:14
  • @AaronFranke can you share an example? – Shawn Taylor Aug 19 '19 at 05:49
  • Try "col-xs-6 col-sm-4 col-md-3", it goes straight from four "3"-width items per row to two "6"-width items, and seems to skip having three "4"-width items. – Aaron Franke Aug 19 '19 at 05:59
  • @AaronFranke these comments are almost a year old so you've probably figured this out by now bus... col-md-* is a pretty narrow stage between md and xs, but it's there. – Shawn Taylor Apr 07 '20 at 22:06
  • whatever is causing you to miss that is also what's causing that apparent jump from xs to md – Shawn Taylor Apr 07 '20 at 22:10
  • but what is the difference in col-6 and col-md-6? Either both are the same or is there any difference. – Muhammad Usama Rabani Aug 06 '20 at 09:40
  • @MuhammadUsamaRabani col-6 doesn't do anything in Bootstrap 3... I would guess you're looking at bootstrap 4 or 5 - this answer only refers to Bootstrap 3. – Shawn Taylor Feb 14 '22 at 21:23
62

The Bootstrap grid system has four classes:
xs (for phones)
sm (for tablets)
md (for desktops)
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:

Bootstrap grid system, col-*-6

Alireza
  • 100,211
  • 27
  • 269
  • 172
14

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.

Alex Weitz
  • 3,199
  • 4
  • 34
  • 57
Tone Škoda
  • 1,463
  • 16
  • 20
13

From Twitter Bootstrap documentation:

  • small grid (≥ 768px) = .col-sm-*,
  • medium grid (≥ 992px) = .col-md-*,
  • large grid (≥ 1200px) = .col-lg-*.

to Read More...

TylerH
  • 20,799
  • 66
  • 75
  • 101
Aditya P Bhatt
  • 21,431
  • 18
  • 85
  • 104
7

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 :

screen size definitions

Dhananjay
  • 3,673
  • 2
  • 22
  • 20
2

Simplest step-by-step explanation I can give.

col-md-6 means that:

  • 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.
    </div>
</div>

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:

carloswm85
  • 1,396
  • 13
  • 23