# Bootstrap and Tailwind: What a Framework Gives You and What It Costs

The same library event card built in plain CSS, in Bootstrap 5.3.8 and in Tailwind CSS 4.3.3 shows what a CSS framework gives you (speed, consistency, ready-made parts), what it costs (download size, look-alike sites, new names) and how your own CSS makes it yours.

Journeyman · CSS · Web Development · Updated November 1, 2026

## After this lesson you can

- Build a component with Bootstrap or Tailwind classes loaded from a CDN, read what each class does, and restyle it with your own CSS
- Weigh what a CSS framework gives and costs, and choose plain CSS with BEM, utility classes, Bootstrap or Tailwind for a project

## Key takeaways

- A CSS framework is a stylesheet someone else wrote, full of ready-made classes. You load it from a CDN with one line and put its class names in your HTML.
- Bootstrap gives you whole components, such as card, badge and btn. Tailwind CSS gives you utilities, such as px-3 and rounded-full, that you combine yourself.
- You gain speed and a consistent look. You pay with download size, sites that look alike, and a new set of class names to learn.
- Your own CSS is what makes a framework yours. In Bootstrap, set its --bs- variables in your own class; in Tailwind, add your colors in @theme.
- Plain CSS fits small or one-of-a-kind sites, Bootstrap a quick site with standard parts, and Tailwind a team with a build step that wants its own look.

You're in a group project with a deadline on Friday. One teammate says "let's use Bootstrap", another says "Tailwind is better", and a third has already written half the CSS by hand. Job listings ask for these names too, and you'll inherit sites built on both. To choose, and to argue for your choice, you need to know what a CSS framework actually does for you and what it takes in return. The fastest way to find out is to build the same thing three times: one event card from the Maple Street Library's events page, in plain CSS, in Bootstrap and in Tailwind CSS.

## What a framework is

Moving into a furnished apartment is fast: the couch, the table and the lamps are already there. You can live in it on day one. But the couch is the same one the neighbors have, and if you want a different one, you have to move theirs out first.

A **CSS framework** is the furnished apartment: a big stylesheet someone else wrote, full of ready-made classes for buttons, cards, forms and spacing. You add it to a page and put its class names on your elements. Most people load it from a **content delivery network (CDN)**: servers around the world that host popular files, so your page links to a copy instead of you hosting it. The version goes in the address, such as `bootstrap@5.3.8`, so the file never changes under you.

## The card in plain CSS

You've already seen this card in BEM. The HTML has one class per part:

```html
<article class="event-card">
  <p class="event-card__date">Nov 7</p>
  <p class="event-card__tag event-card__tag--kids">Kids</p>
  <h2 class="event-card__title">Saturday Story Time</h2>
  <p class="event-card__text">Picture books, songs and a paper-plate craft, for ages 3 to 6.</p>
  <a class="event-card__button" href="#save">Save my spot</a>
</article>
```

Behind it are about 60 lines of CSS that you wrote and own: the white box, the brown date badge, the yellow tag, the orange button. Nothing to download but your own file, and the page looks like no one else's. The cost is time: every one of those lines was a decision.

## The card in Bootstrap

**Bootstrap** is a free framework of ready-made styles and components. A **Bootstrap component** is a ready-made piece of a page, such as a navbar, an alert or a **card**: a box for one item, with a title, text and buttons. You write plain HTML and give it Bootstrap's class names:

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Events at Maple Street Library</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
</head>
<body class="container py-4">
  <article class="card">
    <div class="card-body">
      <p><span class="badge text-bg-dark">Nov 7</span> <span class="badge rounded-pill text-bg-warning">Kids</span></p>
      <h2 class="card-title h5">Saturday Story Time</h2>
      <p class="card-text">Picture books, songs and a paper-plate craft, for ages 3 to 6.</p>
      <a class="btn btn-primary" href="#save">Save my spot</a>
    </div>
  </article>
</body>
</html>
```

`card` and `card-body` make the bordered box and its padding, `badge` makes a small label, `text-bg-warning` colors it yellow with dark text, `btn btn-primary` makes Bootstrap's blue button, and `h5` makes the `<h2>` the size of a smaller heading without changing what it means. `container` gives the page a centered width, and `py-4` is one of Bootstrap's utilities: padding on the top and bottom. The `integrity` attribute is a fingerprint of the file, so the browser refuses a copy that has been changed.

**Try it.** Save the page as `bootstrap-card.html` and open it. Then change `text-bg-warning` to `text-bg-success`, and `btn-primary` to `btn-outline-dark`. You restyled the card without writing any CSS.

## The card in Tailwind

**Tailwind CSS** is a utility-first framework: no card class, only utilities that you combine on every element. Tailwind's browser build, one `<script>` line, is the quickest way to try it:

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Events at Maple Street Library</title>
  <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4.3.3"></script>
</head>
<body class="bg-stone-50 p-6">
  <article class="max-w-sm rounded-xl border border-stone-200 bg-white p-6 shadow-md">
    <p class="inline-block rounded-md bg-stone-900 px-3 py-1 font-bold text-white">Nov 7</p>
    <p class="ml-2 inline-block rounded-full bg-amber-100 px-3 py-1 text-sm font-semibold text-amber-800">Kids</p>
    <h2 class="mt-3 text-xl font-bold">Saturday Story Time</h2>
    <p class="mt-1 text-stone-600">Picture books, songs and a paper-plate craft, for ages 3 to 6.</p>
    <a class="mt-4 inline-block rounded-md bg-orange-700 px-4 py-2 font-bold text-white hover:bg-orange-800" href="#save">Save my spot</a>
  </article>
</body>
</html>
```

Each class is one declaration with a short name: `rounded-full` is fully rounded corners, `bg-amber-100` a light amber background (100 is light, 900 is dark), `px-3` padding left and right of 0.75rem, `text-sm` small text. `hover:bg-orange-800` (read "hover, bg orange 800") applies a darker background only while the mouse is over the link.

The browser build is for trying Tailwind out only. It's a JavaScript file that reads your page and writes the CSS in the visitor's browser on every visit. A real Tailwind site runs Tailwind's build tool on your own computer, which finds the classes your HTML uses and writes a small CSS file with only those.

![The same library event card three times, side by side: in plain CSS with a brown date badge and an orange button, in Bootstrap with a dark badge, a yellow pill and a blue button, and in Tailwind looking close to the plain CSS card](https://fsdtrainingmedia.blob.core.windows.net/public/images/2026/10/47037f77a39741969d3a075258bd349f.webp)

## What you gain, and what you pay

All three cards work. Here is what each one costs and gives, measured for this card:

| | Plain CSS with BEM | Bootstrap 5.3.8 | Tailwind CSS 4.3.3 |
|---|---|---|---|
| You write | every rule, about 60 lines | HTML with its classes | HTML with its classes |
| The visitor downloads | your file, a few KB | 232 KB of CSS (31 KB compressed), for every page, most of it unused | with the build tool, only what you used: 8 KB for this card (2.4 KB compressed). The browser build: a 282 KB script (71 KB compressed) |
| Ready-made parts | none | cards, navbars, forms, modals; menus that open need its JavaScript file too | none: you build each part from utilities |
| It looks like | yours | Bootstrap, until you change it | your choices on Tailwind's scale |
| New names to learn | only yours | `card-body`, `text-bg-warning`, `mb-2` | `px-3`, `bg-amber-100`, `rounded-full` |
| A build step | no | no | yes, for a real site |

**What you gain** is speed and consistency. A team can put together a working, decent-looking page in an afternoon, and every button and gap matches, because everyone uses the same classes on the same scale.

**What you pay:**

- **Download size.** Bootstrap sends the whole framework to every visitor. Tailwind's build tool solves that, at the price of a build step.
- **Look-alike sites.** A site with Bootstrap's blue buttons and default cards looks like thousands of others, and visitors notice.
- **A new set of names.** `mt-4` is 1.5rem in Bootstrap and 1rem in Tailwind. And Tailwind's reset takes the browser's heading sizes away: an `<h2>` with no classes looks like plain text.

## You still need CSS to make it yours

A framework gives you a starting point, not your library's look. Both let your own CSS take over. In Bootstrap, a button reads its colors from variables that start with `--bs-`, so a class of your own can set them, in a stylesheet linked *after* Bootstrap's:

```css
.btn-maple {
  --bs-btn-color: #ffffff;
  --bs-btn-bg: #b4532a;
  --bs-btn-border-color: #b4532a;
  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-bg: #8a3c1c;
  --bs-btn-hover-border-color: #8a3c1c;
}
```

`class="btn btn-maple"` is now a maple-orange button with all of Bootstrap's button behavior. In Tailwind, you add your own colors to its scale in `@theme` (read "at theme"), inside a `<style type="text/tailwindcss">` block with the browser build, or in your CSS file with the build tool:

```css
@theme {
  --color-maple: #b4532a;
  --color-maple-dark: #8a3c1c;
}
```

`--color-maple` creates the utilities `bg-maple`, `text-maple` and `border-maple`, so the button becomes `bg-maple hover:bg-maple-dark`. Either way, the cascade, specificity and custom properties you learned in this course are what make it work. A framework doesn't replace CSS; it's written in it.

## Which one fits?

There's no winner, only a fit:

- **Plain CSS with BEM** for a small site, a one-of-a-kind look, or when you're learning: everything on the page is something you understand.
- **Bootstrap** for a site that has to work this week and looks fine with standard parts: an internal tool, an admin dashboard, a prototype. Its ready-made menus and forms save the most time.
- **Tailwind** for a team that wants its own look, is happy to run a build step, and builds pages from reusable templates or JavaScript components, so each long list of classes is written once.
- **Utility classes of your own** fit inside any of these, for the small jobs.

**Try it.** For the library's events page, which would you choose, and why? Write two sentences: one on what you'd gain, one on what you'd pay.

## Check yourself

2 questions to try on the lesson page.

## So what

Frameworks are furniture: they get you moved in fast, and you still decide what stays. Knowing what Bootstrap and Tailwind do with plain CSS underneath means you can pick one for a reason, read any codebase that uses one, and make it look like your project instead of everyone else's.

## Key terms

- [Bootstrap](https://www.ask-codey.com/glossary/bootstrap)
- [Bootstrap Component](https://www.ask-codey.com/glossary/bootstrap-component)
- [Card](https://www.ask-codey.com/glossary/card)
- Tailwind CSS
- [Content Delivery Network (CDN)](https://www.ask-codey.com/glossary/content-delivery-network-cdn)

## Cheat sheets

- [Bootstrap and Tailwind: What a Framework Gives You and What It Costs](https://www.ask-codey.com/cheat-sheets/css-frameworks-bootstrap-and-tailwind-cheat-sheet)

## Related

- [Naming Things: BEM and Component Classes](https://www.ask-codey.com/lessons/css-bem-naming)
- [Utility Classes and Utility-First CSS](https://www.ask-codey.com/lessons/css-utility-first)

Source: https://www.ask-codey.com/lessons/css-frameworks-bootstrap-and-tailwind