Bootstrap's grid system is built with flexbox and allows up to 12 columns across the page. It's responsive and adapts to different screen sizes.
Bootstrap's grid system uses a series of containers, rows, and columns to layout and align content. It's built with flexbox and is fully responsive.
<div class="row">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
The grid system is based on 12 columns. You can specify how many columns each element should span.
<div class="row">
<div class="col-6">col-6 (50%)</div>
<div class="col-6">col-6 (50%)</div>
</div>
<div class="row">
<div class="col-4">col-4 (33.33%)</div>
<div class="col-4">col-4 (33.33%)</div>
<div class="col-4">col-4 (33.33%)</div>
</div>
Bootstrap's grid includes five tiers of predefined classes for building complex responsive layouts. Customize the size of your columns on extra small, small, medium, large, or extra large devices.
Columns can have different widths on different screen sizes.
<div class="row">
<div class="col-12 col-md-8">col-12 col-md-8</div>
<div class="col-6 col-md-4">col-6 col-md-4</div>
</div>
<div class="row">
<div class="col-12 col-sm-6 col-lg-3">col-12 col-sm-6 col-lg-3</div>
<!-- More columns... -->
</div>
Utilize breakpoint-specific column classes for equal-width columns.
<div class="row">
<div class="col-sm">One of three columns</div>
<div class="col-sm">One of three columns</div>
<div class="col-sm">One of three columns</div>
</div>
Use flexbox alignment utilities to vertically and horizontally align columns.
<div class="row align-items-start">
<div class="col">align-items-start</div>
<div class="col">align-items-start</div>
<div class="col">align-items-start</div>
</div>
<div class="row align-items-center">
<!-- Columns... -->
</div>
<div class="row align-items-end">
<!-- Columns... -->
</div>
<div class="row justify-content-start">
<div class="col-4">justify-content-start</div>
<div class="col-4">justify-content-start</div>
</div>
<div class="row justify-content-center">
<!-- Columns... -->
</div>
<!-- More examples... -->
Change the visual order of your content with order classes.
<div class="row">
<div class="col order-3">First in DOM, ordered 3</div>
<div class="col order-2">Second in DOM, ordered 2</div>
<div class="col order-1">Third in DOM, ordered 1</div>
</div>
<div class="row">
<div class="col-md-4 order-md-2">col-md-4 order-md-2</div>
<div class="col-md-4 order-md-1">col-md-4 order-md-1</div>
<div class="col-md-4 order-md-3">col-md-4 order-md-3</div>
</div>
Containers are the most basic layout element in Bootstrap and are required when using the grid system.
| Container Type | Description | Class |
|---|---|---|
| Default container | Sets a max-width at each responsive breakpoint | .container |
| Fluid container | Width is 100% at all breakpoints | .container-fluid |
| Responsive containers | 100% wide until the specified breakpoint | .container-{breakpoint} |
<div class="container">
<!-- Content here -->
</div>
<div class="container-fluid">
<!-- Content here -->
</div>
<div class="container-sm">
<!-- 100% wide until small breakpoint -->
</div>
Breakpoints are the building blocks of responsive design. Use them to control when your layout can be adapted at a particular viewport or device size.
| Breakpoint | Class infix | Dimensions |
|---|---|---|
| Extra small | None | <576px |
| Small | sm |
≥576px |
| Medium | md |
≥768px |
| Large | lg |
≥992px |
| Extra large | xl |
≥1200px |
| Extra extra large | xxl |
≥1400px |
You can use display utilities to show and hide elements based on the viewport size.
<div class="d-none d-sm-block">Hidden on extra small, visible on small and up</div>
<div class="d-block d-md-none">Visible on extra small and small, hidden on medium and up</div>
<div class="d-none d-lg-block d-xl-none">Only visible on large devices</div>