Building an e-Commerce website with Node – Part 14 – Using Bootstrap for styling your web site

Our web site looks ugly now. It is time to add some styling to it. I am going to use one of Bootstrap’s examples named Jombotron. You can choose another one but I think this one is better since it has many of the components we use in our site.

Go to http://getbootstrap.com/examples/jumbotron/, right-click anywhere on the page and chose “view page source” option. Copy the whole source and paste it into boilerplate.ejs (don’t forget to delete first the code inside the boilerplate.ejs).

Within the <head> and </head> tags delete everything except the content between <title> and </title> tags. We don’t need it!

If you go to http://localhost:3000 you can see that the page has no styling and that’s because we haven’t added the CSS file yet. You can do it by copying the content of the file and paste it into your project or by copying the URL of the CDN. We will try both ways.

Before doing that, we need to create a new folder within our project folder. Go create a folder named “public”. This folder will store all .css and .js files that are front-end code. Within “public” folder, create a new folder and name it “css”. Within the “css” folder create a file and name it “bootstrap.min.css”.

In the browser, on the source-code page, under the </title> tag, find the link to bootstrap.min.css. Click on it! On the new page, copy the whole code and paste it into the bootstrap.min.css file. Now we have the style-sheet of our website.

The problem is that our express.js doesn’t know how to use our .css file. To solve this problem, go to the server.js file, at the top of the middleware section, and add the following:


app.use(express.static(__dirname + "/public"));

express.static is a method of the express object. It has the capability to serve static files.
Attention! Just before the dirname word there are two underscors, not just one!

Now, go to the boilerplate.ejs file and create a link to the .css file. We already told express that the static files are served from the public folder so, the link looks like this:


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

If you go to http://localhost:3000 you can see that the page looks totally different now. We implemented the .css file correctly.

Let’s try the second method now, using the CDN. Go to https://www.bootstrapcdn.com/ and copy the first link (complete CSS). Into the boilerplate.ejs file create the link to the CDN.


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

In order to check if it works you have to comment the first link and let the newly created link active.


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

Now, if you check the browser, the page is displayed in the same way. Later on, we will have custom .css and .js files.

Leave a Reply