Bootstrap not loading styles properly - node.js

Question

I'm trying to write a small application using bootstrap but it seems it doesn't load the styles at all, even tho i included all bootstrap references properly, here is some code (i am using PUG, but i can provide the final HTML if needed)
extends layout
block content
link(rel='stylesheet', href='/stylesheets/index.css')
.container
.row
.col-md-8
section
h1.entry-title
span Sign Up
hr
form#signup.form-horizontal(method='post' name='signup' enctype='multipart/form-data')
.form-group
label.control-label.col-sm-3
| Email ID
span.text-danger *
.col-md-8.col-sm-9
.input-group
span.input-group-addon
i.fas.fa-envelope-open-text
input#emailid.form-control(type='email' name='emailid' placeholder='Enter your Email ID' value='')
.form-group
.col-xs-offset-3.col-xs-10
input.btn.btn-primary(name='Submit' type='submit' value='Sign Up')
The code of layout is this
doctype html
html(lang='en')
head
title= title
meta(charset='utf-8')
meta(name='viewport' content='width=device-width, initial-scale=1, shrink-to-fit=no')
link(href='bootstrap/css/bootstrap.css', rel='stylesheet', media="all")
body
block content
script(src='jquery/jquery-3.4.1.min.js')
script(src='bootstrap/js/bootstrap.bundle.js')
script(src='https://kit.fontawesome.com/ae629fb23c.js')
I did check all the files and it does load bootstrap css and js, it just doesn't apply any styles, as seen here
Screenshot

Answer 1

The way your templates are setup, the link element loading your custom styles is placed in the body instead of the head where it belongs. Try something like this, which makes use of the prepend and append directives:
layout.pug
doctype html
html(lang='en')
head
block head
title= title
meta(charset='utf-8')
meta(name='viewport' content='width=device-width, initial-scale=1, shrink-to-fit=no')
link(href='bootstrap/css/bootstrap.css', rel='stylesheet', media="all")
body
block content
script(src='jquery/jquery-3.4.1.min.js')
script(src='bootstrap/js/bootstrap.bundle.js')
script(src='https://kit.fontawesome.com/ae629fb23c.js')
page.pug
extends layout
append head
link(rel='stylesheet', href='/stylesheets/index.css')
prepend content
.container
.row
.col-md-8
section
h1.entry-title
span Sign Up
hr
form#signup.form-horizontal(method='post' name='signup' enctype='multipart/form-data')
.form-group
label.control-label.col-sm-3
| Email ID
span.text-danger *
.col-md-8.col-sm-9
.input-group
span.input-group-addon
i.fas.fa-envelope-open-text
input#emailid.form-control(type='email' name='emailid' placeholder='Enter your Email ID' value='')
.form-group
.col-xs-offset-3.col-xs-10
input.btn.btn-primary(name='Submit' type='submit' value='Sign Up')