Setup: CDN vs npm

Prev Next

There are two normal ways to get Bootstrap 5 into a project: drop in a couple of CDN tags for a page you want working in the next thirty seconds, or install it via npm when you already have a build tool (Vite, webpack, Parcel) and want to customize its Sass. We'll set up the very first page of TrailMap both ways.

Option 1: CDN — Fastest Way to Start

Add the compiled CSS in <head>, and the compiled JS right before the closing </body> tag. This is all TrailMap's homepage needs to get every Bootstrap 5 component working, no npm or build step required:

<!-- in <head> -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- right before </body> -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

Note: the jsdelivr URL pattern is always bootstrap@{version}/dist/{css|js}/{file}. Pin an exact version number (like 5.3.3) rather than a loose range, so TrailMap doesn't silently change appearance when a new Bootstrap release ships.

Option 2: npm — For a Build-Tool Workflow

If TrailMap already has a bundler, install the package instead so you can import only the Sass partials you need, or override Bootstrap's Sass variables before compiling:

# install
npm install bootstrap@5.3.3

// then in your JS entry file
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.bundle.min.js';

Later in this track, the Sass Customization lesson shows how to import Bootstrap's source .scss files instead of the compiled CSS, so you can change variables like $primary before compiling — something the CDN approach can't do.

The Viewport Meta Tag Is Required

Bootstrap 5's entire grid and its responsive utilities are mobile-first and rely on this tag being present. Without it, phones render the page at desktop width and every breakpoint behaves incorrectly:

<meta name="viewport" content="width=device-width, initial-scale=1">

Bundle vs Non-Bundle JS

Bootstrap 5 ships two JavaScript builds. Tooltips, popovers, and dropdowns depend on the third-party positioning library Popper — the bundle file includes it, the plain file doesn't:

File	Includes Popper?	Use when...
`bootstrap.bundle.min.js`	Yes	You want tooltips/popovers/dropdowns to work with one script tag (most projects)
`bootstrap.min.js`	No	Popper is already loaded separately, or you don't use any component that needs it

Putting It Together: TrailMap's Starter Page

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>TrailMap</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <h1>Find your next hike</h1>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Next: With Bootstrap 5 loaded, Containers covers the very first layout decision every page makes.

Prev Next