Bootstrap Grid
The Bootstrap Grid is a twelve-column, flexbox-based layout system recreated with Tailwind utilities. It provides a familiar row and column structure for building responsive designs.
Basic example
The Bootstrap Grid uses containers, rows, and columns to create responsive layouts. It is built with flexbox and adapts to different screen sizes.
HTML
<div class='container text-center'>
<div class='row'>
<div class='col'>Column</div>
<div class='col'>Column</div>
<div class='col'>Column</div>
</div>
</div>Auto-layout columns
Use breakpoint-specific column classes for easy sizing of columns without adding explicit numbered classes like .col-sm-6.
Equal-width
Use the .col class to create equal-width columns for every screen size.
HTML
<div class="container text-center">
<div class="row">
<div class="col">1 of 2</div>
<div class="col">2 of 2</div>
</div>
<div class="row">
<div class="col">1 of 3</div>
<div class="col">2 of 3</div>
<div class="col">3 of 3</div>
</div>
</div>Setting one column width
Set the width of one column and let the other(s) automatically resize around it.
HTML
<div class='container text-center'>
<div class='row'>
<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>Variable width content
Use the .col-auto class to size columns based on the natural width of their content.
HTML
<div class='container text-center'>
<div class='row md:justify-center mb-3'>
<div class='col lg:col-2'>1 of 3</div>
<div class='md:col-auto'>Variable width content</div>
<div class='col lg:col-2'>3 of 3</div>
</div>
<div class='row'>
<div class='col'>1 of 3</div>
<div class='md:col-auto'>Variable width content</div>
<div class='col lg:col-2'>3 of 3</div>
</div>
</div>Responsive classes
Use responsive column classes to specify different column sizes for different screen sizes. Breakpoints are based on minimum widths, meaning they apply to that one and all larger screens. For example, .md:col-4 applies to medium devices (tablets) and above.
All breakpoints
For grids that are the same across all breakpoints, use the .col and .col-{size} classes.
HTML
<div class="container text-center">
<div class="row">
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
</div>
<div class="row">
<div class="col-8">col-8</div>
<div class="col-4">col-4</div>
</div>
</div>Stacked to horizontal
Use breakpoint-specific column classes to create a stacked-to-horizontal layout, such as .sm:col-6 to create two columns starting at the small breakpoint.
HTML
<div class="container text-center">
<div class="row">
<div class="sm:col-8">sm:col-8</div>
<div class="sm:col-4">sm:col-4</div>
</div>
<div class="row">
<div class="sm:col">sm:col</div>
<div class="sm:col">sm:col</div>
<div class="sm:col">sm:col</div>
</div>
</div>Mix and match
Mix and match different breakpoint-specific column classes for different screen sizes.
HTML
<div class="container text-center">
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
<div class="md:col-8">.md:col-8</div>
<div class="col-6 md:col-4">.col-6 .md:col-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 md:col-4">.col-6 .md:col-4</div>
<div class="col-6 md:col-4">.col-6 .md:col-4</div>
<div class="col-6 md:col-4">.col-6 .md:col-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>Row columns
Instead of specifying the number of columns per row, use the .row-cols-{number} classes to specify the number of columns per row. The grid will automatically layout the columns evenly. .row-cols-auto can be used to set the number of columns based on the content.
HTML
<div class="container text-center">
<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>HTML
<div class="container text-center">
<div class="row row-cols-3">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>HTML
<div class="container text-center">
<div class="row row-cols-auto">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>HTML
<div class="container text-center">
<div class="row row-cols-4">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>HTML
<div class="container text-center">
<div class="row row-cols-4">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col-6">Column</div>
<div class="col">Column</div>
</div>
</div>HTML
<div class="container text-center">
<div class="row row-cols-1 sm:row-cols-2 md:row-cols-4">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>Nesting
Nesting is easy with the Bootstrap Grid. Just add a new .row and set of .col within an existing .col. This gives more control over the layout of the content.
HTML
<div class="container text-center">
<div class="row">
<div class="sm:col-3">Level 1: .sm:col-3</div>
<div class="sm:col-9">
<div class="row">
<div class="col-8 sm:col-6">Level 2: .col-8 .sm:col-6</div>
<div class="col-4 sm:col-6">Level 2: .col-4 .sm:col-6</div>
</div>
</div>
</div>
</div>CSS variables
The Bootstrap Grid uses CSS variables for easy customization. Override these variables in your own CSS to change the grid’s behavior.
--grid-gutter-x: 1.5rem;
--grid-gutter-y: 0px;
--grid-columns: 12;
--grid-row-columns: 6;