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