💡 What Is Bootstrap?

Bootstrap is most popular CSS framework used to build responsive and mobile-first websites.

Bootstrap 5 is the latest version and includes powerful classes for layout, design, grid system, and components like buttons, cards, navbars, alerts, forms, and much more.

⚙️ Why Use Bootstrap in Express.js?

Using Bootstrap with Express.js allows you to build attractive UI pages quickly inside EJS templates without writing CSS from scratch.

Use npm to install Bootstrap into your Node.js + Express project:

npm i bootstrap

This command downloads the Bootstrap files inside the node_modules folder.

Create the folders and EJS files like this:

📁 project-folder
 ┣ 📁 node_modules
 ┣ 📁 views
 ┃ ┣ 📁 common
 ┃ ┃ ┣ 📄 header.ejs
 ┃ ┃ ┗ 📄 footer.ejs
 ┃ ┣ 📄 home.ejs
 ┃ ┣ 📄 about.ejs
 ┃ ┗ 📄 contact.ejs
 ┣ 📄 package.json
 ┗ 📄 index.js
        

We link Bootstrap CSS and JS files by exposing them as static files from node_modules.

const express = require('express');
const path = require('path');
const cors = require('cors');
const app = express();

app.use(cors());
app.set('view engine', 'ejs');

// Routes
app.get('/', (req, res) => {
    res.render('home');
});

app.get('/about', (req, res) => {
    res.render('about');
});

app.get('/contact', (req, res) => {
    res.render('contact');
});

app.listen(8080, () => {
    console.log("Server running at http://localhost:8080");
});

• 📦 npm i bootstrap installs Bootstrap into your project.
• 🛣️ express.static() exposes CSS & JS files from node_modules.
• 🎨 You include Bootstrap in EJS using <link> and <script> tags.
• 📄 Each EJS page can now use Bootstrap classes like bg-success, mt-5, btn btn-primary, etc.
• 🧱 Header and footer are included dynamically using EJS partials.