Purpose: Define the Bootstrap grid and show how to use it effectively for desktop layout and mobile responsiveness.
Category: Page layout, grid
- UXI JIRA Created (insert link above)
- Component Specification draft complete
UXI code review complete
- Reconcile with UIM and KRAD for differences
- Conduct user testing if needed
- Routed for review with Kuali UX Working Group and UX/KRAD Working Group
- Reviewed with KAI
- Rice JIRA Created (in KULRICE Project)
- KRAD Implementation complete
- Component released (insert rice release version below)
Bootstrap offers a really powerful responsive grid layout based on screen percentages. This component spec will detail how to use it effectively to easily create and maintain layouts. Relying on the Bootstrap grid, and avoiding custom styling will allow your layouts to work as expected in all browsers, and bring in robust responsiveness.
12-columns, automatic responsiveness
Grid systems are used for creating page layouts through a series of rows and columns that house your content. Here's how the Bootstrap grid system works:
- Rows must be placed within a
.container (fixed-width) or
.container-fluid (full-width) for proper alignment and padding.
- Use rows to create horizontal groups of columns.
- Content should be placed within columns, and only columns may be immediate children of rows.
- Predefined grid classes like
.col-xs-4 are available for quickly making grid layouts. Less mixins can also be used for more semantic layouts.
- Columns create gutters (gaps between column content) via
padding. That padding is offset in rows for the first and last column via negative margin on
- The negative margin is why the examples below are outdented. It's so that content within grid columns is lined up with non-grid content.
- Grid columns are created by specifying the number of twelve available columns you wish to span. For example, three equal columns would use three
- If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.
- Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices. Therefore, applying any
.col-md- class to an element will not only affect its styling on medium devices but also on large devices if a
.col-lg- class is not present.
Quick summary of features:
- Simple, clean columnar layout based on percentages of the screen width for consistent, always working layouts.
- Built-in responsiveness that adjusts automatically for different screen sizes and devices.
See how aspects of the Bootstrap grid system work across multiple devices with a handy table.
| ||Extra small devicesPhones (<768px)||Small devices Tablets (≥768px)||Medium devicesDesktops (≥992px)||Large devices Desktops (≥1200px)|
|Grid behavior||Horizontal at all times||Collapsed to start, horizontal above breakpoints|
|Container width||None (auto)||750px||970px||1170px|
|# of columns||12|
|Gutter width||30px (15px on each side of a column)|
The Bootstrap grid is automatically responsive. So long as the grid and its containers are used properly, your layout will become responsive whenever the
.sm, .md, .lg breakpoints are hit.
Upon hitting said breakpoint, the Bootstrap grid columns stack and take the width of the container, which is usually 100%. Form fields and in some cases buttons (if specified) will also
display: block; and span 100% width of the layout.
Please see the JSFiddle in the Demo section for a working example of this.
Bootstrap grid markup is simple. Simple use
.col-[size]-[num-of-cols] to determine size. As noted above,
[size] is either
lg. Here's an example of a basic layout using a left-side navigation that's three columns wide, and a main content area that's 9 columns wide. Columns should always total 12.
Main content area
See this JSFiddle for working examples of the Bootstrap Grid.
There are no special accessibility considerations for CSS layouts, so long as the markup remains semantic and error-free.
Behavior without scripting
W3 HTML Validator
Research and Discussion
There is an ongoing discussion about potentially using another grid, or appending additional code such as Flexbox or Skeleton. Once that discussion is finalized this component spec will be updated.