BOOTSTRAP GRID SYSTEM

BOOTSTRAP GRID SYSTEM

Many web developers have used tables to layout pages. Tables made it easier for the web developer, because the developer didn't have to worry about either the complexities of CSS, or cross-browser issues.

Unfortunately, while tables may have made it easier for the developer, it makes it more of a challenge for both web browsers and accessibility. For traditional browsers, complex table structures can degrade the performance of page layout. For screen readers, tables are read assume tabular data, which may not be how the page is actually layed out and designed to be presented to the user.

With this in mind, it is never a best practice to do page layout using tables. Bootstrap offers a grid system so developers don't feel the urge to layout pages using tables.

The Bootstrap grid behaves like a table. There are rows and columns. However, unlike tables, Bootstrap uses CSS to manage the layout of the pages. In addition, Bootstrap offers support for mobile browsers and different sized screens by providing different grids for different screen sizes. There are four screensizes provided by Bootstrap grids. This allows developers to size content appropriately for various devices.

GRID NOTES

• Always 12 columns
• Smaller sizes set the default for larger sizes
• col-sm- would set the size for small, medium and large screens unless overridden by a setting specific to one of the larger sizes
• There is a 30px "gutter", or empty space, between each column (15px on each side of the column)
• The gutter on the outside of the container varies based on the current screen size
• Extra small devices always use the entire width of the screen

	Extra small devices e.g. phones (< 768 px)	Small devices e.g. tablets (≥ 768 px)	Medium devices e.g. laptops (≥ 992 px)	Large devices e.g. desktops (≥ 1200 px)
Container width	None (auto)	750px	970px	1170px
Column class prefix	col-xs-	col-sm-	col-md-	col-lg-
Column width	Auto	60px	75px	95px

The screens sizes that Bootstrap uses are not random, but rather based on research on common device sizes. While you can change the screen sizes, because Bootstrap does use CSS, you want to use the defaults provided.

GRID SIZE CLASSES

Structure of Bootstrap classes for sizing grid content

• col
• Short for column
• Required prefix
• size abbreviation
• xs for Extra small
• sm for Small
• md for Medium
• lg for Large
• Number of columns
• Integer to represent the number of columns

EXAMPLES

Let's take a look at a couple of sample Bootstrap content sizing classes:

• col-md-4 would indicate 4 columns for medium and large screens
• col-sm-6 would indicate 6 columns for small, medium and large screens
• col-xs-2 would indicate 2 columns for extra small, medium and large screens

Remember that screen size rules apply for the specified screen size as well as those larger than that size, unless overriden. So the following combination would indicate 2 columns for extra small screens, 6 columns for small screens, and 4 for medium and large screens.

<div class='col-xs-2 col-sm-6 col-md-4'>Content</div>