Grid

A Bootstrap grid is a layout system that creates responsive and flexible designs. It builds on a 12-column grid that allows organizing and aligning content consistently across screen sizes. Editors can easily specify how content should be positioned and resized within the grid using predefined classes.

Grids are built using divs with the row CSS class, subdivided into columns. On a wiki page, they need no div with the container CSS class around them. Check the example pages below for different grid layouts.

Columns in fixed ratios

• Grid - two columns - 1 to 1 ratio
• Grid - two columns - 1 to 2 ratio
• Grid - two columns - 2 to 1 ratio
• Grid - two columns - 1 to 3 ratio
• Grid - two columns - 3 to 1 ratio
• Grid - two columns - two rows - varying ratios
• Grid - two columns - three rows - varying ratios
• Grid - multiple rows - varying ratios

More grid features

• Grid - breakpoints
• Grid - equal and automatic widths
• Grid - gutters
• Grid - row columns
• Grid - alignment
• Grid - offsets
• Grid - order
• Grid - nesting

See also

On this wiki

• Image grid

External website

• Bootstrap Grid Documentation

This wiki contains content from the Bootstrap homepage, licensed Commons Attribution 3.0 Unported (CC BY 3.0). Thank you to everyone for creating outstanding content!