Lesson 19.01 — Intro to Bootstrap & Setup

Introduction

Bootstrap is the world's most popular open-source CSS framework for building responsive, mobile-first websites. It ships with a tested grid system, ready-made components (buttons, cards, navbars, modals), and hundreds of utility classes — so you can build a professional-looking layout without writing much CSS yourself.

It was created at Twitter in 2011 to keep their internal tools consistent, then open-sourced. The current major version is Bootstrap 5, which dropped the old jQuery dependency and ships as plain CSS plus a small JavaScript bundle.

Bootstrap does not replace learning CSS — it sits on top of it. The CSS you learned in earlier modules is what makes Bootstrap make sense.

Theory

What's in the box

Reboot — a CSS reset that normalizes browser defaults (margins, font sizes, box-sizing).
Grid system — a 12-column responsive layout system built with flexbox.
Utilities — single-purpose classes like m-3 (margin), text-center, d-flex.
Components — pre-styled UI pieces: buttons, alerts, cards, navbars, modals, and more.

Two ways to add Bootstrap

1. CDN (fastest) — link to files hosted on a content delivery network. Best for learning and quick projects. Put the CSS in the <head> and the JS bundle just before </body>:

<!-- in <head> -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- before </body> -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

2. npm / package install — npm install bootstrap for projects using a build tool (Vite, Webpack). We use the CDN approach throughout this module.

Containers

Almost every Bootstrap layout starts inside a container. A container centers your content and applies responsive horizontal padding:

.container — a fixed, responsive max-width that snaps at each breakpoint.
.container-fluid — full width at all sizes (edge to edge).
.container-md — full width until the md breakpoint, then fixed.

Real World Example

This is a complete, minimal Bootstrap page. The button and alert below are styled entirely by Bootstrap classes — no custom CSS:

<!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>
  <div class="container py-4">
    <h1 class="mb-3">Hello, Bootstrap!</h1>
    <button class="btn btn-primary">Click me</button>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Live preview (rendered by the Bootstrap CSS loaded on this page):

Hello, Bootstrap!

This green alert is pure Bootstrap — no custom CSS.

Common Mistakes

Forgetting the viewport meta tag. Without <meta name="viewport" content="width=device-width, initial-scale=1"> the responsive grid will not behave correctly on phones.
Loading the JS before the CSS, or omitting the JS bundle. Interactive components (modals, dropdowns, the collapsing navbar) need the bundle — and it should load at the end of the body.
Not wrapping content in a container. Rows placed directly on the page can produce horizontal overflow because of negative gutter margins.
Mixing Bootstrap 4 classes into Bootstrap 5. Many class names changed (e.g. ml-* became ms-*). Always check the version.

Best Practices

Pin a specific version in the CDN URL (e.g. @5.3.3) so an upstream update never breaks your site silently.
Load your own stylesheet after Bootstrap so your overrides win without needing !important.
Prefer utility classes for small tweaks; only write custom CSS when no utility exists.
Keep the official docs open while you build — Bootstrap's strength is its documentation.

Practice Exercise

Create a new HTML file and add the Bootstrap CDN link and script using the snippet above.
Add a .container with an <h1> and a paragraph inside it.
Add three buttons using btn btn-primary, btn btn-secondary, and btn btn-outline-danger. Open the file in your browser and observe the styling.
Switch the container to .container-fluid and resize the window. Notice how the content now stretches edge to edge.

Assignment

Build a simple "Coming Soon" page using only Bootstrap classes (no custom CSS):

Center a heading and a short tagline vertically and horizontally on the screen (hint: d-flex, vh-100, align-items-center, justify-content-center).
Add a primary "Notify me" button below the tagline.
Wrap everything in a container and add some vertical padding.

Hint: <div class="container d-flex vh-100 align-items-center justify-content-center text-center"> is a solid starting point.

Interview Questions

What is Bootstrap? — An open-source CSS framework providing a responsive grid, components, and utility classes for building mobile-first websites quickly.
How do you add Bootstrap to a project? — Via CDN link tags (CSS in head, JS bundle before </body>) or by installing the npm package in a build setup.
What changed in Bootstrap 5? — It dropped the jQuery dependency, switched utilities to a new system, renamed directional utilities (ml/mr → ms/me), and added CSS custom properties.
What is the difference between .container and .container-fluid? — .container has a responsive fixed max-width that steps down at breakpoints; .container-fluid is always 100% width.

Additional Resources

getbootstrap.com — official Bootstrap 5 documentation
getbootstrap.com/docs/5.3/getting-started/introduction — the getting started guide
MDN Web Docs — for the underlying CSS concepts Bootstrap builds on