Bootstrap

What is Bootstrap?

Bootstrap is a component-first CSS framework. Instead of giving you primitives and asking you to assemble them, it hands you finished pieces: a responsive navbar, a modal, a card, a carousel, a full form system and a twelve-column grid. Drop in the stylesheet, copy some markup and you have a working interface in minutes.

It was created at Twitter in 2011 to bring consistency to internal tools and then open-sourced. More than a decade later it is still one of the most widely used front-end frameworks in the world, powering admin panels, marketing sites, prototypes and enterprise applications.

The responsive grid

The grid is the heart of Bootstrap. It is a twelve-column flexbox system built from three pieces: a container, rows and columns.

<!-- grid.html -->
<div class="container">
  <div class="row g-4">
    <div class="col-12 col-md-6 col-lg-4">One</div>
    <div class="col-12 col-md-6 col-lg-4">Two</div>
    <div class="col-12 col-md-6 col-lg-4">Three</div>
  </div>
</div>

Read col-12 col-md-6 col-lg-4 as: full width on phones, half width from the md breakpoint, one third from lg. Bootstrap is mobile-first, so unprefixed classes apply everywhere and prefixed ones apply from that breakpoint upward.

The g-* classes set gutters, and the same row system handles offsets, ordering and auto-layout columns when you need more than even thirds.

Containers

Every layout starts with a container, which sets a max width and centres your content with responsive padding.

<!-- containers.html -->
<div class="container">Fixed width, responsive</div>
<div class="container-fluid">Full width, edge to edge</div>
<div class="container-md">Full width until md, then fixed</div>

Use container for most pages, container-fluid for dashboards and full-bleed sections, and the breakpoint-specific variants when a section should go edge-to-edge on small screens but settle down on large ones.

Components

Bootstrap’s component library is where it saves the most time. A few examples:

<!-- card.html -->
<div class="card" style="width: 18rem;">
  <img src="cover.jpg" class="card-img-top" alt="" />
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">A flexible content container.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Buttons, alerts, badges, breadcrumbs, pagination, progress bars, tooltips, dropdowns, modals, offcanvas panels, accordions and toasts all follow the same predictable class naming. Because the components share a design language, mixing them rarely looks inconsistent.

Utilities

Bootstrap also ships a large utility layer for spacing, flexbox, display, colour and typography. These are the classes you reach for when you need a small adjustment without writing new CSS.

<!-- utilities.html -->
<div class="d-flex align-items-center justify-content-between gap-3 mt-4 p-3">
  <span class="fw-semibold text-primary">Left</span>
  <button class="btn btn-sm btn-outline-secondary">Right</button>
</div>

m-* and p-* control spacing, d-* controls display, gap-* controls flex and grid gaps, and text-* and bg-* handle colour. They are optional — the grid and components work without them — but they eliminate a lot of one-off CSS.

Interactive components with JavaScript

Bootstrap’s JavaScript plugins are driven by data attributes, so most interactions need no custom code at all.

<!-- modal.html -->
<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#demo">
  Open modal
</button>

<div class="modal fade" id="demo" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Hello</h5>
        <button class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">Modal content goes here.</div>
    </div>
  </div>
</div>

The data-bs-* attributes wire the trigger to the component, and Bootstrap handles focus management, keyboard dismissal and accessibility. You can still control components programmatically with the JavaScript API when you need to.

Theming and customisation

The default look is recognisable, which is why customising matters. The recommended approach is to override Sass variables before importing Bootstrap, so the whole system recompiles around your brand.

// custom.scss
$primary: #14b8a6;
$border-radius: 0.75rem;
$font-family-sans-serif: "Inter", system-ui, sans-serif;

@import "bootstrap/scss/bootstrap";

Since Bootstrap 5, many values are also exposed as CSS custom properties, which means you can theme at runtime without a rebuild — handy for light and dark modes.

/* theme.css */
:root {
  --bs-primary: #14b8a6;
  --bs-body-bg: #0b0d0c;
  --bs-body-color: #e5e7eb;
}

When to use Bootstrap

Bootstrap is a strong fit when speed matters more than a unique visual identity: internal tools, admin dashboards, prototypes, marketing pages and projects with tight deadlines. Its grid and components let a small team ship a lot quickly, and its conventions are widely understood.

It is less compelling when you need a highly distinctive design or want to avoid the “Bootstrap look”. In those cases, a utility-first framework like Tailwind or hand-written CSS gives you more control. The right question is not which is better, but which matches the project.

Best practices

• Customise the theme variables; do not ship the defaults untouched.
• Use the grid for layout and utilities for spacing instead of writing one-off CSS.
• Include only the JavaScript you need, or use the CSS-only build.
• Keep custom CSS in a separate file and load it after Bootstrap so it wins.
• Prefer Bootstrap’s spacing utilities over arbitrary margins for consistency.
• Use semantic HTML inside the component classes for accessibility.
• Check components at every breakpoint, not just desktop.

Common mistakes

• Forgetting the container, so rows lose their alignment and gutters.
• Nesting containers instead of using a single outer container with nested rows.
• Overriding styles with !important instead of customising variables.
• Loading custom CSS before Bootstrap and then fighting the cascade.
• Using the JavaScript bundle when a CSS-only page would do.
• Leaving the default blue everywhere and wondering why the site looks generic.

Where to go next

Bootstrap gives you a fast, conventional starting point. Pair it with a solid understanding of the CSS Grid it wraps, learn responsive design properly, and compare the approach with Tailwind CSS before committing to one for a long-lived project.