Introduction to Bootstrap
You have spent this course writing CSS by hand: defining custom properties, building layouts with Grid and Flexbox, organizing stylesheets with CUBE CSS. That work gave you a deep understanding of how CSS actually functions. Now it is time to look at something different: a CSS framework that makes many of those decisions for you.
Bootstrap is one of the most widely used CSS frameworks in the world. It has been around since 2011, and despite its age, it remains a dominant force in production web development. Understanding it is not optional for a working front-end developer. You will encounter Bootstrap codebases whether you choose to use it yourself or not.
This reading activity introduces Bootstrap from the ground up. By the end, you will understand what Bootstrap is, how to add it to a project, how to use its utilities and grid system, and how to customize it so your project does not look like every other Bootstrap site on the internet. You will also get a brief first look at how this philosophy compares to another popular approach, something we will explore in more depth later in the unit.
What Bootstrap Is and Why It Exists
Bootstrap is a collection of pre-written CSS (and some JavaScript) that you add to your project. Instead of writing:
.btn {
padding: ...;
border-radius: ...;
background: ...;
}
btn btn-primary to an HTML element and Bootstrap handles the styling for you.
That sounds simple, and in many ways it is. The power of Bootstrap comes from what it has already solved for you: consistent cross-browser styling, a responsive grid system, pre-built interactive components, and a large library of utility classes for spacing, color, typography, and layout. These are the same problems you would solve yourself on every project. Bootstrap solves them once so you do not have to.
The Core Philosophy: Classes on HTML Elements
The most important thing to understand about Bootstrap before you write a single line of code is its philosophy: styling is applied by adding classes directly to HTML elements. There is no separate stylesheet you write. There is no BEM naming convention you design. You write HTML, you add Bootstrap classes, and the browser renders styled output.
Here is a simple example. This is all it takes to render a styled button:
<button class="btn btn-primary">
Save Changes
</button>
No custom CSS. No stylesheet entry. The classes btn and btn-primary carry all the styling. This is fundamentally different from the workflow you have used in this course, and understanding that difference is key to understanding Bootstrap's strengths and limitations.
You have already used utility classes in this course. Classes like sr-only or single-purpose helper classes are utility thinking. Bootstrap takes this concept much further, providing hundreds of single-purpose classes that cover nearly every common CSS need. Later in this unit, you will compare this approach to Tailwind CSS, which takes the utility class philosophy even further still.
What Bootstrap Is Not
Bootstrap is not a JavaScript framework. It is not React, Vue, or Angular. It does not manage application state or component logic. The JavaScript it includes is limited to powering interactive UI components like modals, dropdowns, and tooltips: things that require DOM interaction. The vast majority of Bootstrap is pure CSS.
Bootstrap is also not a design system in the way your company or project might define one. It is a starting point. A default Bootstrap site looks like a default Bootstrap site, which is a real problem in professional work. Customization is a first-class concern, and we will cover it toward the end of this reading.
Getting Bootstrap on the Page
There are two primary ways to add Bootstrap to a project: via a CDN link in your HTML, or via npm as part of a build process. Each has its place, and understanding the difference matters.
The CDN Approach
A CDN (Content Delivery Network) serves files from servers distributed around the world. Adding Bootstrap via CDN means you include a <link> tag in your HTML that points to Bootstrap's stylesheet hosted on a CDN server. No installation, no build step, no Node.js required.
This is how we will use Bootstrap in this reading activity, and it is intentional. The CDN approach lets you focus entirely on learning Bootstrap's classes and behavior without any tooling friction. Here is all you need:
<!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>
<!-- Bootstrap CSS -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
>
</head>
<body>
<!-- Your content here -->
<!-- Bootstrap JS (needed for interactive components) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
Two things to notice. First, the CSS link goes in the <head> so styles load before content renders. Second, the JavaScript bundle goes at the end of <body> so it does not block page rendering. Bootstrap's JavaScript only powers interactive components (modals, dropdowns, etc.). If you are building a static layout, you can omit it entirely.
The CDN approach loads Bootstrap from an external server rather than your own project files. In production, this has tradeoffs: you are dependent on that server being available, and you lose some control over the exact files being served. For learning and prototyping, however, CDN is the fastest path to a working setup. It also means your browser may already have Bootstrap cached from another site, making the load even faster. The npm-based approach is better for real projects, and we will look at that in a moment.
The npm Approach
In a professional project, Bootstrap is typically installed via npm and imported into a build process. This gives you more control: you can tree-shake unused styles and integrate Bootstrap into a bundler like Vite or Webpack. If you are comfortable with npm, here is what that looks like:
npm install bootstrap
Then in your JavaScript entry point:
import 'bootstrap/dist/css/bootstrap.min.css';
// Only import JS if you need interactive components
import 'bootstrap/dist/js/bootstrap.bundle.min.js';
Utility Classes: The Foundation
Before looking at Bootstrap's grid or its pre-built components, you need to understand utility classes. They are the foundation everything else builds on, and understanding them makes every other part of Bootstrap easier to learn.
A utility class does exactly one thing. mt-3 adds a top margin. text-center centers text. d-flex sets display: flex. Each class maps directly to a single CSS declaration or a small, predictable set of declarations. There is no ambiguity, no side effects, no inheritance chain to trace.
Spacing Utilities
Spacing utilities follow a consistent naming pattern: {property}{side}-{size}. The property is either m (margin) or p (padding). The side is optional and can be t (top), b (bottom), s (start/left), e (end/right), x (horizontal), or y (vertical). The size runs from 0 to 5, with auto also available for margins.
<!-- Margin top size 3 -->
<div class="mt-3"></div>
<!-- Padding on all sides size 2 -->
<div class="p-2"></div>
<!-- Horizontal margin auto (classic centering trick) -->
<div class="mx-auto"></div>
<!-- Padding top and bottom size 4 -->
<div class="py-4"></div>
The sizes 0 through 5 map to a spacing scale defined in Bootstrap. Size 3 is approximately 1rem, size 4 is 1.5rem, and size 5 is 3rem. The exact values are less important than recognizing the pattern: the naming is systematic, and once you learn the pattern, you can reason about any spacing class without looking it up.
Display and Flexbox Utilities
Bootstrap provides utility classes for every common display value. More importantly, it provides a full set of Flexbox utilities so you can build flex layouts entirely in HTML without writing any CSS.
<!-- A flex container with centered items and a gap -->
<div class="d-flex justify-content-center align-items-center gap-3">
<span>Item One</span>
<span>Item Two</span>
<span>Item Three</span>
</div>
The class names map directly to CSS properties you already know: justify-content-center applies justify-content: center, align-items-center applies align-items: center. This is Bootstrap's utility philosophy in its clearest form: the class name tells you exactly what CSS it applies.
Typography and Color Utilities
Bootstrap includes utilities for text alignment, weight, size, and color, as well as background color utilities. Colors follow Bootstrap's semantic naming system: primary, secondary, success, danger, warning, info, light, and dark.
<p class="text-center text-primary fw-bold">
Centered, primary color, bold text
</p>
<div class="bg-success text-white p-3">
Green background, white text, padding size 3
</div>
<p class="text-muted small">
Muted gray helper text
</p>
A Live Look at Utility Classes
The demo below shows several Bootstrap utility classes applied to a simple card-like element. The rendered output is on the left; the Bootstrap classes responsible for each style are labeled on the right.
View demo code
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body d-flex flex-column p-4">
<span class="badge bg-primary text-white rounded-pill mb-2">
New
</span>
<h5 class="card-title fw-bold">
Article Title
</h5>
<p class="card-text text-muted">
A short description of the article content goes here.
</p>
<button class="btn btn-primary mt-3">
Read More
</button>
</div>
</div>Notice that the rendered output above is built without a single line of custom CSS. Every style (the padding, the font weight, the badge color, the button appearance) comes from Bootstrap classes applied directly in the HTML. This is what it means to use a utility-first framework.
The Grid System
Bootstrap's grid system is one of its most important features and the reason many developers reach for Bootstrap on layout-heavy projects. It is built on Flexbox and uses a 12-column structure that can be divided in nearly any combination. Understanding it requires understanding three concepts: containers, rows, and columns.
Containers, Rows, and Columns
Every Bootstrap grid starts with a container. A container provides a centered, max-width wrapper for your content. There are two variants: container (which has a fixed max-width that steps at each breakpoint) and container-fluid (which is always 100% wide).
Inside a container, you create rows. A row is a Flexbox container that holds columns. Inside rows, you place columns. Column classes control how much of the 12-column grid each column occupies. A col-6 takes up 6 of the 12 columns (half the width). A col-4 takes up 4 columns (one third). Two col-6 columns fill a complete row.
<div class="container">
<div class="row">
<div class="col-8">
Main content (8 of 12 columns)
</div>
<div class="col-4">
Sidebar (4 of 12 columns)
</div>
</div>
</div>
You can also use col without a number, which tells Bootstrap to distribute the available space equally among all columns in that row. Three col divs in a row will each take up one third of the space automatically.
Responsive Breakpoints
The grid becomes truly powerful when you combine column classes with Bootstrap's breakpoint prefixes. Bootstrap defines five breakpoints: sm (576px and up), md (768px and up), lg (992px and up), xl (1200px and up), and xxl (1400px and up). Column classes without a breakpoint prefix apply at all screen sizes.
The key insight is that Bootstrap is mobile-first. A class without a breakpoint applies from the smallest screen up. A class with a breakpoint prefix applies from that breakpoint and up, overriding the smaller default. This means you build for mobile first and then add classes to adjust the layout at larger sizes.
<div class="container">
<div class="row">
<!-- Full width on mobile, half width on medium+, one third on large+ -->
<div class="col-12 col-md-6 col-lg-4">
Card One
</div>
<div class="col-12 col-md-6 col-lg-4">
Card Two
</div>
<div class="col-12 col-md-6 col-lg-4">
Card Three
</div>
</div>
</div>
Reading this markup, you can reason about the layout at each screen size without opening a browser. On mobile: one column per row. At md (768px+): two columns per row (since each card is 6 of 12). At lg (992px+): three columns per row (each card is 4 of 12). All of this is expressed entirely in class names.
Grid Demo
The demo below shows a three-column card layout using Bootstrap's grid. Use the buttons to see how the columns respond at different breakpoints.
View demo code
Mobile (stacked): full-width columns.
<div class="container">
<div class="row g-3">
<div class="col-12"><!-- Card content --></div>
<div class="col-12"><!-- Card content --></div>
<div class="col-12"><!-- Card content --></div>
</div>
</div>Medium (2 columns): col-md-6 from 768px up.
<div class="container">
<div class="row g-3">
<div class="col-12 col-md-6"><!-- Card content --></div>
<div class="col-12 col-md-6"><!-- Card content --></div>
<div class="col-12 col-md-6"><!-- Card content --></div>
</div>
</div>Large (3 columns): add col-lg-4 from 992px up.
<div class="container">
<div class="row g-3">
<div class="col-12 col-md-6 col-lg-4"><!-- Card content --></div>
<div class="col-12 col-md-6 col-lg-4"><!-- Card content --></div>
<div class="col-12 col-md-6 col-lg-4"><!-- Card content --></div>
</div>
</div>
The g-3 class on the row sets a gap (gutter) between columns. Bootstrap calls these gutters, and they follow the same 0–5 scale as spacing utilities.
Nesting and Offsets
Columns can be nested. You can place a new row inside a column, and Bootstrap will create a fresh 12-column grid within that column's width. This is useful for complex layouts where a section of the page needs its own internal grid structure.
<div class="container">
<div class="row">
<div class="col-8">
<!-- Nested grid inside a column -->
<div class="row">
<div class="col-6">Half of the parent column</div>
<div class="col-6">Half of the parent column</div>
</div>
</div>
<div class="col-4">Sidebar</div>
</div>
</div>
Offsets push a column to the right by a specified number of columns. offset-md-2 adds a left margin equivalent to 2 columns at the medium breakpoint and up. This is useful for centering a single column or creating asymmetric layouts without adding empty elements.
<!-- A centered 8-column layout using offset -->
<div class="row">
<div class="col-8 offset-2">
Centered content with 2 empty columns on each side
</div>
</div>
Bootstrap's grid system predates native CSS Grid and was designed to solve the same layout problems using Flexbox. If you find yourself reaching for Bootstrap's grid in a new project, it is worth asking whether native CSS Grid would serve you better. It is more powerful, more flexible, and requires no framework dependency. Bootstrap's grid remains valuable in existing Bootstrap codebases and in situations where the rest of the team is already using Bootstrap conventions.
Components
Bootstrap's components are where pre-written CSS and JavaScript come together to deliver complete, ready-to-use UI patterns. Unlike utility classes (which do one thing) or grid classes (which handle layout), components are self-contained building blocks: a modal is a modal, a navbar is a navbar, a card is a card.
The key thing to understand about Bootstrap components is that they are not magic. Every component is built from the same utility classes and semantic HTML you have already learned. A Bootstrap card is a div with specific Bootstrap classes applied. A Bootstrap button is a button or a tag with btn and a color class. Once you understand utilities, components are just named combinations of them.
Cards
The card component is one of Bootstrap's most used patterns. It provides a flexible container for content with optional header, body, footer, image, and list groups. The structure is explicit: you build the card yourself using Bootstrap's card classes.
<div class="card" style="width: 20rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card Title</h5>
<p class="card-text">
Some supporting text for the card content.
</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
Buttons
Bootstrap buttons are one of the simplest components. The btn class provides base button styling, and a color class like btn-primary or btn-outline-secondary sets the visual variant. Buttons can be applied to <button>, <a>, and <input> elements.
<button class="btn btn-primary">Primary</button>
<button class="btn btn-secondary">Secondary</button>
<button class="btn btn-outline-danger">Outline Danger</button>
<button class="btn btn-sm btn-success">Small Success</button>
<button class="btn btn-lg btn-dark">Large Dark</button>
Navigation
Bootstrap's navbar component provides a responsive navigation bar with built-in collapse behavior for mobile. The JavaScript bundle handles the toggle functionality when the viewport is narrow enough that the nav collapses to a hamburger button.
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container">
<a class="navbar-brand" href="#">My Site</a>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#mainNav"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="mainNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
</div>
</div>
</nav>
Notice the data-bs-toggle and data-bs-target attributes. These are Bootstrap's JavaScript hooks. They connect the toggle button to the collapsible nav without you writing any JavaScript. This is why the JavaScript bundle must be included in the page when using interactive components.
Modals
A modal is a dialog that overlays the page. Bootstrap's modal component requires both specific HTML structure and the JavaScript bundle. The trigger button uses data-bs-toggle="modal" and data-bs-target to connect to the modal element.
<!-- Trigger button -->
<button
class="btn btn-primary"
data-bs-toggle="modal"
data-bs-target="#myModal"
>
Open Modal
</button>
<!-- Modal structure -->
<div class="modal fade" id="myModal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal Title</h5>
<button
type="button"
class="btn-close"
data-bs-dismiss="modal"
></button>
</div>
<div class="modal-body">
<p>Modal content goes here.</p>
</div>
<div class="modal-footer">
<button
type="button"
class="btn btn-secondary"
data-bs-dismiss="modal"
>Close</button>
<button type="button" class="btn btn-primary">Save</button>
</div>
</div>
</div>
</div>
The modal's HTML structure looks verbose, but each layer has a purpose: modal is the backdrop overlay, modal-dialog centers the dialog on screen, and modal-content is the visible box. Bootstrap handles the show/hide animation, focus trapping, and keyboard dismissal (Escape key) automatically.
Bootstrap ships with many more components than covered here: accordions, alerts, badges, breadcrumbs, carousels, dropdowns, popovers, progress bars, spinners, toasts, and tooltips. The Bootstrap documentation at getbootstrap.com/docs/5.3/components is thorough and well-organized. The patterns you have learned here apply to every component: find the required HTML structure, add the Bootstrap classes, include the JavaScript bundle if interactivity is needed.
Customization: Making Bootstrap Your Own
The most common criticism of Bootstrap is that every Bootstrap site looks the same. That criticism is fair when applied to default Bootstrap, but it is not a limitation of Bootstrap itself. It is a limitation of not customizing it. Bootstrap is built to be customized, and in Bootstrap 5, CSS custom properties make that easier than ever.
Bootstrap's CSS Variables
Bootstrap 5 exposes many of its design tokens as CSS custom properties on the :root element. This means you can override them in your own stylesheet without touching Bootstrap's source files and without any build process.
:root {
/* Override Bootstrap's primary color */
--bs-primary: #6d28d9;
--bs-primary-rgb: 109, 40, 217;
/* Override border radius */
--bs-border-radius: 0.75rem;
--bs-border-radius-lg: 1rem;
/* Override font family */
--bs-body-font-family: 'Your Font', sans-serif;
/* Override body background and text */
--bs-body-bg: #f8f7ff;
--bs-body-color: #1a1a2e;
}
Overriding --bs-primary alone is not quite enough. Bootstrap also uses --bs-primary-rgb for generating transparent variants and focus rings. Always update the RGB version alongside the hex value. You can find the RGB values for any hex color using browser DevTools or any color picker tool.
Component-Level Overrides
Many Bootstrap components also expose their own CSS variables, scoped to that component. This lets you customize a single component without affecting Bootstrap's global variables. For example, the card component exposes --bs-card-bg, --bs-card-border-color, and --bs-card-border-radius.
/* Override card appearance globally */
.card {
--bs-card-bg: #1e1e2e;
--bs-card-border-color: #313244;
--bs-card-border-radius: 1rem;
}
/* Override button appearance for a specific context */
.hero-section .btn-primary {
--bs-btn-bg: #6d28d9;
--bs-btn-border-color: #6d28d9;
--bs-btn-hover-bg: #5b21b6;
}
Writing Your Own Classes on Top
You are not limited to Bootstrap's variables. Your own stylesheet loads after Bootstrap, so any CSS you write will override Bootstrap's defaults. You can add entirely custom classes, extend Bootstrap components with your own modifiers, and apply your brand's design system on top of Bootstrap's structural foundation.
/* Add a custom card variant Bootstrap does not provide */
.card-feature {
border: none;
box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.15);
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
}
/* Override Bootstrap's navbar to use your brand colors */
.navbar {
background-color: var(--your-brand-color) !important;
}
You will sometimes need !important when overriding Bootstrap's component classes, since Bootstrap's specificity can be difficult to beat with plain class selectors. Use it deliberately, document why it is there, and prefer CSS variable overrides whenever Bootstrap exposes them. They do not require !important and are easier to maintain.
The measure of good Bootstrap customization is that a user should not be able to tell you used Bootstrap at all. If your color palette, typography, border radii, and component styling reflect your project's design rather than Bootstrap's defaults, you have succeeded. Bootstrap's job is to handle the structural and interactive complexity; your job is to make it look like your design.
Try It Yourself
The best way to understand Bootstrap is to use it. Create a plain HTML file, add the Bootstrap CDN links from the Getting Started section, and try building the following:
-
A three-column card layout that stacks to one column on mobile using
col-12 col-md-4. Each card should have an image, a title, some text, and a button. -
A navbar with your name as the brand and three navigation links. Make it collapse on mobile using the
navbar-expand-lgpattern from the components section. -
Override Bootstrap's
--bs-primaryvariable in a<style>tag and observe how all primary-colored elements update. Try a color far from Bootstrap's default blue.
You do not need to submit this work. The goal is to get Bootstrap running in a browser and to feel the workflow of applying classes and seeing immediate visual results. Build something quick and ugly. The point is the practice, not the polish.
What Comes Next
You have now seen Bootstrap's core ideas: utility classes that apply single CSS properties, a 12-column grid system built on Flexbox, pre-built components that compose utilities into complete UI patterns, and CSS variable overrides that let you customize the framework without touching its source.
Bootstrap represents one answer to a fundamental question in CSS development: how do you build consistent, responsive UIs quickly without writing everything from scratch? It is not the only answer, and it is not always the right answer, but it is a widely used, well-documented, and battle-tested one. Understanding it makes you a more versatile developer, regardless of whether you choose to use it on your own projects.
Later in this unit, you will encounter Tailwind CSS, which takes a different approach to the same question. Having Bootstrap as a point of comparison will make Tailwind's philosophy much easier to understand, and the contrast between the two will sharpen your thinking about CSS architecture more broadly.