back to course
Lesson 02 / 504%· free preview
Bootstrap 5 Basics2/32
BS5 Get Started
Two ways to add Bootstrap: CDN (fastest) or download/npm. Always include the CSS in <head> and the bundled JS before </body>.
Install via CDN (recommended for learners)
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>
The bundle version includes Popper for tooltips/popovers — use it unless you have a reason not to.
Install via npm
bashnpm install bootstrap@5.3.3
Then import in your JS entry: import 'bootstrap/dist/css/bootstrap.min.css'; import 'bootstrap';
Required HTML5 doctype + viewport meta
html<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>My Site</title> </head>
Without the viewport meta tag, Bootstrap's responsive breakpoints won't work on mobile.
Real-life Example
The 30-second CDN install is how every CodePen, JSFiddle, and bootcamp demo loads Bootstrap.
Important. Place CSS in
<head>and the JS bundle BEFORE</body>— putting JS at the top blocks the page paint and breaksdata-bs-*triggers.
Key Takeaways
- 3 ways to install — CDN, npm, manual download
- CDN is fastest for learning + demos
- npm + Sass is the production path (custom builds)
- Always pair
bootstrap.min.csswithbootstrap.bundle.min.js
Interview Questions
Practice Questions
- Set up a blank Bootstrap project with a CDN link + a button.
- Switch the page to use the npm install —
npm install bootstrapand import via Sass.
Pro Tips
- Use
viewportmeta tag — without it Bootstrap's mobile-first styles don't kick in correctly. - Pin the Bootstrap version (
5.3.2notlatest) — keeps your build deterministic.
Example — Run in Compiler
html<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"> <title>Bootstrap Demo</title> </head> <body> <div class="container my-5"> <h1 class="text-primary">Hello, Bootstrap!</h1> <button class="btn btn-success">Click me</button> </div> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script> </body> </html>
Renders a centered container with a blue heading and a green 'Click me' button.
AI-powered recap
Quick recap quiz?
We'll generate 5 MCQs from this lesson and check your understanding instantly. Takes ~30 seconds.
Ready to move on?
// example library
Want more hands-on snippets in Bootstrap?
Browse 1 runnable example · across 1 chapter · short, copy-paste-friendly · grouped by topic
// interactive coach
Practice this in the Bootstrap Coach
Live HTML sandbox with an AI mentor (Gemini 3-Flash) — edit markup, get instant feedback.
// feedback.matters()
Did this lesson help you?