tailwind-bootstrap-grid

Bootstrap v5 flexbox grid system as a Tailwind CSS plugin.

Installation

npm i -D tailwind-bootstrap-grid

In tailwind.js file:

module.exports = {
  plugins: [require('tailwind-bootstrap-grid')()],
};

And don't forget to include components and utilities in your tailwind base css file:

@tailwind preflight;
@tailwind components;
@tailwind utilities;

Check the repository for details.

Demo

Based on Bootstrap docs + live code edit.

Auto-layout columns

Equal-width

docs

1 of 2
2 of 2
1 of 3
2 of 3
3 of 3
<div class="container">
  <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

docs

1 of 3
2 of 3 (wider)
3 of 3
1 of 3
2 of 3 (wider)
3 of 3
<div class="container">
  <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 class="row">
    <div class="col">1 of 3</div>
    <div class="col-5">2 of 3 (wider)</div>
    <div class="col">3 of 3</div>
  </div>
</div>

Variable width content

docs

1 of 3
Variable width content
3 of 3
1 of 3
Variable width content
3 of 3
<div class="container">
  <div class="row" style={{ justifyContent: 'center' }}>
    <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

All breakpoints

docs

col
col
col
col
col-8
col-4
<div class="container">
  <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

docs

sm:col-8
sm:col-4
sm:col
sm:col
sm:col
<div class="container">
  <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

docs

col-12 md:col-8
col-6 md:col-4
col-6 md:col-4
col-6 md:col-4
col-6 md:col-4
col-6
col-6
<div class="container">
  {/* Stack the columns on mobile by making one full-width and the other half-width */}
  <div class="row">
    <div class="col-12 md:col-8">col-12 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

docs

Column
Column
Column
Column
<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>

Column
Column
Column
Column
<div class="container">
  <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>

Column
Column
Column
Column
<div class="container">
  <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>

Column
Column
Column
Column
<div class="container">
  <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>

Column
Column
Column
Column
<div class="container">
  <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>

Column
Column
Column
Column
<div class="container">
  <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

docs

Level 1: sm:col-3
Level 2: col-8 sm:col-6
Level 2: col-4 sm:col-6
<div class="container">
  <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>

---

Reordering

Order classes

docs

First in DOM, no order applied
Second in DOM, with a larger order
Third in DOM, with an order of 1
<div class="container">
  <div class="row">
    <div class="col">First in DOM, no order applied</div>
    <div class="col order-5">Second in DOM, with a larger order</div>
    <div class="col order-1">Third in DOM, with an order of 1</div>
  </div>
</div>

First in DOM, ordered last
Second in DOM, unordered
Third in DOM, ordered first
<div class="container">
  <div class="row">
    <div class="col order-last">First in DOM, ordered last</div>
    <div class="col">Second in DOM, unordered</div>
    <div class="col order-first">Third in DOM, ordered first</div>
  </div>
</div>

Offsetting columns

Offset classes

docs

md:col-4
md:col-4 md:offset-4
md:col-3 md:offset-3
md:col-3 md:offset-3
md:col-6 md:offset-3
<div class="container">
  <div class="row">
    <div class="md:col-4">md:col-4</div>
    <div class="md:col-4 md:offset-4">md:col-4 md:offset-4</div>
  </div>
  <div class="row">
    <div class="md:col-3 md:offset-3">md:col-3 md:offset-3</div>
    <div class="md:col-3 md:offset-3">md:col-3 md:offset-3</div>
  </div>
  <div class="row">
    <div class="md:col-6 md:offset-3">md:col-6 md:offset-3</div>
  </div>
</div>

sm:col-5 md:col-6
sm:col-5 sm:offset-2 md:col-6 md:offset-0
sm:col-6 md:col-5 lg:col-6
sm:col-6 md:col-5 md:offset-2 lg:col-6 lg:offset-0
<div class="container">
  <div class="row">
    <div class="sm:col-5 md:col-6">sm:col-5 md:col-6</div>
    <div class="sm:col-5 sm:offset-2 md:col-6 md:offset-0">
      sm:col-5 sm:offset-2 md:col-6 md:offset-0
    </div>
  </div>
  <div class="row">
    <div class="sm:col-6 md:col-5 lg:col-6">sm:col-6 md:col-5 lg:col-6</div>
    <div class="sm:col-6 md:col-5 md:offset-2 lg:col-6 lg:offset-0">
      sm:col-6 md:col-5 md:offset-2 lg:col-6 lg:offset-0
    </div>
  </div>
</div>

---

Gutters

Horizontal gutters

docs

Custom column padding
Custom column padding
<div class="container">
  <div class="row gx-5">
    <div class="col">Custom column padding</div>
    <div class="col">Custom column padding</div>
  </div>
</div>

Vertical gutters

docs

Custom column padding
Custom column padding
Custom column padding
Custom column padding
<div class="container">
  <div class="row gy-5">
    <div class="col-6">Custom column padding</div>
    <div class="col-6">Custom column padding</div>
    <div class="col-6">Custom column padding</div>
    <div class="col-6">Custom column padding</div>
  </div>
</div>

Horizontal & vertical gutters

docs

Custom column padding
Custom column padding
Custom column padding
Custom column padding
<div class="container">
  <div class="row g-2">
    <div class="col-6">Custom column padding</div>
    <div class="col-6">Custom column padding</div>
    <div class="col-6">Custom column padding</div>
    <div class="col-6">Custom column padding</div>
  </div>
</div>

Row columns gutters

docs

Row column
Row column
Row column
Row column
Row column
Row column
Row column
Row column
Row column
Row column
<div class="container">
  <div class="row row-cols-2 lg:row-cols-5 g-2 lg:g-3">
    <div class="col">Row column</div>
    <div class="col">Row column</div>
    <div class="col">Row column</div>
    <div class="col">Row column</div>
    <div class="col">Row column</div>
    <div class="col">Row column</div>
    <div class="col">Row column</div>
    <div class="col">Row column</div>
    <div class="col">Row column</div>
    <div class="col">Row column</div>
  </div>
</div>

No gutters

docs

sm:col-6 md:col-8
col-6 md:col-4
<div class="container">
  <div class="row g-0">
    <div class="sm:col-6 md:col-8">sm:col-6 md:col-8</div>
    <div class="col-6 md:col-4">col-6 md:col-4</div>
  </div>
</div>