There are two main ways to add Bootstrap 5 to your project — using a CDN (Content Delivery Network) or installing it via npm. For beginners, the CDN method is the easiest and fastest way to get started with zero configuration.
A CDN delivers Bootstrap files directly from the internet — no download or installation required. You simply include two links in your HTML file and you are ready to go.
Place this <link> tag inside your HTML <head> section, before any of your own stylesheets:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css">Place this <script> tag just before the closing </body> tag. This enables interactive components like modals, dropdowns, and tooltips:
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js"></script>bootstrap.bundle.min.js file already includes Popper.js (needed for tooltips and dropdowns), so you do not need to include it separately.
Copy and paste this complete template to start any Bootstrap project instantly. This is the recommended boilerplate:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>My Bootstrap Project</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css">
</head>
<body>
<div class="container mt-4">
<h1 class="text-primary">Hello, Bootstrap 5!</h1>
<p class="lead">Bootstrap is up and running.</p>
<button class="btn btn-success">Click Me</button>
</div>
<!-- Bootstrap JS Bundle (includes Popper) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>If you are using a build tool like Webpack or Vite, you can install Bootstrap as a package using npm (Node Package Manager).
Run this command in your project terminal:
npm install bootstrap@5.2.0In your main CSS or SCSS file, import Bootstrap's stylesheet:
/* Import Bootstrap CSS */
@import "bootstrap/dist/css/bootstrap.min.css";In your main JavaScript file, import Bootstrap's JavaScript bundle:
// Import all Bootstrap JS components
import 'bootstrap/dist/js/bootstrap.bundle.min.js';Bootstrap is built for mobile-first responsive design. For it to work correctly on phones and tablets, you must include the viewport meta tag inside your <head>:
<meta name="viewport" content="width=device-width, initial-scale=1.0">width=device-width — sets the page width to match the device screen widthinitial-scale=1.0 — sets the initial zoom level to 100%Without this tag, Bootstrap's responsive grid and breakpoints will not work on mobile devices.
| Feature | CDN | npm |
|---|---|---|
| Setup | Zero — just add a link | Requires Node.js & npm |
| Best for | Beginners, quick prototypes | Production apps, build tools |
| Customisation | Limited | Full SCSS customisation |
| Works offline | No | Yes |
| Performance | Fast (via CDN cache) | Optimised (tree-shaking) |
bootstrap.bundle.min.js already includes Popper.js — do not add Popper separately