Add Bootstrap-Style Grids to Tailwind CSS with TW Bootstrap Grid Plugin

tw-bootstrap-grid is a Tailwind CSS plugin that integrates a responsive, Bootstrap-like grid system directly into your Tailwind CSS projects.

It can be useful for developers who are transitioning from Bootstrap to Tailwind CSS or for those who prefer the Bootstrap grid methodology.

Features

How To Use It

1. Install the plugin using NPM or Yarn.

NPM:

npm install tw-bootstrap-grid

Yarn:

yarn add tw-bootstrap-grid

2. Import and add TailwindBootstrapGrid to your Tailwind CSS configuration file.

import TailwindBootstrapGrid from "tw-bootstrap-grid";
export default {
    content: ["./src/**/*.{html,js,ts,jsx,tsx}"],
    theme: {
        extend: {},
    },
    plugins: [TailwindBootstrapGrid],
};

3. For Tailwind v4 projects using CSS with PostCSS or Vite, import the plugin directly in your CSS file.

@import "tailwindcss";
@plugin "tw-bootstrap-grid";

4. You can customize default container breakpoints.

Option 1: Using CSS @theme directive (Tailwind v4 only)

@theme {
    --breakpoint-sm: 40rem; /* 640px */
    --breakpoint-md: 48rem; /* 768px */
    --breakpoint-lg: 64rem; /* 1024px */
    --breakpoint-xl: 80rem; /* 1280px */
    --breakpoint-xxl: 96rem; /* 1536px */
}

This method requires Tailwind CSS v4.

Option 2: Via Tailwind Config (tailwind.config.js / tailwind.config.ts)

import TailwindBootstrapGrid from "tw-bootstrap-grid";
export default {
    content: ["./src/**/*.{html,js,ts,jsx,tsx}"],
    theme: {
        screens: {
            sm: "40rem", // 640px
            md: "48rem", // 768px
            lg: "64rem", // 1024px
            xl: "80rem", // 1280px
            xxl: "96rem", // 1536px
        },
        extend: {},
    },
    plugins: [TailwindBootstrapGrid],
};

This option is compatible with both Tailwind v3 and v4. The plugin uses these values to generate responsive container maximum widths.

5. Configure horizontal (x) and vertical (y) gutters.

Option 1: Via Tailwind Config (tailwind.config.js / tailwind.config.ts)
Set gutter values through plugin options.

import TailwindBootstrapGrid from "tw-bootstrap-grid";
export default {
    content: ["./src/**/*.{html,js,ts,jsx,tsx}"],
    plugins: [
        TailwindBootstrapGrid({
            gutters: {
                x: "1.5rem",
                y: "0",
            },
            containerGutters: {
                x: "1.5rem",
            },
            rowGutters: {
                y: "0",
            },
        }),
    ],
};

containerGutters and rowGutters override gutters. If not provided, gutters are used, then defaults (“1.5rem” for x, “0” for y). This is compatible with Tailwind v3 and v4.

Option 2: Using CSS @theme directive (Tailwind v4 only)
Declare gutter variables in your CSS using Tailwind CSS v4’s @theme directive.

@theme {
    --bs-global-gutter-x: 1.5rem;
    --bs-global-gutter-y: 0;
    --bs-container-gutter-x: var(--bs-global-gutter-x);
    --bs-container-gutter-y: var(--bs-global-gutter-y);
    --bs-row-gutter-x: var(--bs-global-gutter-x);
    --bs-row-gutter-y: var(--bs-global-gutter-y);
}

This method requires Tailwind CSS v4. CSS custom properties follow a similar fallback chain.

Examples

Basic Grid:

<div class="container">
    <div class="row">
        <div class="col-6">Left</div>
        <div class="col-6">Right</div>
    </div>
</div>

RTL Example:

<div class="container" dir="rtl">
    <div class="row">
        <div class="col-4 offset-4">Right-Aligned Box</div>
        <div class="col-4">Left Box</div>
    </div>
</div>

offset-*, .row, and .container classes adapt to dir="rtl" automatically.

Responsive Columns:

<div class="row">
    <div class="col-12 md:col-6">50% on md and above</div>
    <div class="col-12 md:col-6">50% on md and above</div>
</div>

Use Tailwind’s responsive syntax (e.g., md:) for responsive column widths.

Related Resources

• Tailwind CSS Official Documentation: Complete guide to Tailwind’s utility system and configuration options
• Bootstrap Grid Documentation: Original Bootstrap grid system reference for comparison and migration planning

FAQs

Q: Does tw-bootstrap-grid override any core Tailwind CSS utilities?
A: No, the plugin does not override any core Tailwind utility classes.

Q: Can I use responsive variants with these grid utilities?
A: Yes, all grid utilities support responsive variants like sm:, md:, lg:, etc.

Q: How is RTL (Right-to-Left) support handled?
A: Directional utilities such as offset, container, and row automatically adapt to dir="rtl" without extra configuration.

Q: Is this plugin compatible with Tailwind CSS via CDN?
A: No, this plugin is not compatible with Tailwind via CDN. It should be used in a build environment like PostCSS, Vite, or Webpack.