Bootstrap fundamentals
Bootstrap Setup & Structure
Wire Bootstrap into a clean HTML5 page: correct document order, CSS and JavaScript includes, and a starter template you can reuse for every lesson in this series.
A predictable project structure saves time—you always know where the grid, components, and scripts live, whether you load assets from a CDN or build from source with npm.
Document shell
Valid HTML5, language, viewport, and title before any Bootstrap class.
CSS then content
Link Bootstrap’s stylesheet in <head>; add your overrides after.
JS at the end
Load bootstrap.bundle.min.js before </body> or use defer.
What “structure” means here
Structure is the order and placement of markup and assets so Bootstrap’s CSS can style the page and its JavaScript can enhance components (dropdowns, modals, tabs) without errors. It is not about folder names alone—though those matter in build tools—but about a minimal, correct shell every page follows.
Once this shell is stable, you copy it for each new screen and focus on grid, components, and content instead of debugging missing scripts or wrong load order.
Parts of a Bootstrap page
Each part has a role. Skipping the viewport meta tag, for example, breaks mobile layout; loading script in the wrong place can leave components uninitialized.
| Part | Purpose | Typical placement |
|---|---|---|
<!DOCTYPE html> |
Puts the document in standards mode so CSS layout behaves predictably. | First line of the file. |
<html lang="..."> |
Sets document language for screen readers and SEO. Optional data-bs-theme for light/dark. |
Root element wrapping head and body. |
| Viewport meta | Maps CSS pixels to device width so responsive breakpoints work. | Inside <head>, early. |
| Bootstrap CSS | Loads layout, components, utilities, and variables. | <head> via <link>. |
| Your custom CSS | Overrides or extends Bootstrap; loads after Bootstrap so it wins the cascade. | <head>, after Bootstrap link. |
| Page markup | Containers, rows, columns, components, and content. | <body>. |
| Bootstrap JS | Powers interactive behaviors; bundle includes Popper for positioning. | End of <body>, or defer in head. |
Starter template (CDN)
The snippet below is a complete starting point for static HTML tutorials. Replace the title and add your markup inside <body>.
The version numbers in the URLs should match the docs you are following—here they align with Bootstrap 5.3 used across this hub.
bootstrap.bundle.min.js unless you load Popper yourself. The “bundle” build includes Popper for dropdowns, tooltips, and popovers.
<!DOCTYPE html>
<html lang="en" data-bs-theme="light">
<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.2/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<h1 class="p-4">Hello, Bootstrap</h1>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>JavaScript files: bundle vs slim
| File | Includes Popper? | When to use |
|---|---|---|
bootstrap.bundle.min.js |
Yes (bundled). | Default choice for tutorials and most sites—dropdowns, modals with positioning, tooltips, and popovers work without extra scripts. |
bootstrap.min.js |
No—you must add Popper separately if you need those components. | Advanced setups where you import Popper via npm or want tighter control over versions. |
CDN vs npm / build tools
CDNs are ideal for learning, demos, and simple deployments: paste two tags and you are done. Production teams often switch to npm (or Yarn/pnpm) so Sass variables, PurgeCSS, or tree-shaking reduce unused CSS.
| Approach | Strengths | Trade-offs |
|---|---|---|
| CDN | No install step; fast to teach; browser cache across sites. | Less control over which Bootstrap partials compile; offline editing needs network or local copies. |
| npm + bundler | Custom Sass theme, autoprefixer, minification, and version pinning in package.json. |
Requires Node, build config, and a deploy pipeline. |
After npm install bootstrap, source files live under node_modules/bootstrap/; your bundler imports SCSS or pre-built CSS from there. Follow the official “Webpack”, “Vite”, or “Parcel” guides when you reach that stage.
data-bs-theme on <html>
Bootstrap 5.3+ supports color modes. Setting data-bs-theme="light" or "dark" on the root element switches component variables that respect the theme API.
This hub uses data-bs-theme="light" by default on tutorial pages so screenshots and examples stay consistent; you can toggle dark mode later with a small script that updates the attribute and optionally persists the user choice in localStorage.
Quick checklist
| Check | Why it matters |
|---|---|
| Viewport meta present | Without it, mobile browsers may assume a desktop width and break responsive layouts. |
| Bootstrap CSS before your CSS | Lets your rules override Bootstrap predictably. |
| One Bootstrap JS include | Duplicate initialization can cause odd behavior; include bundle once. |
Script after markup (or defer) |
Ensures the DOM exists before components enhance it. |