Bootstrap Get Started

There are two main ways to add Bootstrap 5 to your project — using a CDN (Content Delivery Network) or installing it via npm. For beginners, the CDN method is the easiest and fastest way to get started with zero configuration.

Method 1: Using a CDN (Recommended for Beginners)

A CDN delivers Bootstrap files directly from the internet — no download or installation required. You simply include two links in your HTML file and you are ready to go.

Step 1 — Add Bootstrap CSS in <head>

Place this <link> tag inside your HTML <head> section, before any of your own stylesheets:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css">

Step 2 — Add Bootstrap JS before </body>

Place this <script> tag just before the closing </body> tag. This enables interactive components like modals, dropdowns, and tooltips:

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js"></script>

Note: The bootstrap.bundle.min.js file already includes Popper.js (needed for tooltips and dropdowns), so you do not need to include it separately.

Complete Bootstrap 5 Starter Template

Copy and paste this complete template to start any Bootstrap project instantly. This is the recommended boilerplate:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>My Bootstrap Project</title>

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

    <div class="container mt-4">
        <h1 class="text-primary">Hello, Bootstrap 5!</h1>
        <p class="lead">Bootstrap is up and running.</p>
        <button class="btn btn-success">Click Me</button>
    </div>

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

Method 2: Installing via npm

If you are using a build tool like Webpack or Vite, you can install Bootstrap as a package using npm (Node Package Manager).

Step 1 — Install Bootstrap

Run this command in your project terminal:

npm install bootstrap@5.2.0

Step 2 — Import Bootstrap CSS

In your main CSS or SCSS file, import Bootstrap's stylesheet:

/* Import Bootstrap CSS */
@import "bootstrap/dist/css/bootstrap.min.css";

Step 3 — Import Bootstrap JS

In your main JavaScript file, import Bootstrap's JavaScript bundle:

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

Note: The npm method is best suited for advanced projects with a build process. If you are just learning Bootstrap, stick with the CDN method — it is simpler and requires no setup.

The viewport Meta Tag — Why It Matters

Bootstrap is built for mobile-first responsive design. For it to work correctly on phones and tablets, you must include the viewport meta tag inside your <head>:

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

width=device-width — sets the page width to match the device screen width
initial-scale=1.0 — sets the initial zoom level to 100%

Without this tag, Bootstrap's responsive grid and breakpoints will not work on mobile devices.

CDN vs npm — Which Should You Use?

Feature	CDN	npm
Setup	Zero — just add a link	Requires Node.js & npm
Best for	Beginners, quick prototypes	Production apps, build tools
Customisation	Limited	Full SCSS customisation
Works offline	No	Yes
Performance	Fast (via CDN cache)	Optimised (tree-shaking)

Key Points to Remember

Always add the viewport meta tag — Bootstrap's responsiveness depends on it
Link Bootstrap CSS before your own custom CSS to allow easy overrides
Add Bootstrap JS at the bottom of the body for faster page loading
bootstrap.bundle.min.js already includes Popper.js — do not add Popper separately
Bootstrap 5 does NOT require jQuery — it is fully vanilla JavaScript

« Previous Lesson Next Lesson »