Quick answer: Bootstrap 5 is the fastest way to a professional-looking responsive site without writing CSS from scratch. No jQuery, no build tools: include two CDN lines, add classes like container, row, col-md-4 and btn btn-primary, done. This guide covers the exact setup, the files, and the first layout. If you are comparing frameworks, our Materialize CSS tutorial covers the other major class-based option.
Setup in two minutes (CDN method)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My Bootstrap Page</title>
<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>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>Two differences from the Bootstrap 4 era matter in 2026: no jQuery dependency, and the single bootstrap.bundle.min.js includes Popper for dropdowns and tooltips. The CSS link goes in <head>, the script before </body>.
The grid in 60 seconds
Bootstrap’s grid is 12 columns with five breakpoint prefixes — col- (all sizes), col-sm- (≥576px), col-md- (≥768px), col-lg- (≥992px), col-xl- (≥1200px):
<div class="row">
<div class="col-12 col-md-6 col-lg-3">Card</div>
<div class="col-12 col-md-6 col-lg-3">Card</div>
<div class="col-12 col-md-6 col-lg-3">Card</div>
<div class="col-12 col-md-6 col-lg-3">Card</div>
</div>Same responsive story as our Materialize grid guide, different prefix names: full width on phones, half on tablets, quarter on desktop.
The five components everyone uses first
| Component | Classes | Note |
|---|---|---|
| Navbar | navbar navbar-expand-lg navbar-dark bg-dark | Collapses to hamburger under the breakpoint |
| Cards | card + card-body | The workhorse container |
| Buttons | btn btn-primary | Color variants: secondary, success, danger… |
| Forms | form-control + mb-3 wrappers | form-label for labels |
| Alerts | alert alert-success | Add alert-dismissible + close button to allow closing |
Utilities do the polish: py-4/mb-3 spacing, d-flex/justify-content-between layout, text-center, shadow-sm. Learn ten utilities and you skip writing CSS for most pages. Where to go next: add a working form with our PHP contact form + reCAPTCHA guide.
For one-to-one front-end training with code review, Ampersand Academy teaches web development with real projects.
Frequently asked questions
How do I add Bootstrap 5 to my website?
Include the CSS from the jsDelivr CDN in your head tag and the bundle JavaScript before the closing body tag. No download, no build step, works with any backend.
Does Bootstrap 5 need jQuery?
No. Bootstrap 5 removed the jQuery dependency entirely. All interactive components work with plain JavaScript.
What is the difference between Bootstrap 4 and 5?
Bootstrap 5 drops jQuery, switches from float to flexbox as the grid default, adds utility-first APIs, renames size prefixes (no more col-xs), and uses the bundled Popper for positioning.
Which is better, Bootstrap or Materialize?
Bootstrap has the larger ecosystem and more third-party templates; Materialize implements Google’s Material Design. Both are 12-column class-based frameworks – the skills transfer in days.
Can I use Bootstrap with React or Angular?
Yes. Use bootstrap-css only (skip the JS) and pair it with React Bootstrap or NG Bootstrap, which reimplement the interactive components as proper React or Angular components.