Episode 1 — Fundamentals / 1.11 — CSS Frameworks TailwindCSS and Bootstrap

1.11.e — Introduction to Bootstrap

In one sentence: Bootstrap is a component-based CSS framework that gives you a complete design system — grid, pre-styled components, and interactive widgets — so you can build responsive layouts without writing much CSS from scratch.

Navigation: ← 1.11.d — Building with TailwindCSS · 1.11.f — Bootstrap Grid & Components →

1. What is Bootstrap?

Bootstrap is the most widely used CSS framework in history. Originally created at Twitter in 2011, it provides:

Pre-styled components — buttons, navbars, cards, modals, forms, alerts, tooltips
A 12-column responsive grid for layout
JavaScript plugins for interactive behavior (modals, dropdowns, carousels)
SASS source for deep customization
Utility classes (added in v5) for quick tweaks

Bootstrap 5 (current major version) dropped jQuery, added RTL support, and expanded its utility API.

2. Installation

Option A — CDN (quickest start)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Bootstrap Demo</title>
  <!-- Bootstrap CSS -->
  <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>

  <!-- Bootstrap JS (for interactive components) -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js">
  </script>
</body>
</html>

Note: bootstrap.bundle.min.js includes Popper.js (required for tooltips, popovers, dropdowns).

Option B — npm (for build tools)

npm install bootstrap

// In your JS entry file
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.bundle.min.js';

Option C — SASS source (for customization)

npm install bootstrap

// In your SCSS file
// Override variables BEFORE importing Bootstrap
$primary: #0d6efd;
$border-radius: 0.5rem;

@import "bootstrap/scss/bootstrap";

3. The grid system — basics

Bootstrap's grid is a 12-column flexbox system with three layers:

.container  →  Centers content, sets max-width per breakpoint
  └── .row  →  Creates a flexbox row (negative margins for gutter)
       └── .col-*  →  Defines column width (1–12 units out of 12)

<div class="container">
  <div class="row">
    <div class="col-8">Main content (8/12 = 66.7%)</div>
    <div class="col-4">Sidebar (4/12 = 33.3%)</div>
  </div>
</div>

Container types

Class	Behavior
`.container`	Fixed max-width at each breakpoint
`.container-fluid`	Full width at all breakpoints
`.container-md`	Full width until `md` breakpoint, then fixed

4. Breakpoints

Bootstrap uses six breakpoints (mobile-first, like Tailwind):

Breakpoint	Class infix	Min-width	Example column class
Extra small	(none)	0	`col-12`
Small	`sm`	576px	`col-sm-6`
Medium	`md`	768px	`col-md-4`
Large	`lg`	992px	`col-lg-3`
Extra large	`xl`	1200px	`col-xl-2`
XXL	`xxl`	1400px	`col-xxl-1`

<!-- Full width on mobile, half on medium, third on large -->
<div class="container">
  <div class="row">
    <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-12 col-lg-4">Card 3</div>
  </div>
</div>

5. Key components — quick preview

Bootstrap ships dozens of ready-made components. Here are the most common:

Component	Class	What it does
Button	`.btn .btn-primary`	Styled button with hover/focus states
Card	`.card .card-body`	Bordered container with header, body, footer
Navbar	`.navbar .navbar-expand-lg`	Responsive navigation bar
Alert	`.alert .alert-danger`	Dismissible notification banner
Modal	`.modal`	Dialog overlay (requires JS)
Badge	`.badge .bg-success`	Small label/counter
Form	`.form-control .form-label`	Styled inputs with consistent sizing
Spinner	`.spinner-border`	Loading indicator

<!-- Button variants -->
<button class="btn btn-primary">Primary</button>
<button class="btn btn-outline-secondary">Outline</button>
<button class="btn btn-danger btn-lg">Large Danger</button>
<button class="btn btn-success btn-sm">Small Success</button>

6. Bootstrap's approach to theming

Bootstrap uses SASS variables for theming. You override variables before importing Bootstrap:

// _custom.scss
$primary:       #6366f1;  // Indigo instead of default blue
$font-family-base: "Inter", sans-serif;
$border-radius: 0.75rem;
$body-bg:       #f8fafc;

@import "bootstrap/scss/bootstrap";

Key SASS variable categories

Category	Example variables
Colors	`$primary`, `$secondary`, `$success`, `$danger`, `$warning`, `$info`
Typography	`$font-family-base`, `$font-size-base`, `$headings-font-weight`
Spacing	`$spacer` (base unit, default 1rem), `$spacers` map
Borders	`$border-radius`, `$border-width`, `$border-color`
Breakpoints	`$grid-breakpoints` map
Grid	`$grid-columns` (12), `$grid-gutter-width`

7. Bootstrap 5 utility classes

Bootstrap 5 added a utility API that generates classes similar to Tailwind:

<div class="d-flex align-items-center justify-content-between p-3 mb-4
            bg-light rounded shadow-sm">
  <span class="fw-bold text-primary">Status</span>
  <span class="badge bg-success">Active</span>
</div>

Utility	What it does
`d-flex`	`display: flex`
`d-none d-md-block`	Hide on mobile, show on medium+
`p-3`, `m-2`, `mt-4`	Padding, margin
`text-center`, `text-end`	Text alignment
`fw-bold`, `fs-4`	Font weight, font size
`bg-primary`, `text-white`	Background and text colors
`rounded`, `shadow-sm`	Border radius, box shadow
`w-100`, `h-auto`	Width, height

These utilities complement components — use them for small tweaks without custom CSS.

8. Key takeaways

Bootstrap is a component-based framework — drop in pre-styled widgets with short class names.
Installation options: CDN (quickest), npm (build tools), SASS source (customization).
The 12-column grid (container → row → col-*) is the foundation of Bootstrap layout.
Six breakpoints (xs through xxl) enable responsive design, mobile-first.
SASS variables control theming — override them before importing Bootstrap.
Bootstrap 5 includes utility classes alongside components for quick styling tweaks.

Explain-It Challenge

Explain without notes:

The three layers of Bootstrap's grid system and what each does (container, row, col-*).
Why you override SASS variables before the @import "bootstrap" line, not after.
One advantage of Bootstrap's CDN installation and one advantage of the npm approach.

Navigation: ← 1.11.d — Building with TailwindCSS · 1.11.f — Bootstrap Grid & Components →