Grid Demo

Grids are exceptionally documented. Encourage reading the grid docs on Bootstrap. Basics: Wrap content in a container. See Layout Demo for info on containers. Rows are wrappers for columns via the .row class. Use col- classes to size your columns between 1 - 12, ex.

One column

Two columns

Three columns

Four columns

Layout Demo

Containers

Containers are the most basic layout element in Bootstrap and are required when using our default grid system. Choose from a responsive, fixed-width container (meaning its max-width changes at each breakpoint) or fluid-width (meaning it’s 100% wide all the time). While containers can be nested, most layouts do not require a nested container.

While nesting containers is possible, it's not recommended. See Bootstrap for usage details.

Container Standard

Use .container for the standard version. Padding is set as an expression of $grid-gutter-width / 2.


Container Fluid

Use .container-fluid for a full width container, spanning the entire width of the viewport.


Container in Container Fluid