Adding custom css to boostrap project


I am using SCSS to generate my CSS. This is what I have in my main.scss file. After it gets compiled to css it happens to be the same as well.

.my-custom-row {
    background-color: bisque;

This is in my index.html file. It’s the entire thing.

<!doctype html>
<html lang="en">

  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link href="./stylesheets/main.css" rel="stylesheet">

  <!-- Bootstrap CSS -->
  <link href="[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">

        Everything is in a grid. A grid is a collection of rows and columns.
        Each column can support 12 units. A unit is one element (as far as I can tell). 
        It can be set so that depending on screen size, the way things are layed out
        are different as well. 
  <title>Jia Hong's website</title>

  <div class="container">
    <div class="row my-custom-row">
      <div class="col-sm-4"><div class="p-3 border bg-light">Col One</div></div>
      <div class="col-sm-4"><div class="p-3 border bg-light">Col Two</div></div>

  <script src="[email protected]/dist/umd/popper.min.js"
  <script src="[email protected]/dist/js/bootstrap.min.js"


This is my project structure.

├── html
│   └── index.html
├── scss
│   └── main.scss
└── stylesheets
    ├── main.css

I have looked at some videos and such on how to include css into my website/project but for some reason it just doesn’t work. The background inside of the .my-custom-row just doesn’t change. I have no idea why.


├── html
│   └── index.html
├── scss
│   └── main.scss
└── stylesheets
    ├── main.css

The answer has to deal with the file path. Since index.html is in the html folder. I need to go to the previous directory so in.

<link href="./stylesheets/main.css" rel="stylesheet">
The href should instead be ../stylesheets/main.css

Answered By – YJH16120

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published