How can I add Bootstrap to a project in ExpressJS?

Question

I'm developing an aplication using nodejs and the framework Express. I want to add Bootstrap to my project in local. I added this to my index <head>

<script language="javascript" src="../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css"/>

I found that I have to add this code to my app.js

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

but it doesn't works too. (I have in mind the path of the Bootstrap and use '../modules...' too)

`src="-/node_modules/bootstrap/dist/js/bootstrap.min.js"` -- Do you really have a `-` in the path, or is that a typo? — 31piy, Apr 18 '18 at 04:56
Did you use `express-generator` to generate your project and had installed bootstrap through npm? Or, do you mind sharing with us a little on your project directory structure? I feel this should work: https://stackoverflow.com/questions/26773767/purpose-of-installing-twitter-bootstrap-through-npm — ionizer, Apr 18 '18 at 04:59
yes was a typo. @ionizer i use `express-generator` and them i installed Bootstarp through npm, thanks for the link — Diego Izquierdo Dussan, Apr 23 '18 at 03:13
For anyone with this q, simply follow https://getbootstrap.com/docs/5.0/getting-started/introduction/ Adding it only to your html file is sufficient — Coder, Feb 13 '23 at 00:57

score 27 · Answer 1 · answered Apr 18 '18 at 06:14

27

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 :)

answered Apr 18 '18 at 06:14

Lalit Dashora

233
2
9

How can I add bootstrap js and jquery? – Gaurav Patil May 16 '21 at 05:06

score 5 · Accepted Answer · edited Nov 20 '18 at 20:20

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>

thaks for comment. but there you are using cdn, to use Boostrap calling the web but i need to use it in local. — Diego Izquierdo Dussan, Apr 23 '18 at 03:17
Considering this i will update my answer using bootstrap locally. — Delcio Polanco, Apr 23 '18 at 03:59

score 4 · Answer 3 · answered Mar 30 '19 at 18:54

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 assets


app.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.

score 1 · Answer 4 · answered Feb 02 '20 at 14:08

node_modules is a private directory and shouldn't be exposed. By default the public directory is the public root path for static files:

app.use(express.static(path.join(__dirname, 'public')));

- Go to views folder in layout file

<link href="/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="/bootstrap/dist/js/bootstrap.bundle.min.js"></script>

If you really wanted to serve up node_modules, which would be a bad idea, add the following beneath the app.use(express.static(...)); line above:

app.use(express.static(path.join(__dirname, 'node_modules')));

score 0 · Answer 5 · answered Apr 18 '18 at 05:03

You can try this:

 <link href="path" rel="stylesheet">

Here path will be the location of bootstrap.min.css file in your local machine. Example:

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

Similarly you can do this for bootstrap.min.js. As shown below:

<script src="path"></script>

Again Here path will be the location of bootstrap.min.js file in your local machine. Since It is javascript file Hence You need to use script tag here. Add these lines before body.

score 0 · Answer 6 · answered Apr 18 '18 at 06:18

You want to add Bootstrap in your project, but have you installed/ downloaded bootstrap files in your project?

Unless you are using express-generator (or other generators or frameworks), it won't be included by default.

You have two options. You can use yeoman generators to scaffold your application or you can use npm or yarn to install bootstrap for your application.

Just use:

npm install bootstrap --save

in your project's root folder. Verify that bootstrap folder in available in node_modules folder and check if the path is correctly set wherever bootstrap is referred.

You can also manually include bootstrap files, but try using npm as it installs all the dependencies for you.

thanks, and yes i installed Bootstrap. and the Bootstrap folder is in the node_modules. — Diego Izquierdo Dussan, Apr 23 '18 at 03:24

score 0 · Answer 7 · answered Apr 07 '23 at 15:25

I know you said you wanted to use it locally, but for anyone who wants to know an easy way to implement bootstrap for an express project. In your views shared layout page, just add the cdn so it is applied to every page that extends the shared layout view.

link(rel="stylesheet", href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css", integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z", crossorigin="anonymous")
    script(src="https://code.jquery.com/jquery-3.5.1.slim.min.js", integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj", crossorigin="anonymous")
    script(src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js", integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV", crossorigin="anonymous")

score -2 · Answer 8 · answered Apr 18 '18 at 04:53

-2

You must try this

<script src=”//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js”></script>
<link rel=”stylesheet” href=”http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css”>
<script src=”//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js”></script>

I hope it will works! :)

answered Apr 18 '18 at 04:53

Ronnie Jimenez

67
1
7

1

OP wants to use bootstrap from his own installation, and not from CDN. – 31piy Apr 18 '18 at 04:56

score -3 · Answer 9 · edited Aug 11 '21 at 19:22

-3

Using the following steps are effective and easy:

npm install bootstrap

use this link tag

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

inside your views files.

edited Aug 11 '21 at 19:22

General Grievance

4,555
31
31
45

answered Aug 11 '21 at 02:08

Rasikh

5
1
2

Please provide the exact commands or code needed. Please include the link that you are talking about. Please explain why this solution is helpful beyond other answers provided. – slasky Aug 11 '21 at 13:18

How can I add Bootstrap to a project in ExpressJS?

9 Answers9