Introduction

Before you can use Bootstrap effectively, you must set it up correctly. In this chapter, we will cover the two most common professional methods: using a CDN (Content Delivery Network) for speed and simplicity, and using NPM for scalable, custom projects.

Method 1: CDN (Fastest & Easiest)

This method is perfect for beginners, prototypes, and small projects. You simply link to the Bootstrap files hosted on a public server.

Step 1: Add CSS

Place this <link> tag inside your <head>:

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

Step 2: Add JavaScript

Place this <script> tag right before the closing </body> tag:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

Note: We use the "bundle" version because it includes Popper.js, which is required for dropdowns and tooltips.

Method 2: NPM (Professional Setup)

Use this method for large projects, build systems (Webpack/Vite), or when you need to customize Bootstrap significantly via Sass.

Installation

npm install bootstrap

Usage in SCSS

// Import entire Bootstrap framework
@import "bootstrap/scss/bootstrap";

Usage in JavaScript

// Import JS bundle
import 'bootstrap/dist/js/bootstrap.bundle.min.js';

Best Practices

Never edit Bootstrap files directly. Always use a separate custom CSS file or SCSS overrides.
Load Custom CSS Last. Ensure your custom.css is linked after Bootstrap so your overrides work.
Use the Bundle. Use bootstrap.bundle.min.js to ensure all interactive components work out of the box.

Chapter Summary

In this chapter, you learned:

How to set up Bootstrap using a CDN for quick starts.
How to install Bootstrap via NPM for professional workflows.
The importance of loading order (Bootstrap first, Custom CSS second).

Next, we will dive into the most powerful part of Bootstrap: The Grid System.

Bootstrap Setup