Skip to main content
Bootstrap
CHAPTER 02 Beginner

Installing Bootstrap and Environment Setup

Updated: May 18, 2026
5 min read

# CHAPTER 2

Installing Bootstrap and Environment Setup

1. Chapter Introduction

Getting Bootstrap into a project takes less than 2 minutes. There are three methods: CDN (copy-paste two lines), npm (for build-tool projects), or local download (for offline work). This chapter covers all three and gets you writing Bootstrap HTML immediately.

2. Learning Objectives

  • Add Bootstrap via CDN (quickest method).
  • Install Bootstrap via npm.
  • Set up VS Code for Bootstrap development.
  • Understand which method to use when.
  • Write a complete Bootstrap starter HTML file.

3. Method 1: Bootstrap CDN (Recommended for Beginners)

Copy these two lines into your HTML:
html
1234567891011121314151617181920212223 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <!-- REQUIRED: Responsive viewport tag -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>My Bootstrap App</title>

  <!-- Bootstrap CSS — place in <head> -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" />
</head>
<body>

  <div class="container mt-5">
    <h1 class="text-primary">Hello, Bootstrap!</h1>
    <p class="lead">My first Bootstrap project.</p>
    <button class="btn btn-primary">Click Me</button>
  </div>

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

When to use CDN: Quick prototypes, learning, projects that need no build step.

4. Method 2: Bootstrap via npm

bash
12345 
# Install Bootstrap in your project
npm install bootstrap

# For Sass customization, also install sass
npm install -D sass
javascript
123 
// Import in your main JS/TS file (e.g., main.js)
import &#039;bootstrap/dist/css/bootstrap.min.css&#039;;
import &#039;bootstrap/dist/js/bootstrap.bundle.min.js&#039;;
scss
12 
// Import in your main SCSS file for Sass customization
@import "bootstrap/scss/bootstrap";

When to use npm: Vite, Webpack, React, Angular, or any build-tool project.

5. Method 3: Local Download

bash
12 
# Download from getbootstrap.com
# Extract and link locally
html
12 
<link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css" />
<script src="./bootstrap/js/bootstrap.bundle.min.js"></script>

When to use local: Offline development, intranet apps, air-gapped environments.

6. VS Code Setup

Install these extensions for the best Bootstrap experience:
  • Bootstrap 5 Quick Snippets — type b5- to get autocomplete for components.
  • Live Server — right-click HTML file → "Open with Live Server" for instant preview with auto-refresh.
  • HTML CSS Support — class name autocompletion.
  • Prettier — consistent code formatting.

7. Bootstrap Starter Template

html
123456789101112131415161718192021222324 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta name="description" content="Your page description" />
  <title>Page Title | Site Name</title>
  <link rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" />
  <!-- Bootstrap Icons (optional) -->
  <link rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css" />
  <!-- Custom CSS — MUST come after Bootstrap -->
  <link rel="stylesheet" href="./css/style.css" />
</head>
<body>

  <!-- Your content here -->

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  <!-- Custom JS — MUST come after Bootstrap JS -->
  <script src="./js/main.js"></script>
</body>
</html>

8. Common Mistakes

  • Missing viewport meta tag: Bootstrap's responsive breakpoints require this. Without it, the mobile layout won't activate.
  • Loading CSS after Bootstrap: Your custom CSS must come AFTER the Bootstrap CDN link, otherwise Bootstrap will override your styles.
  • Using Bootstrap JS without the bundle: bootstrap.min.js requires Popper.js separately. Use bootstrap.bundle.min.js which includes Popper.

9. MCQs with Answers

Question 1

What is the quickest way to add Bootstrap to a project?

Question 2

What viewport meta tag is required for Bootstrap responsive design?

Question 3

What does bootstrap.bundle.min.js include?

Question 4

For a Vite/Webpack project, what is the correct Bootstrap installation method?

Question 5

Where should the Bootstrap CSS link go?

Question 6

Where should Bootstrap JS go?

Question 7

Which VS Code extension gives Bootstrap class autocomplete snippets?

Question 8

What command installs Bootstrap via npm?

Question 9

Your custom CSS should be linked?

Question 10

What CSS preprocessor does Bootstrap use for its source files?

10. Interview Questions

  • Q: What are the three ways to include Bootstrap in a project? When would you use each?
  • Q: Why must the viewport meta tag be included for Bootstrap to work correctly?

11. Summary

Bootstrap setup is a 60-second task with CDN, making it the fastest UI framework to start with. For production projects, npm installation enables Sass customization and tree-shaking. The key requirements are: viewport meta tag, CSS in <head>, and JS bundle before </body>.

12. Next Chapter Recommendation

In Chapter 3: Bootstrap Grid System, we master the 12-column responsive grid that is the foundation of every Bootstrap layout — the single most important skill in Bootstrap development.

Finish this Chapter

Save your progress on your learning path and prepare for coding interview challenges.

Previous Chapter Introduction to Bootstrap
Next Chapter Bootstrap Grid System

Discussion

Join the discussion

Log in or create a free account to participate.

Sort: ·

Explore More

📖 Related Tutorials 6

❓ Related Quizzes 1