Two CSS Frameworks Worth Using: Bootstrap and Tailwind CSS

CSS frameworks exist to speed up design and development. This article introduces Bootstrap and Tailwind CSS with working examples.

The short answer: use Bootstrap if you want finished components as they come, and Tailwind CSS if you want to decide the design yourself.

This article was published in 2023 and revised in September 2026. The original Bootstrap 4 code assumed jQuery; Bootstrap 5 removed that dependency and renamed the data attributes. Tailwind also changed its configuration model substantially in v4, so both sections have been updated.

Bootstrap: what it offers and how to set it up

Bootstrap is probably the most widely used CSS framework there is. Its grid system and large component library make responsive layouts quick to assemble.

Example

A simple navigation bar built with Bootstrap.

See the Pen
CSS-Bootstrap example by Rin (@rinblog0408)
on CodePen.

Installing Bootstrap

You need Bootstrap’s CSS and JavaScript in your project, either from a CDN or downloaded locally.

<!-- Bootstrap 5.3 from a CDN -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

Bootstrap 5 no longer requires jQuery. Version 4 needed jQuery and Popper loaded separately; in version 5, bootstrap.bundle.min.js includes Popper, so there are only two files to load.

Copying code from older articles will pull in jQuery you do not need. If you are using Bootstrap 5, delete the jQuery line.

A simple navigation bar

<nav class="navbar navbar-expand-md bg-dark navbar-dark">
  <!-- logo or site name goes here -->
  <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="collapsibleNavbar">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">About</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Services</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Contact</a>
      </li>
    </ul>
  </div>
</nav>

Watch the attribute names. In Bootstrap 5, every data attribute that drives JavaScript is namespaced with data-bs-. Leave the version 4 data-toggle or data-target in place and the button will not open anything.

The namespace exists to avoid clashing with other libraries’ data attributes. Migrating from 4 to 5 starts with this find-and-replace.

Tailwind CSS: characteristics and customisation

Tailwind CSS is class-based: you apply styles by adding classes directly in the markup. The flexibility of customisation is its main appeal.

Installing Tailwind

Tailwind CSS changed its setup substantially in v4 (January 2025). Configuration moved from a JavaScript file into CSS, and there is considerably less to write.

npm install tailwindcss @tailwindcss/postcss

On the CSS side, a single @import gets you started.

@import "tailwindcss";

Colours and fonts are customised in CSS with @theme, not in tailwind.config.js.

@import "tailwindcss";

@theme {
  --color-brand: #0f766e;
  --font-display: "Inter", sans-serif;
}

That makes classes such as bg-brand and font-display available.

If an existing project has a tailwind.config.js, it is on v3 or earlier. v4 does not assume that file, so migrating means moving the configuration into CSS.

Customising a button

Adjusting colour and size is a matter of swapping classes.

<!-- green background, white text -->
<button class="bg-green-500 text-white font-bold py-2 px-4 rounded">
  Click Me
</button>

<!-- larger button with a red background -->
<button class="bg-red-600 text-white font-bold py-3 px-6 rounded-lg text-xl">
  Sign Up Now
</button>

Summary

The choice comes down to who decides the appearance. Bootstrap hands you finished components, so using them as-is gets you to something presentable quickly. Tailwind is a set of utility classes, so you assemble the appearance yourself.

In practice: Tailwind when there is a design comp, Bootstrap when speed matters more than looks—internal tools, admin panels.

Either way, check the version first. Bootstrap 4 and 5 use different attribute names, and Tailwind v3 and v4 configure differently. Samples online mix versions freely, so pasted code frequently does not run.

Spacing is covered in adding space in flexbox and grid with the gap property—the reasoning applies whether or not you use a framework.

For styling form controls, see designing checkboxes and radio buttons with CSS. If you are looking for books on HTML, CSS and JavaScript, there is four books for learning web coding.