Introduction to Bootstrap

2 min read 2 runnable examples Quiz included

Bootstrap is the world's most popular CSS framework. It gives you a responsive grid, ready-made components (buttons, cards, navbars, forms, modals) and hundreds of utility classes, so you can build a good-looking, mobile-friendly page by adding classes to HTML, often without writing any CSS yourself.

Adding Bootstrap

Link Bootstrap's CSS (and, for interactive components, its JavaScript) from a CDN:

HTML

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

On CodeMIRAI, Bootstrap examples get these added automatically.

Your first Bootstrap page

HTML + Bootstrap

<div class="container py-4">
  <h1 class="display-5 fw-bold">Hello, Bootstrap!</h1>
  <p class="lead text-secondary">A page styled entirely with Bootstrap classes.</p>
  <button class="btn btn-primary">Primary</button>
  <button class="btn btn-outline-secondary">Secondary</button>
  <div class="alert alert-success mt-3">Everything here comes from class names.</div>
</div>

Every bit of styling there comes from class names: container centres the content, py-4 adds vertical padding, btn btn-primary makes a styled button, alert alert-success a green message box.

Utility classes

Utilities do one small job each, and their names follow a pattern:

Class	Does
`m-3`, `mt-2`, `px-4`	margin / padding (t, b, s, e, x, y = sides; 0 to 5 = size)
`text-center`, `text-end`	text alignment
`text-primary`, `bg-light`	colours
`fw-bold`, `fs-4`	font weight and size
`d-flex`, `d-none`	display
`rounded`, `shadow`, `border`	decoration

HTML + Bootstrap

<div class="container py-3">
  <div class="p-4 mb-3 bg-light rounded-3 shadow-sm border">
    <h4 class="fw-bold mb-1">Utility classes</h4>
    <p class="mb-0 text-secondary">Padding, background, rounding, shadow and border: five classes, no CSS.</p>
  </div>
  <div class="d-flex gap-2">
    <span class="badge text-bg-primary">Python</span>
    <span class="badge text-bg-success">SQL</span>
    <span class="badge text-bg-warning">JavaScript</span>
  </div>
</div>

Finished this lesson?Mark it complete to earn +20 XP and move your progress on.