Introduction

Bootstrap is a CSS (and small amount of JavaScript) framework that ships a full design system in one file: a responsive grid, pre-styled versions of nearly every common UI element, and a huge set of utility classes for the small stuff. You write HTML with Bootstrap's class names, and the styling comes along for free.

Adding Bootstrap to a page

The fastest way to try Bootstrap is a CDN link in the <head> — no build tools, no install step:

HTML index.html
<!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">
    <h1>Hello, Bootstrap</h1>
    <p>This paragraph is already using Bootstrap's default typography.</p>
  </div>
</body>
</html>
Rendered result
A page with generous default spacing and Bootstrap's system font. "Hello, Bootstrap" appears as a large, bold heading, and the paragraph beneath it sits in a comfortable, readable body font — noticeably different from an unstyled browser default, even though you haven't written a single line of custom CSS yet.

The <link> tag pulls in Bootstrap's compiled CSS from a CDN. Some components (like the modal you'll see in lesson 9) also need Bootstrap's JavaScript bundle, added as a <script> tag near the end of <body> — you'll see that when it's actually needed.

The container class

Almost every Bootstrap page wraps its content in an element with the container class. It centers your content and adds sensible side padding and a max-width that adjusts at different screen sizes, instead of letting text and components stretch edge-to-edge on a wide monitor:

HTML index.html
<div class="container">
  <h1>Welcome</h1>
  <p>Content stays comfortably centered, with padding on either side.</p>
</div>
Rendered result
On a wide browser window, the heading and paragraph sit in a centered column with margin on both sides — not stretched across the full width of the screen. On a narrow (mobile) window, the same container fills almost the full width, just with a small consistent gutter on each side.

There's also container-fluid, which always spans 100% of the viewport width at every screen size, with no max-width cap — useful for a full-bleed header or a layout that should never leave empty space on the sides.

Note: Bootstrap's responsive behavior depends entirely on the viewport meta tag — <meta name="viewport" content="width=device-width, initial-scale=1"> — being present in <head>. Without it, mobile browsers render the page at a fixed desktop-width viewport and then zoom out, which silently breaks every responsive class you write in the rest of this course. It's easy to forget and hard to notice until you test on an actual phone.
PreviousCourse Home