Bootstrap is the world's most popular open-source CSS framework. It provides a collection of ready-made components, a powerful grid system, and helpful utility classes that let you build responsive, mobile-first websites quickly and consistently — without writing a lot of custom CSS from scratch.
Building a website from scratch requires a lot of effort. Bootstrap solves common problems by giving you:
| Feature | Plain CSS | Bootstrap |
|---|---|---|
| Responsive grid | Write manually | Built-in (12-col grid) |
| UI Components | Build from scratch | Ready-to-use |
| JavaScript widgets | Needs custom JS | Included (modals, dropdowns…) |
| Learning curve | Low (just CSS) | Low (class-based) |
| File size | Minimal | Larger (CDN makes it fast) |
The easiest way to get started is to include Bootstrap from a CDN (Content Delivery Network) — no download required.
Paste this <link> tag inside your HTML <head> section:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css">Paste this <script> tag just before the closing </body> tag to enable interactive components like modals and dropdowns:
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js"></script>Here is a complete, working Bootstrap starter template:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Bootstrap Page</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h1 class="text-primary mt-4">Hello, Bootstrap!</h1>
<p class="lead">This is my first Bootstrap page.</p>
<button class="btn btn-success">Click Me</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>meta name="viewport" tag is required for Bootstrap's responsive behaviour to work correctly on mobile devices.
| Concept | Description | Example Class |
|---|---|---|
| Container | Centers and constrains your page content | container, container-fluid |
| Grid | 12-column layout system using rows and columns | row, col-md-6 |
| Components | Ready-made UI elements | btn, card, navbar |
| Utilities | Helper classes for spacing, color, text, etc. | mt-3, text-center, bg-dark |
| Breakpoints | Screen size targets for responsive design | sm, md, lg, xl |
viewport meta tag for responsive behaviour<meta name="viewport" content="width=device-width, initial-scale=1.0">, Bootstrap's responsive grid and utilities won't behave correctly on real mobile devices, even though desktop looks fine.
!important rules usually means the grid or utility classes weren't used correctly in the first place — check for a built-in class before reaching for custom CSS.
A second example — combining the grid system with a ready-made component to build a simple two-column page section:
<div class="container">
<div class="row">
<div class="col-md-8">
<h2>Main Content</h2>
<p>This column takes up 8 of 12 grid units on medium screens and up.</p>
</div>
<div class="col-md-4">
<div class="card p-3">
<strong>Sidebar</strong>
<p class="mb-0">A Bootstrap card component filling the remaining 4 units.</p>
</div>
</div>
</div>
</div>Q: Do I need to know JavaScript to use Bootstrap?
A: No — most of Bootstrap is CSS classes you apply directly to HTML. JavaScript is only needed for interactive components like modals, dropdowns, and carousels, and Bootstrap ships that JS for you.
Q: Is Bootstrap still relevant with Tailwind CSS around?
A: Yes — they solve similar problems differently. Bootstrap ships pre-styled components out of the box; Tailwind gives you low-level utility classes to build your own look. Both remain widely used.
Q: Where can I see every available Bootstrap class?
A: The official Bootstrap 5 documentation covers every component and utility with live examples.