LearnAI ToolsCareerPractice BuildsPlayContact
Lesson 417 min read

Installing Bootstrap (CDN & npm)

Learn the two most common ways to add Bootstrap to a project: linking it from a CDN, and installing it as an npm package.

Introduction

Before you can use any Bootstrap class or component, Bootstrap's CSS and JavaScript files need to be loaded into your page. There are two common ways to do this: linking directly to a CDN (Content Delivery Network) hosted copy of Bootstrap, or installing Bootstrap locally through npm as part of a build process. This lesson walks through both.

What You Will Learn
  • How to add Bootstrap to a plain HTML page using a CDN link.
  • How to install Bootstrap with npm.
  • How to import Bootstrap's CSS and JS in a bundled project.
  • When to choose the CDN method versus the npm method.

Method 1: The CDN

A CDN is a network of servers that host a copy of a file, like Bootstrap's CSS or JavaScript, so it can be loaded quickly from a server close to the visitor. Using the CDN is the fastest way to get started with Bootstrap because it requires no build tools, no installation, and no local files. You simply add a `<link>` tag for the CSS and a `<script>` tag for the JavaScript.

Linking CSS and JS from the CDN

The Bootstrap CSS file should be linked inside the `<head>` of your HTML document, so styles are ready before the page renders. The Bootstrap JavaScript bundle, which includes Popper.js for positioning tooltips and dropdowns, should be placed right before the closing `</body>` tag so it does not block the page from loading.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Bootstrap Page</title>
  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>


  <h1 class="text-center mt-5">Hello, Bootstrap!</h1>
  <button class="btn btn-primary">Click Me</button>


  <!-- Bootstrap JS Bundle (includes Popper) -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
What Renders

Click Run to see what this code prints.

Meta Viewport Tag

The `<meta name="viewport">` tag is required for Bootstrap's responsive layout to work correctly on mobile devices. Without it, mobile browsers render the page as a shrunken desktop view instead of a mobile-optimized one.

Method 2: Installing via npm

If your project uses a build tool such as Vite, webpack, or a framework like React or Next.js, installing Bootstrap through npm is usually the better fit. It lets you import only the parts of Bootstrap you need, bundle it alongside your own code, and manage its version through your `package.json` file like any other dependency.

npm install bootstrap

Using the npm Package

Once installed, you import Bootstrap's compiled CSS (and optionally its JavaScript) directly into your project's main entry file. In a typical bundler-based project, that looks like this.

// main.js or index.js
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.bundle.min.js';
Result

Click Run to see what this code prints.

CDN vs npm: Which Should You Use?

ScenarioRecommended Method
Quick prototype, single HTML file, no build toolsCDN
Learning Bootstrap for the first timeCDN
React, Vue, Next.js, or webpack-based projectnpm
Need to customize Bootstrap's Sass variablesnpm
Offline development environmentnpm

Common Mistakes

Avoid These Mistakes
  • Forgetting to include the JavaScript bundle, so components like dropdowns, modals, and collapsible navbars silently fail to work.
  • Placing the `<script>` tag in the `<head>` instead of before `</body>`, which can slow down page rendering.
  • Mixing a CDN link with an npm-installed copy in the same project, which can cause conflicting versions.
  • Forgetting the responsive `<meta viewport>` tag, breaking the mobile layout.

Best Practices

  • Use the CDN for quick demos, learning exercises, and simple static sites.
  • Use npm for any project that already has a JavaScript build process.
  • Always load the CSS in the `<head>` and the JS near the end of `<body>`.
  • Pin a specific Bootstrap version number in your CDN links or package.json to avoid unexpected breaking changes.

Frequently Asked Questions

No, if you use the `bootstrap.bundle.min.js` file, Popper.js is already included. Use the plain `bootstrap.min.js` file only if you are loading Popper separately.

Yes. If your page only needs layout, typography, and static components like buttons and alerts, you can skip the JS file entirely and use CSS only.

Reputable CDNs like jsDelivr are fast and reliable for production use, but many teams still prefer npm so Bootstrap is bundled with the rest of their code and does not depend on an external service being available.

Key Takeaways

  • Bootstrap can be added to a project either through a CDN link or via npm installation.
  • The CDN method requires a `<link>` tag for CSS and a `<script>` tag for JS, with no build tools.
  • The npm method installs Bootstrap as a dependency you import into your bundled JavaScript.
  • Always include the meta viewport tag so Bootstrap's responsive features work on mobile.

Summary

Whether you choose the CDN or npm, the result is the same: Bootstrap's CSS and JavaScript become available to your page. In the next lesson, you will look inside the actual Bootstrap package to understand what all those CSS and JS files are for.

Next Lesson →

Bootstrap File Structure