How can I add Bootstrap to a project in ExpressJS?

javascript node.js twitter-bootstrap express npm

You can try this as well, worked for me.

Install bootstrap

npm install bootstrap@3

Now in app.js file add the following code:

app.use('/css', express.static(__dirname + '/node_modules/bootstrap/dist/css'));

Use bootstrap.css in your layout or any other file

<link rel="stylesheet" href="/css/bootstrap.min.css" />

Make sure the path you have provided is correct.

I hope this will work :)

javascript node.js twitter-bootstrap express npm

You should reference your stylesheet in your html file.

install boostrap:

npm install --save bootstrap

server.js

var express = require("express");var app = express();var router = express.Router();var path = __dirname + '/views/'; // this folder should contain your html files.router.get("/",function(req,res){  res.sendFile(path + "index.html");});app.use("/",router);app.listen(3000,function(){  console.log("Live at Port 3000");});

index.html

This file should be located in yourProject/views/:

<!doctype html><html lang="en"><head><meta charset="UTF-8"><title>Single page web app using Angularjs</title><link href="../node_modules/bootstrap/dist/css/bootstrap.css" rel="stylesheet" type="text/css"></head><body><div><div><nav class="navbar navbar-inverse" role="navigation" style="padding-left:130px;">       <ul class="nav navbar-nav">      <li class="active"><a href="/">Home<span class="sr-only">(current)</span></a></li>      <li><a href="/about">About us</a></li>      <li><a href="/contact">Contact us</a></li>    </ul></nav></div><br/><div class="jumbotron"> <p>This is place your index including bootstrap</p></div></div><script src="../node_modules/bootstrap/dist/js/bootstrap.js" type="text/javascript"></script></body></html>

javascript node.js twitter-bootstrap express npm

Let's assume that you have installed the latest version of bootstrap using the following command:

npm install bootstrap

Now, assume that in your root directory, you have a public folder that you want to use that as your static asset. Assume that the structure of the public directory looks like the following:

'public/styles/css'

Now if you want to use the bootstrap distribution and use the contents of the css folder as if it is in your public/styles/css folder, you may do the following:

const express = require('express');const app = express();// STATIC ASSETS:app.use(express.static(path.join(__dirname, "public"))); // <- this line will us public directory as your static assetsapp.use("/styles/css", express.static(path.join(__dirname, "node_modules/bootstrap/dist/css"))); // <- This will use the contents of 'bootstrap/dist/css' which is placed in your node_modules folder as if it is in your '/styles/css' directory.

Expand snippet