Skip to content

Bootstrap Installation & Setup — CDN, npm, Build Tools

DodaTech Updated 2026-06-28 5 min read

In this tutorial, you will learn about Bootstrap Installation & Setup. We cover key concepts, practical examples, and best practices to help you master this topic.

Setting up Bootstrap 5 correctly requires linking the CSS and JavaScript files in the right order, adding responsive meta tags, and verifying the setup works before building pages.

What You'll Learn

You will learn three ways to install Bootstrap 5 (CDN, npm, and build tools), understand the required HTML boilerplate, and verify that Bootstrap is working correctly in your browser.

Why It Matters

A correct installation prevents layout issues, missing styles, and broken JavaScript components. DodaTech's internal tools use Bootstrap via npm with Sass customization, and every new project starts with this setup.

Real-World Use

Doda Browser's settings pages use Bootstrap installed via npm and customized with Sass variables for brand colors. The same setup pattern applies to any Bootstrap project.

flowchart LR
    A[Bootstrap Overview] --> B[CDN Setup]
    A --> C[npm Setup]
    A --> D[Build Tools]
    B --> E[Boilerplate HTML]
    C --> E
    D --> E
    E --> F[Verification]
    style B fill:#7952b3,stroke:#563d7c,color:#fff
    style C fill:#7952b3,stroke:#563d7c,color:#fff
    style F fill:#22c55e,stroke:#16a34a,color:#fff

Method 1: CDN (Quickest for Learning)

The CDN (Content Delivery Network) approach loads Bootstrap from a remote server. No installation required.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap 5 CDN Setup</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container mt-5">
    <h1>Bootstrap 5 Works!</h1>
    <button class="btn btn-primary">Click Me</button>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Expected output: A page with a heading and a blue primary button styled by Bootstrap.

The bootstrap.bundle.min.js file includes both Bootstrap's JavaScript and Popper.js (required for tooltips and popovers). If you do not need Popper, use bootstrap.min.js instead.

Method 2: npm (For Real Projects)

npm installation gives you local files that you can customize with Sass.

npm init -y
npm install bootstrap@5.3.3

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap 5 npm Setup</title>
  <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
</head>
<body>
  <div class="container mt-5">
    <div class="alert alert-success">
      Bootstrap 5 installed via npm!
    </div>
  </div>
  <script src="node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Expected output: A page with a green success alert indicating Bootstrap loaded correctly.

For production, use a build tool to bundle only the Bootstrap components you need, reducing file size.

Method 3: Vite + Sass (Advanced)

For maximum customization, use a build tool with Sass.

npm create vite@latest my-bootstrap-app -- --template vanilla
cd my-bootstrap-app
npm install bootstrap@5.3.3

Create src/styles.scss:

$primary: #7c3aed;
$success: #059669;

@import "bootstrap/scss/bootstrap";

In src/main.js:

import "bootstrap";
import "./styles.scss";

Expected output: A Vite project where Bootstrap is compiled with custom brand colors (purple primary, green success).

Required Meta Tags

The viewport meta tag is essential for responsive Bootstrap layouts:

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

Without this tag, Bootstrap's responsive breakpoints will not work on mobile devices. The page will render at desktop width and users will need to pinch-zoom to read content.

Verification Checklist

After installation, confirm Bootstrap is working:

  1. Open your page in a browser
  2. Inspect any element and check that Bootstrap CSS properties appear in the computed styles panel
  3. Open the browser console and type bootstrap — it should show the Bootstrap object
  4. Check that the <meta name="viewport"> tag is present
  5. Resize the browser window and verify that columns stack responsively

Common Mistakes

1. Missing Viewport Meta Tag

Without <meta name="viewport" content="width=device-width, initial-scale=1.0">, mobile devices render the page at a desktop width, breaking the responsive grid.

2. CSS and JavaScript File Order

Always load Bootstrap CSS in the <head> and JavaScript at the end of <body>. Placing scripts in the head blocks rendering.

3. Loading Bootstrap Multiple Times

Including Bootstrap from both CDN and npm causes duplicate styles. Use a single source.

4. Forgetting Popper.js for Tooltips

Tooltips and popovers require Popper.js. Use bootstrap.bundle.min.js which includes it, or add Popper separately.

5. Using an Outdated Version

Bootstrap 4 and Bootstrap 5 have different class names and components. If you load Bootstrap 4 classes with Bootstrap 5 CSS, they might not work.

Practice Questions

  1. What does the viewport meta tag do for Bootstrap layouts? It ensures the page matches the device width, enabling responsive breakpoints on mobile.

  2. What is the difference between bootstrap.min.js and bootstrap.bundle.min.js? The bundle includes Popper.js, which is required for tooltips and popovers.

  3. Why should Bootstrap CSS be loaded in the <head> and JavaScript at the end of <body>? CSS in the head prevents FOUC (Flash of Unstyled Content). JavaScript at the end does not block rendering.

  4. How do you customize Bootstrap's theme colors when using npm? Override Sass variables (like $primary) before importing Bootstrap's Sass files.

  5. What happens if you omit the container class in a Bootstrap layout? Grid rows will overflow the viewport because containers provide the responsive max-width and padding.

Challenge

Create a Bootstrap project using Vite that customizes the primary color to an orange shade and the border-radius to a larger value. Include a button, an alert, and a card that show the customized theme.

FAQ

Can I use Bootstrap with a framework like React?

Yes. Use react-bootstrap for React components or import Bootstrap's CSS classes directly. Both work well.

Do I need to download all of Bootstrap if I only use a few components?

Use a build tool with Sass to import only the components you need. This reduces the final CSS file size significantly.

How do I update Bootstrap from an older version?

Replace the CDN links with the new version or run npm install bootstrap@latest. Check the migration guide for breaking changes.

Should I use the minified or unminified version?

Use minified (.min.css, .min.js) for production. Use unminified during development so you can read the source in browser devtools.

Does Bootstrap work without JavaScript?

Most CSS features work without JavaScript (grid, buttons, cards, alerts). Interactive components like modals, carousels, and toasts require JavaScript.

Mini Project

Set up a Bootstrap 5 project from scratch using npm. Create an HTML page with a container, a responsive row with three columns, and a Bootstrap button. Verify all components render correctly by testing in your browser.

What's Next

With Bootstrap installed, learn the Grid System to create responsive layouts. Then explore Columns and Gutters to fine-tune spacing.

← Previous What Is Bootstrap? — Framework Overview Next → Bootstrap Grid System — Containers, Rows, and Columns

Built by the developers of DodaTech

Doda Browser, DodaZIP & Durga Antivirus Pro

Home Browse Bootstrap