What is the difference among col-lg-* , col-md-* and col-sm-* in Twitter Bootstrap?
Updated 2020...
Bootstrap 5
In Bootstrap 5 (alpha) there is a new -xxl- size:
col-* - 0 (xs)
col-sm-* - 576px
col-md-* - 768px
col-lg-* - 992px
col-xl-* - 1200px
col-xxl-* - 1400px
Bootstrap 5 Grid Demo
Bootstrap 4
In Bootstrap 4 there is a new -xl- size, see this demo. Also the -xs- infix has been removed, so smallest columns are simply col-1, col-2.. col-12, etc..
col-* - 0 (xs)
col-sm-* - 576px
col-md-* - 768px
col-lg-* - 992px
col-xl-* - 1200px
Bootstrap 4 Grid Demo
Additionally, Bootstrap 4 includes new auto-layout columns. These also have responsive breakpoints (col, col-sm, col-md, etc..), but don't have defined % widths. Therefore, the auto-layout columns fill equal width across the row.
Bootstrap 3
The Bootstrap 3 grid comes in 4 tiers (or "breakpoints")...
Extra small (for smartphones .col-xs-*)
Small (for tablets .col-sm-*)
Medium (for laptops .col-md-*)
Large (for laptops/desktops .col-lg-*).
These grid sizes enable you to control grid behavior on different widths. The different tiers are controlled by CSS media queries.
So in Bootstrap's 12-column grid...
col-sm-3 is 3 of 12 columns wide (25%) on a typical small device width (> 768 pixels)
col-md-3 is 3 of 12 columns wide (25%) on a typical medium device width (> 992 pixels)
The smaller tier (xs, sm or md) also defines the size for larger screen widths. So, for the same size column on all tiers, just set the width for the smallest viewport...
<div class="col-lg-3 col-md-3 col-sm-3">..</div> is the same as,
<div class="col-sm-3">..</div>
Larger tiers are implied. Because col-sm-3 means 3 units on sm-and-up, unless specifically overridden by a larger tier that uses a different size.
xs(default) > overridden by sm > overridden by md > overridden by lg
Combine the classes to use change column widths on different grid sizes. This creates a responsive layout.
<div class="col-md-3 col-sm-6">..</div>
The sm, md and lg grids will all "stack" vertically on screens/viewports less than 768 pixels. This is where the xs grid fits in. Columns that use the col-xs-* classes will not stack vertically, and continue to scale down on the smallest screens.
Resize your browser using this demo and you'll see the grid scaling effects.
This article explains more about how the Bootstrap grid
The bootstrap docs do explain it, but it still took me a while to get it. It makes more sense when I explain it to myself in one of two ways:
If you think of the columns starting out horizontally, then you can choose when you want them to stack.
For example, if you start with columns:
A B C
You decide when should they stack to be like this:
A
B
C
If you choose col-lg, then the columns will stack when the width is < 1200px.
If you choose col-md, then the columns will stack when the width is < 992px.
If you choose col-sm, then the columns will stack when the width is < 768px.
If you choose col-xs, then the columns will never stack.
On the other hand, if you think of the columns starting out stacked, then you can choose at what point they become horizontal:
If you choose col-sm, then the columns will become horizontal when the width is >= 768px.
If you choose col-md, then the columns will become horizontal when the width is >= 992px.
If you choose col-lg, then the columns will become horizontal when the width is >= 1200px.
From Twitter Bootstrap documentation:
small grid (≥ 768px) = .col-sm-*,
medium grid (≥ 992px) = .col-md-*,
large grid (≥ 1200px) = .col-lg-*.
Let's un-complicate Bootstrap!
Notice how the col-sm occupies the 100% width (in other terms breaks into new line) below 576px but col doesn't. You can notice the current width at the top center in gif.
Here comes the code:
<div class="container">
<div class="row">
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
</div>
<div class="row">
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
</div>
</div>
Bootstrap by default aligns all the columns(col) in a single row with equal width. In this case three col will occupy 100%/3 width each, whatever the screen size. You can notice that in gif.
Now what if we want to render only one column per line i.e give 100% width to each column but for smaller screens only? Now comes the col-xx classes!
I used col-sm because I wanted to break the columns into separate lines below 576px. These 4 col-xx classes are provided by Bootstrap for different display devices like mobiles, tablets, laptops, large monitors etc.
So,col-sm would break below 576px, col-md would break below 768px, col-lg would break below 992px and col-xl would break below 1200px
Note that there's no col-xs class in bootstrap 4.
This pretty much sums-up. You can go back to work.
But there's bit more to it. Now comes the col-* and col-xx-* for customizing width.
Remember in the above example I mentioned that col or col-xx takes the equal width in a row. So if we want to give more width to a specific col we can do this.
Bootstrap row is divided into 12 parts, so in above example there were 3 col so each one takes 12/3 = 4 part. You can consider these parts as a way to measure width.
We could also write that in format col-* i.e. col-4 like this :
<div class="row">
<div class="col-4">col</div>
<div class="col-4">col</div>
<div class="col-4">col</div>
</div>
And it would've made no difference because by default bootstrap gives equal width to col (4 + 4 + 4 = 12).
But, what if we want to give 7 parts to 1st col, 3 parts to 2nd col and rest 2 parts (12-7-3 = 2) to 3rd col (7+3+2 so total is 12), we can simply do this:
<div class="row">
<div class="col-7">col-7</div>
<div class="col-3">col-3</div>
<div class="col-2">col-2</div>
</div>
and you can customize the width of col-xx-* classes also.
<div class="row">
<div class="col-sm-7">col-sm-7</div>
<div class="col-sm-3">col-sm-3</div>
<div class="col-sm-2">col-sm-2</div>
</div>
How does it look in the action?
What if sum of col is more than 12? Then the col will shift/adjust to below line. Yes, there can be any number of columns for a row!
<div class="row">
<div class="col-12">col-12</div>
<div class="col-9">col-9</div>
<div class="col-6">col-6</div>
<div class="col-6">col-6</div>
</div>
What if we want 3 columns in a row for large screens but split these columns into 2 rows for small screens?
<div class="row">
<div class="col-12 col-sm">col-12 col-sm TOP</div>
<div class="col col-sm">col col-sm</div>
<div class="col col-sm">col col-sm</div>
</div>
You can play around here: https://jsfiddle.net/JerryGoyal/6vqno0Lm/
I think the confusing aspect of this is the fact that BootStrap 3 is a mobile first responsive system and fails to explain how this affects the col-xx-n hierarchy in that part of the Bootstrap documentation.
This makes you wonder what happens on smaller devices if you choose a value for larger devices and makes you wonder if there is a need to specify multiple values. (You don't)
I would attempt to clarify this by stating that...
Lower grain types (xs, sm) attempt retain layout appearance on smaller screens and larger types (md,lg) will display correctly only on larger screens but will wrap columns on smaller devices.
The values quoted in previous examples refer to the threshold as which bootstrap degrades the appearance to fit the available screen estate.
What this means in practice is that if you make the columns col-xs-n then they will retain correct appearance even on very small screens, until the window drops to a size that is so restrictive that the page cannot be displayed correctly.
This should mean that devices that have a width of 768px or less should show your table as you designed it rather than in degraded (single or wrapped column form).
Obviously this still depends on the content of the columns and that's the whole point. If the page attempts to display multiple columns of large data, side by side on a small screen then the columns will naturally wrap in a horrible way if you did not account for it. Therefore, depending on the data within the columns you can decide the point at which the layout is sacificed to display the content adequately.
e.g. If your page contains three col-sm-n columns bootstrap would wrap the columns into rows when the page width drops below 992px.
This means that the data is still visible but will require vertical scrolling to view it. If you do not want your layout to degrade, choose xs (as long as your data can be adequately displayed on a lower resolution device in three columns)
If the horizontal position of the data is important then you should try to choose lower granularity values to retain the visual nature. If the position is less important but the page must be visible on all devices then a higher value should be used.
If you choose col-lg-n then the columns will display correctly until the screen width drops below the xs threshold of 1200px.
TL;DR
.col-X-Y means on screen size X and up, stretch this element to fill Y columns.
Bootstrap provides a grid of 12 columns per .row, so Y=3 means width=25%.
xs, sm, md, lg are the sizes for smartphone, tablet, laptop, desktop respectively.
The point of specifying different widths on different screen sizes is to let you make things larger on smaller screens.
Example
<div class="col-lg-6 col-xs-12">
Meaning: 50% width on Desktops, 100% width on Mobile, Tablet, and Laptop.
Device Sizes and class prefix:
Extra small devices Phones (<768px) - .col-xs-
Small devices Tablets (≥768px) - .col-sm-
Medium devices Desktops (≥992px) - .col-md-
Large devices Desktops (≥1200px) - .col-lg-
Grid options:
Reference: Grid System
.col-xs-$ Extra Small Phones Less than 768px
.col-sm-$ Small Devices Tablets 768px and Up
.col-md-$ Medium Devices Desktops 992px and Up
.col-lg-$ Large Devices Large Desktops 1200px and Up
One particular case : Before learning bootstrap grid system, make sure browser zoom is set to 100% (a hundred percent). For example : If screen resolution is (1600px x 900px) and browser zoom is 175%, then "bootstrap-ped" elements will be stacked.
HTML
<div class="container-fluid">
<div class="row">
<div class="col-lg-4">class="col-lg-4"</div>
<div class="col-lg-4">class="col-lg-4"</div>
</div>
</div>
Chrome zoom 100%
Browser 100 percent - elements placed horizontally
Chrome zoom 175%
Browser 175 percent - stacked elements
well it's used to tell bootstrap how many columns are to be placed in a row depending on the screen size-
col-xs-2
would show only 2 columns in a row in extra small(xs) screen, in the same way as sm defines a small screen, md(medium sized), lg(large sized),
but according to bootstrap smaller first rule, if you mention
xs-col-2 md-col-4
then 2 columns would be shown in every row for screen sizes from xs upto sm(included) and changes when it gets next size i.e. for md up to lg(included)
for a better understanding of screen sizes try running them in various screen modes in chrome's developer mode(ctr+shift+i) and try various pixels or devices
I have two fields in one row and another fields that is conditional. However, I want them to fit in one row.
For example:
and
So how do I make the fields fit in one row, regardless whether it has two or three fields?
1)<div class="row">
<div class="col-md-*"></div>
<div class="col-md-*"></div>
<div class="col-md-*"></div>
</div>
2)<div class="row">
<div class="col-md-*"></div>
<div class="col-md-*"></div>
</div>
Is there a way that both of those will fit in one row equally so that in the first case, the asterisk will be equal to 4 and the second case, it will be 6?
Im making responsive table and I want it be fully accessible for every people. But in this case i'm not sure where i should use rowheader and where to use columheader.
Here is my code (ofcourse it is just example, there is not actual data):
<div role="grid">
<div class="row" role="row">
<div class="hidden-xs col-sm-offset-4 col-sm-3 " role="columnheader">
<img class="img-responsive" style="width:200px;" src="http://blogmedia.whoishostingthis.com/wp-content/uploads/2013/04/free-hosting.jpg" alt="Vendor 1">
</div>
<div class="hidden-xs col-sm-offset-1 col-sm-3 " role="columnheader">
<img class="img-responsive" style="width:200px;" src="http://jennmoney.biz/assets/free.gif" alt="Vendor 2">
</div>
</div>
<hr class="line">
<div class="raty-table" role="row">
<span class="col-xs-12 col-sm-4" role="rowheader">
Title 1
</span>
<span class="visible-xs-block col-xs-4" role="rowheader">
Vendor 1
</span>
<span class="col-xs-8 col-sm-4" role="gridcell">
Content
</span>
<span class="visible-xs-block col-xs-4" role="rowheader">
Vendor 2
</span>
<span class="col-xs-8 col-sm-4" role="gridcell">
Content
</span>
</div>
</div>
Here is a fiddle:
For vendors should I use rowheader or columnheader? And how I should tag "How long can I sing?" Once it is rowheader and on different screen size it can be columnheader.
I see, it is hard to undestand what I mean, so I made two mocks, but thanks to StackOverflow I can't post it, becouse I have to low reputation...
I must post it as a link: http://postimg.org/gallery/j2elhzmc/ - first picture shows how it looks on desktop, second how it looks at smartphone (if you have the same order as me).
Your grid must be defined as non editable
A grid is considered editable unless otherwise specified. To make a grid read-only, set the aria-readonly attribute of the grid to true.
You should explicitly indicate relationships
If relevant headers cannot be determined from the DOM structure, authors SHOULD explicitly indicate which header cells are relevant to the cell by referencing elements with role rowheader or columnheader using the aria-describedby attribute.
Note that you might reference a "display:none" element in the aria-describedby attribute. I will say that the more semantic choice will then be to set aria-hidden attribute on your rowheader elements.
TL;DR:
Set aria-readonly=true on the grid
Set aria-describedby attribute on your "gridcell" cells referencing each one of your "not always visible" columnheader
Remove role="rowheader" and set aria-hidden="true"
Sorry if I'm missing something obvious but columnheader should be used at the top of each column. (You could have a columnheader in the middle of the table, but that's not typical, although I could see it used as a repeating header if it split across pages.)
A rowheader is usually the first cell in the table for that row. You can have multiple rowheaders but it's not common unless you're showing a multi-dimensional table (eg, a sales report that has a year header for all rows, then quarter headers for every three months, then month headers).
You start getting unreliable results (from screen readers) if you have row headers spread across several non-contiguous cells.
I'm assuming you don't want to use <table> and <th scope='row|col'>
I am relatively new to programming and am making a website using bootstrap 3.0.
I want to make two rows that center in the middle of the page. For the first row I used div class="col-md-4 col-md-offset-2" and for the second row div class="col-md-4".
My first question is if it is ok that this adds up to 10 rows instead of 12 or if I need to specify the 2 rows on the right also? If so, how can this be done?
Also I would like to increase the horizontal spacing between the columns. I did a bit of research on that and came across mixins but its quit hard for me to grasp. If anybody here can provide me with a simple way to increase the horizontal spacing between two columns that would be great.
Thanks in advance.
looks like this is what you want
<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-2">col-md-4-offset</div>
<div class="col-md-4">col-md-4</div>
</div>
</div>
its perfectly fine to have column not add up to 12
here is a bootply
and if you want to pad your rows just add padding to .row class, by default there is no padding or margins between rows
Question 1: Yes, it's fine to leave dangling space after your columns, but good practice to tie it off by closing the .row after it.
Question 2: You can add margin to left and right of the column. But that throws off the offset column, so get around that by putting an empty .col-md-2 before them.
<div class="container">
<div class="row">
<div class="col-md-2"></div><!-- empty -->
<div class="col-md-4 margin">col-md-4</div>
<div class="col-md-4 margin">col-md-4</div>
</div>
</div>
CSS:
.margin {
margin-left:10px;
margin-right:10px;
}
Demo: http://www.bootply.com/OS6FX9sie8#
Also, you'll notice in my demo I put the custom class in a media-query. Do that if you want that margin adjustment to only apply on large screen devices, so the columns reach the screen edge on phones.
I have a Bootstrap 3 layout like this
<div class="row">
<div class="col-md-8"></div>
<div class="col-md-4"></div>
</div>
Normally this displays the first column as 66% and the second column as 33%
When I have no content for the second column, I want to be able to hide it and make the first column take up 100% width. I think it can be done with a mixins but while I'm trying to get that working, is there a better way?
If it's empty you can add the class .col-md-12 after col-md-8 and add class .hide to the col-md-4. I don't know how you're implementing your site. If it's a CMS, you can have a little checkbox to add these classes if col-md-4 == empty.
If you're hiding at different breakpoints, look at the responsive utilities section of the TWB docs.