The fastest way to start with Bootstrap 5 is a CDN link — no npm, no build tools, just two lines of HTML. Here's exactly what to copy and why each part matters.
The Complete Bootstrap 5 CDN Setup
This is the full starter HTML template. Add it to any .html file and you're done:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My Bootstrap 5 Project</title>
<!-- Bootstrap 5 CSS -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
crossorigin="anonymous"
>
</head>
<body>
<div class="container">
<h1 class="mt-4">Hello Bootstrap 5</h1>
<p class="text-muted">Bootstrap is working.</p>
<button class="btn btn-primary">Click me</button>
</div>
<!-- Bootstrap 5 JS Bundle (includes Popper) -->
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc4s9bIOgUxi8T/jzmaBRO1HGqm3/MA4EVM51L2a2xU"
crossorigin="anonymous"
></script>
</body>
</html>
What Each Link Does
The CSS link goes in <head>. It loads Bootstrap's stylesheet — the grid, utility classes, component styles, everything visual. This is the only required link.
The JS bundle goes before </body>. It loads Bootstrap's JavaScript plus Popper.js in a single file. You need this for any interactive component — modals, dropdowns, tooltips, toasts, off-canvas panels, popovers and carousels.
The integrity and crossorigin Attributes
These two attributes are Subresource Integrity (SRI) checks:
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
crossorigin="anonymous"
integrity is a hash of the file. The browser verifies the downloaded file matches this hash before running it. If the CDN was compromised and served a different file, the hash wouldn't match and the browser would block it.
crossorigin="anonymous" tells the browser to make a CORS request without credentials. Required when using SRI on cross-origin resources.
These are optional but good practice for security. Leave them out if you want shorter markup.
Just the Links (No SRI)
If you want the minimal version without SRI hashes:
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- JS bundle only -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
CSS Only (No JavaScript)
If you don't need any interactive components — just the grid, utilities and static component styles — skip the JS entirely:
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
This is perfectly valid for static landing pages, email templates and prototypes where you're not using dropdowns or modals.
Alternative CDN Providers
jsDelivr is what Bootstrap's own docs use, but these also work:
<!-- cdnjs -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/js/bootstrap.bundle.min.js"></script>
<!-- unpkg -->
<link href="https://unpkg.com/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://unpkg.com/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
All three serve identical minified files. jsDelivr has the best performance and uptime track record.
How to Get the Latest Version Link
Bootstrap releases updates regularly. Don't hardcode a version you found in a tutorial — get the current link from the source:
- Go to getbootstrap.com
- Click "Get started"
- Copy the CDN links from the Quick Start section
They always show the latest stable version.
When to Use CDN vs npm
Use CDN when:
- Prototyping or learning
- Static HTML site with no build step
- Adding Bootstrap to an existing project quickly
- HTML email templates
Use npm when:
- You want to customise Bootstrap's Sass variables (
$primary,$border-radius, etc.) - You're using Angular, React or Vue with a bundler
- You want to import only specific Bootstrap components to reduce CSS size
- You have a Vite or Webpack project already
For anything beyond a static prototype, npm install bootstrap and importing via Sass gives you much more control. Check the Bootstrap 5 with Vite tutorial for that setup.
Verify It's Working
After adding the CDN links, add a Bootstrap button and check it styles correctly:
<button class="btn btn-primary">Primary Button</button>
<button class="btn btn-outline-danger">Outline Danger</button>
If you see styled buttons, Bootstrap CSS is loading. Open the browser console — no errors means JS is loaded too. If you see a 404, double-check the version number in your CDN URL.
Frequently Asked Questions
Need a Full Bootstrap 5 Admin Dashboard?
Get a complete Angular 21 + Bootstrap 5 dashboard with 50+ components — built by the same team behind BootstrapPlanet.
Browse Templates →Use code FIRST30 for 30% off your first purchase.