Docs menu ＋

Learning Logs · · 3 min read

Learning Bootstrap 5: grid, components, Sass customization

Bootstrap 5 tutorial: CDN or npm install, the mobile-first 12-column grid, interactive components via data-bs-* with no JavaScript, and the right way to customize via Sass variables.

Bootstrap 5SassCSS

Bootstrap 5 is the fastest road from zero to a tidy page: ready-made components (navbar, modal, card), a battle-tested grid, and no need to design from scratch. Its philosophy is the opposite of Tailwind — Bootstrap gives you finished components, Tailwind gives you raw material. Both are worth knowing.

1. Installation

Fastest path — CDN (for learning & prototypes):

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" />
  </head>
  <body>
    <h1 class="text-center mt-5">Hello Bootstrap</h1>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
  </body>
</html>

Real-project path — npm (so you can customize):

npm install bootstrap

// styles/main.scss
@import "bootstrap/scss/bootstrap";

2. The grid: 12 columns, mobile-first

<div class="container">
  <div class="row g-4">
    <div class="col-12 col-md-6 col-lg-4">Card 1</div>
    <div class="col-12 col-md-6 col-lg-4">Card 2</div>
    <div class="col-12 col-md-6 col-lg-4">Card 3</div>
  </div>
</div>

Read it as: full width (12/12) on phones, half (6/12) from tablets, a third (4/12) from desktops. g-4 = the gutter between columns. This is 80% of Bootstrap layout.

3. Components without writing JavaScript

Bootstrap’s interactive components are driven by data-bs-* attributes:

<!-- A button that opens a modal -->
<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#confirm">
  Delete Product
</button>

<div class="modal fade" id="confirm" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Are you sure?</h5>
        <button class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">The product will be permanently deleted.</div>
      <div class="modal-footer">
        <button class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
        <button class="btn btn-danger">Delete</button>
      </div>
    </div>
  </div>
</div>

The same pattern drives dropdowns, collapse, offcanvas, tooltips — learn one, understand them all.

4. Customize via Sass, not CSS overrides

The right way to change brand colors — override the variables before the import:

// styles/main.scss
$primary: #0d9488;          // swap the default blue for teal
$border-radius: 0.25rem;
$font-family-sans-serif: "Inter", system-ui, sans-serif;

@import "bootstrap/scss/bootstrap";

Every component (buttons, links, badges, form focus) follows automatically. Overriding .btn-primary { background: ... } in CSS afterwards = an endless specificity war — avoid it.

Tips from experience

  • Don’t fight the grid — when a layout feels hard, you’re usually attempting something the 12-column grid wasn’t designed for; reach for the flex utilities (d-flex, justify-content-between) that ship alongside it.
  • A Bootstrap site looks “like Bootstrap” when you use raw defaults — 15 minutes of Sass customization (colors, radius, font) instantly removes the template feel.
  • Choose Bootstrap when speed matters and the team isn’t strong in CSS; choose Tailwind when you need a truly distinctive design. I use both, depending on the project.

Want something like this built for your business?

Start a projectMore docs