Day 3 - Bootstrap Setup

Learn the different ways to add Bootstrap to your project.

1. Ways to Setup Bootstrap

There are three primary ways to set up Bootstrap in your project:

🌐 Via CDN

Quick start, no download needed

Recommended for beginners

📁 Via Download

Downloaded files in your project

Offline access

📦 Via NPM

Package manager installation

For advanced projects

2. Via CDN (Content Delivery Network)

The quickest way to get started! Link to Bootstrap's CSS and JS files online using jsDelivr — no download required.

Standard Setup

Add these lines to your HTML file. Put CSS in <head> and JS before closing </body>:

CSS (in <head>):

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

JavaScript (before </body>):

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

💡 Tip: The bootstrap.bundle.min.js file already includes Popper.js (required for dropdowns, tooltips, etc.).

3. Via Download Files

Download the compiled CSS and JS files from the official website and include them in your project folder.

What's Included

✓ Included:

Compiled and minified CSS bundles
Compiled and minified JavaScript plugins

✗ Not Included:

Documentation
Source files
Popper.js (must add separately if not using bundle)

Project Structure:

your-project/
├── css/
│   └── bootstrap.min.css
├── js/
│   └── bootstrap.bundle.min.js
└── index.html

Linking local files:

<!-- CSS in head -->
<link rel="stylesheet"
  href="./css/bootstrap.min.css">

<!-- JS before closing body -->
<script src="./js/bootstrap.bundle.min.js"></script>

4. Via NPM (Node Package Manager)

For Node.js powered apps. This allows you to manage Bootstrap as a project dependency and integrate with build tools like Webpack or Vite.

Installation Command

$ npm install bootstrap@5.3.7

⚠️ Requirements: When using source files via npm, you'll need a Sass compiler and Autoprefixer.

5. The Bootstrap Syntax

Using Bootstrap is simple: you add predefined class names to your HTML elements. These classes are already styled by Bootstrap!

Example: Creating a Button

HTML Code:

<button
  class="btn btn-primary">Primary Button</button>

Output:

🎉 That's it! The btn and btn-primary classes do all the styling for you. No custom CSS needed!

More Examples:

btn btn-danger

btn btn-success btn-lg

btn btn-outline-primary

< Previous: Introduction | Next: Containers >