title: how to include bootstrap in a node-express project
body: <p>the following code comes from <a href="https://www.youtube.com/watch?v=9np39a6N8ng" rel="nofollow noreferrer">code author</a>. Basically it is a bootstrap/css project which i want to connect to backend. However, I can't find a way to render the bootstrap with the following code:</p>
  <p>file form:</p>
  <ul>
  <li>fileName
  <ul>
  <li>node_modules</li>
  <li>routes
  <ul>
  <li>public.js</li>
  </ul>
  </li>
  <li>views
  <ul>
  <li>publicAssets
  <ul>
  <li>css</li>
  <li>js</li>
  <li>img</li>
  </ul>
  </li>
  <li>public.ejs</li>
  </ul>
  </li>
  <li>app.js</li>
  </ul>
  </li>
  </ul>
  <p>app.js</p>
  <pre><code>const express = require('express');
  const app = express();
  const port=4000;
  const publicRouter = require('./routes/public');
  const path = require('path');
  
  app.listen(port,()=&gt;{
      console.log(`listening to port ${port}`);
  });
  
  
  app.set('view engine','ejs');
  app.use(express.static(path.join(__dirname, 'views')));
  
  
      
  
  
  app.use('/',publicRouter);
  
  </code></pre>
  <p>public.ejs</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;en&quot;&gt;
  &lt;head&gt;
      &lt;meta charset=&quot;UTF-8&quot;&gt;
      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
      &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;ie=edge&quot;&gt;
      &lt;title&gt;WebSite Title&lt;/title&gt;
      &lt;link rel=&quot;stylesheet&quot; href=&quot;publicAssets/css/styles.css&quot;&gt;
      &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css&quot;&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  
      &lt;div class=&quot;wrapper&quot;&gt;
         
  
          &lt;header&gt;
          
          
              &lt;div class=&quot;top-bar&quot;&gt;
  
                  &lt;div class=&quot;row&quot;&gt;
                      
                      &lt;div class=&quot;col-md-8 col-lg-9 d-flex breaking-news-bar&quot;&gt;
                          &lt;div class=&quot;breaking-title&quot;&gt;&lt;h6&gt;Trending&lt;/h6&gt;&lt;/div&gt;
                          &lt;div class=&quot;owl-carousel owl-theme owl-loaded breaking&quot;&gt;
                              &lt;div class=&quot;owl-stage-outer&quot;&gt;
                                  &lt;div class=&quot;owl-stage&quot;&gt;
                                      &lt;div class=&quot;owl-item b-news-item&quot;&gt;&lt;a href=&quot;#&quot;&gt;01.Lorem ipsum dolor sit amet.&lt;/a&gt;&lt;/div&gt;
                                      &lt;div class=&quot;owl-item b-news-item&quot;&gt;&lt;a href=&quot;#&quot;&gt;02.Lorem ipsum dolor sit amet.&lt;/a&gt;&lt;/div&gt;
                                      &lt;div class=&quot;owl-item b-news-item&quot;&gt;&lt;a href=&quot;#&quot;&gt;03.Lorem ipsum dolor sit amet.&lt;/a&gt;&lt;/div&gt;
                                      &lt;div class=&quot;owl-item b-news-item&quot;&gt;&lt;a href=&quot;#&quot;&gt;03.Lorem ipsum dolor sit amet.&lt;/a&gt;&lt;/div&gt;
  
                                  &lt;/div&gt;
                              &lt;/div&gt;
                              &lt;div class=&quot;owl-nav&quot;&gt;
                                  &lt;div class=&quot;owl-prev&quot;&gt;
                                      &lt;i class=&quot;fas fa-angle-left&quot;&gt;&lt;/i&gt;
                                  &lt;/div&gt;
                                  &lt;div class=&quot;owl-next&quot;&gt;
                                          &lt;i class=&quot;fas fa-angle-right&quot;&gt;&lt;/i&gt;
                                      &lt;/div&gt;
                              &lt;/div&gt;
                              &lt;!-- End breaking news --&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
  
                      &lt;div class=&quot;col-md-4 col-lg-3&quot;&gt;
  
                      &lt;/div&gt;
  
                  &lt;/div&gt;
  
              &lt;/div&gt;
         
         
  
  
          &lt;/header&gt;
      &lt;/div&gt;
  
  
      &lt;script src=&quot;publicAssets/js/bootstrap.min.js&quot;&gt;&lt;/script&gt;
      &lt;script src=&quot;publicAssets/js/jquery-3.5.1.min.js&quot;&gt;&lt;/script&gt;
      &lt;script src=&quot;publicAssets/js/custom.js&quot;&gt;&lt;/script&gt;
      &lt;script src=&quot;publicAssets/js/owl.carousel.min.js&quot;&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>css works fine however i can't use bootstrap</p>