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

1.11.f — Bootstrap Grid & Components

In one sentence: Bootstrap's 12-column grid gives you responsive layout control with simple classes, and its component library provides production-ready navbars, cards, modals, forms, and more — all consistent and accessible out of the box.

Navigation: ← 1.11.e — Introduction to Bootstrap · 1.11.g — Customizing Bootstrap →

1. The 12-column grid in depth

Why 12?

12 is divisible by 2, 3, 4, and 6 — making it easy to create halves, thirds, quarters, and sixths without fractional math.

|  1 |  2 |  3 |  4 |  5 |  6 |  7 |  8 |  9 | 10 | 11 | 12 |
|____|____|____|____|____|____|____|____|____|____|____|____|

col-6 + col-6             = two halves
col-4 + col-4 + col-4     = three thirds
col-3 + col-3 + col-3 + col-3 = four quarters
col-8 + col-4             = content + sidebar

Auto columns

<!-- Equal-width columns without specifying numbers -->
<div class="row">
  <div class="col">Equal</div>
  <div class="col">Equal</div>
  <div class="col">Equal</div>
</div>

.col alone divides space equally among all columns in the row.

2. Responsive column classes

Columns can change width at different breakpoints:

<div class="container">
  <div class="row">
    <!-- Full width mobile, half on tablet, third on desktop -->
    <div class="col-12 col-md-6 col-lg-4">
      <div class="p-3 bg-light border">Column A</div>
    </div>
    <div class="col-12 col-md-6 col-lg-4">
      <div class="p-3 bg-light border">Column B</div>
    </div>
    <div class="col-12 col-md-12 col-lg-4">
      <div class="p-3 bg-light border">Column C</div>
    </div>
  </div>
</div>

Reading the pattern

col-{breakpoint}-{span} means: "At this breakpoint and above, this column takes span out of 12 units."

Class	Meaning
`col-12`	12/12 = full width (all sizes, unless overridden)
`col-md-6`	6/12 = half width at `md` (768px) and above
`col-lg-4`	4/12 = one-third at `lg` (992px) and above

3. Offset, order, and nesting

Offset — push columns right

<div class="row">
  <div class="col-md-6 offset-md-3">Centered column (3 + 6 + 3 = 12)</div>
</div>

Order — rearrange visual order

<div class="row">
  <div class="col order-2">Shows second</div>
  <div class="col order-1">Shows first</div>
</div>

Nesting — rows inside columns

<div class="row">
  <div class="col-md-8">
    <div class="row">
      <div class="col-6">Nested left</div>
      <div class="col-6">Nested right</div>
    </div>
  </div>
  <div class="col-md-4">Sidebar</div>
</div>

Nested rows start a new 12-column context within their parent column.

4. Gutters

Gutters are the spacing between columns. Bootstrap 5 uses g-* classes:

Class	Effect
`g-0`	No gutters
`g-3`	1rem gutter on both axes
`gx-4`	1.5rem horizontal gutter only
`gy-2`	0.5rem vertical gutter only

<div class="row g-4">
  <div class="col-6"><div class="p-3 bg-light">A</div></div>
  <div class="col-6"><div class="p-3 bg-light">B</div></div>
  <div class="col-6"><div class="p-3 bg-light">C</div></div>
  <div class="col-6"><div class="p-3 bg-light">D</div></div>
</div>

5. Component: Navbar

<nav class="navbar navbar-expand-lg navbar-light bg-white shadow-sm">
  <div class="container">
    <a class="navbar-brand fw-bold" href="#">MyApp</a>
    <button class="navbar-toggler" type="button"
            data-bs-toggle="collapse" data-bs-target="#navMenu">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navMenu">
      <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Features</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Pricing</a>
        </li>
      </ul>
      <a href="#" class="btn btn-primary ms-lg-3">Sign Up</a>
    </div>
  </div>
</nav>

navbar-expand-lg → collapsed hamburger menu on screens below lg; expanded horizontal nav on lg+.

6. Component: Cards

<div class="card" style="width: 20rem;">
  <img src="photo.jpg" class="card-img-top" alt="Landscape" />
  <div class="card-body">
    <h5 class="card-title">Mountain Trek</h5>
    <p class="card-text">Explore the best hiking trails in the region.</p>
    <a href="#" class="btn btn-primary">Read More</a>
  </div>
  <div class="card-footer text-muted">
    Posted 3 days ago
  </div>
</div>

Card layout options

Pattern	How
Card group	`<div class="card-group">` — equal-height cards in a row
Card in grid	Put cards inside `col-*` divs in a `row`
Horizontal card	`row` + `col-*` inside card with `g-0`

7. Component: Buttons

<!-- Solid variants -->
<button class="btn btn-primary">Primary</button>
<button class="btn btn-secondary">Secondary</button>
<button class="btn btn-success">Success</button>
<button class="btn btn-danger">Danger</button>
<button class="btn btn-warning">Warning</button>

<!-- Outline variants -->
<button class="btn btn-outline-primary">Outline Primary</button>

<!-- Sizes -->
<button class="btn btn-primary btn-lg">Large</button>
<button class="btn btn-primary btn-sm">Small</button>

<!-- Disabled -->
<button class="btn btn-primary" disabled>Disabled</button>

8. Component: Modals

<!-- Trigger -->
<button class="btn btn-primary" data-bs-toggle="modal"
        data-bs-target="#exampleModal">
  Open Modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1"
     aria-labelledby="modalTitle" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="modalTitle">Confirm Action</h5>
        <button type="button" class="btn-close"
                data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        Are you sure you want to proceed?
      </div>
      <div class="modal-footer">
        <button class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
        <button class="btn btn-primary">Confirm</button>
      </div>
    </div>
  </div>
</div>

Bootstrap handles focus trapping, backdrop, and ESC-to-close automatically.

9. Component: Forms

<form>
  <div class="mb-3">
    <label for="emailInput" class="form-label">Email</label>
    <input type="email" class="form-control" id="emailInput"
           placeholder="you@example.com" />
  </div>
  <div class="mb-3">
    <label for="passwordInput" class="form-label">Password</label>
    <input type="password" class="form-control" id="passwordInput" />
  </div>
  <div class="mb-3 form-check">
    <input type="checkbox" class="form-check-input" id="rememberMe" />
    <label class="form-check-label" for="rememberMe">Remember me</label>
  </div>
  <button type="submit" class="btn btn-primary">Sign In</button>
</form>

Other form elements

Element	Class
`<select>`	`.form-select`
`<textarea>`	`.form-control`
`<input type="range">`	`.form-range`
Floating label	`.form-floating` wrapper
Input group (addons)	`.input-group` + `.input-group-text`

10. Component: Alerts and badges

<!-- Alerts -->
<div class="alert alert-success" role="alert">
  Changes saved successfully!
</div>
<div class="alert alert-danger alert-dismissible fade show" role="alert">
  Something went wrong.
  <button type="button" class="btn-close" data-bs-dismiss="alert"
          aria-label="Close"></button>
</div>

<!-- Badges -->
<h4>Notifications <span class="badge bg-danger">4</span></h4>
<span class="badge bg-primary">New</span>
<span class="badge rounded-pill bg-success">Active</span>

11. Key takeaways

The 12-column grid uses container → row → col-* with responsive breakpoint infixes.
Offset pushes columns right; order rearranges visual sequence; nesting starts a new 12-col context.
Bootstrap components (navbar, card, modal, form, alert) are production-ready with accessibility built in.
Modals handle focus trapping, backdrop, and keyboard automatically via Bootstrap JS.
Gutters control spacing between columns with g-*, gx-*, gy-* classes.

Explain-It Challenge

Explain without notes:

Why Bootstrap uses a 12-column grid (what makes 12 convenient?).
How col-12 col-md-6 col-lg-4 creates a responsive layout that changes at each breakpoint.
What Bootstrap's modal JS provides automatically that you'd have to build yourself with vanilla CSS/JS.

Navigation: ← 1.11.e — Introduction to Bootstrap · 1.11.g — Customizing Bootstrap →