How to include bootstrap file in my ejs files?

I got the same issue following this tutorial. You can solve this by express.static built-in middleware function.

1. Create a directory named public

2. Add following code to your app.js file

   app.use(express.static('public'))

3. Now you can place your bootstrap files in this directory(or subdirectory) and link them relative to public directory.

You can find more info here. https://expressjs.com/en/starter/static-files.html

Looks like you are building the relative path based on location of your ejs file, what actually you need to do is look at the path how ejs view is mapped and you need to make it relative form there. In your case its header.ejs and lets say you are serving it from root page it should be ../node_modules but if you do this it will break in a different page like /posts/foo so the best way to fix your problem is keeping your css files in /public/css folder and add public folder as your static folders and use path like /css/bootstrap.min.css

Why not use from CDN?

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">

Because you're trying to access to static files from the server and your bootstrap.min.css is a static file,as we know nodejs provide a way to serve static files if you are using Express. For example,you can use the following code to serve images, CSS files, and JavaScript files in a directory named public:

app.use(express.static('public'))

You should know that :

Express looks up the files relative to the static directory, so the name of the static directory is not part of the URL.

I ran into the same issue and decided to give middleware like express.static() a go.

warning: when I declared express.static("public") I put it at the bottom of my app.js file and it didn't work for me. So I moved it up and it works.. here is the example

"use strict"; 

const express       = require("express"),
app                 = express();
const layouts       = require("express-ejs-layouts");

app.set("view engine", "ejs");
app.set("port", process.env.PORT || 3000);
app.use(
express.urlencoded({
        extended: false
    })
);

app.use(express.json());
app.use(layouts);
app.use(express.static("public")); 

app.get("/", (req, res) => {
    res.render("index"); 
});

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

Then in public folder (where my css, js, images are), I put boostrap.css there In layout.ejs I have html file and refer it as

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=0.8, maximum-scale=1">
    <title>School of business</title>

    <link rel="stylesheet" href="/css/bootstrap.css"> <!-- BOOTSTRAP -->
    <link rel="stylesheet" href="/css/main.css"> 
</head>

<body>

.........

enter image description here

This worked for me, using Bootstrap CDN

head.ejs

> <!-- views/partials/head.ejs --> <meta charset="UTF-8" /> <title>Super
> Awesome</title>
> 
> <!-- Latest compiled and minified CSS --> <link   rel="stylesheet"  
> href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
> integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
> crossorigin="anonymous" />

Include this in index.ejs

<!DOCTYPE html>
<html>
  <head>
    <%- include ('../partials/head') %>
  </head>
  <body>
    <div class="jumbotron">
      <%- include ('../partials/form') %>
    </div>
  </body>
</html>