"> Bootstrap v5

Grids

XS

Portrait Phones
<576px

SM

Landscape Phones
≥576px to <768px

MD

Tablets
≥768px to <992px

LG

Laptops
≥992px to <1200px

XL

Desktops
≥1200px

Grid system and Equal-width

.container
Column
Column
Column

Setting one column width

.container & .row & .col
1 of 3
2 of 3 (wider)
3 of 3

Variable width Content [Justify content center]

.container & .justify-content-md-center & .col-lg-8
.md-auto
justify content center
col-lg-4
md-auto

Responsive classes

.container & .row & .col
col
col
col
col

Row columns

.container & .row row-cols-2 & .col
column
column
column
column
Column
Column
Column
Column
Column
Column
Column
Column
Column
Column
Column
Column
Column
Column
Column
Column
Column
Column
Column
Column
Column
Column
Column
Column
Column
Column
Column
Column
Column
Column
Column
Column

Nesting

.container & .row & .col
Column
Column
Column

Mix and Match

.container & .row & .col
.col-md-8
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6
.col-6
Grid
<div class="container">
<div class="row aw-grid">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
Grid system and Equal-width

Use our powerful mobile-first flexbox grid to build layouts of all shapes and sizes

Setting One Column Width
<div class="container">
<div class="row aw-grid">
<div class="col">
1 of 3
</div>
<div class="col-6">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
</div>
Setting one column width

Auto-layout for flexbox grid columns also means you can set the width of one column and have the sibling columns automatically resize around it.

Responsive classes
<div class="container">
<div class="row aw-grid">
<div class="col">
col
</div>
<div class="col">
col
</div>
<div class="col">
col
</div>
<div class="col">
col
</div>
</div>
</div>
Responsive classes

Customize the size of your columns on extra small, small, medium, large, or extra large devices however you see fit.

Variable width Content
<div class="container">
<div class="row justify-content-md-center aw-grid">
<div class="col-lg-8">
justify content center
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-4">
col-lg-4
</div>
<div class="col-md-auto">
md-auto
</div>
</div>
</div>
Row Columns
<div class="container">
<div class="row row-cols-2">
<div class="col">
column
</div>
<div class="col">
column
</div>
<div class="col">
column
</div>
<div class="col">
column
</div>
</div>
</div>
<div class="container mt-4">
<div class="row row-cols-3 aw-grid">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
<div class="container mt-4">
<div class="row row-cols-auto aw-grid">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
<div class="container mt-4">
<div class="row row-cols-4 aw-grid">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
<div class="container mt-4">
<div class="row row-cols-4 aw-grid">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col-6">Column</div>
<div class="col">Column</div>
</div>
</div>
<div class="container mt-4">
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-4 aw-grid">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
<div class="container mt-4">
<div class="row row-cols-2 row-cols-lg-3 aw-grid">
<div class="col">
Column
</div>
<div class="col">
Column
</div>
<div class="col">
Column
</div>
<div class="col">
Column
</div>
<div class="col">
Column
</div>
<div class="col">
Column
</div>
<div class="col-4 col-lg-2">
Column
</div>
<div class="col-4 col-lg-2">
Column
</div>
<div class="col-4 col-lg-2">
Column
</div>
<div class="col-4 col-lg-2">
Column
</div>
<div class="col-4 col-lg-2">
Column
</div>
<div class="col-4 col-lg-2">
Column
</div>
</div>
</div>
Row Columns

Use the responsive .row-cols-* classes to quickly set the number of columns that best render your content and layout.
Whereas normal .col-* classes apply to the individual columns (e.g., .col-md-4), the row columns classes are set on the parent .row as a default for contained columns. With .row-cols-auto you can give the columns their natural width.

Nesting
<div class="container">
<div class="row aw-grid">
<div class="col-sm-3">
Column
</div>
<div class="col-sm-9">
<div class="row">
<div class="col-8 col-sm-6">
Column
</div>
<div class="col-4 col-sm-4">
Column
</div>
</div>
</div>
</div>
</div>
</div>
Nesting

The default grid, add a new .row and set of .col-sm-* columns within and existing .col-sm-* column. Nested rows should include set of columns that add up to 12 or fewer (it is not required that you use all 12 available columns).

Mix and Match
<div class="container">
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
<div class="col-md-8">
.col-md-8
</div>
<div class="col-6 col-md-4">
.col-6 .col-md-4
</div>
</div>
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
<div class="col-6 col-md-4">
.col-6 .col-md-4
</div>
<div class="col-6 col-md-4">
.col-6 .col-md-4
</div>
<div class="col-6 col-md-4">
.col-6 .col-md-4
</div>
</div>
<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
<div class="col-6">
.col-6
</div>
<div class="col-6">
.col-6
</div>
</div>
</div>
Mix and Match

Don’t want your columns to simply stack in some grid tiers
Use a combination of different classes for each tier as needed. See the example below for a better idea of how it all works.