Adding custom css to boostrap project

Issue

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">

<head>
  <!-- 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="https://cdn.jsdelivr.net/npm/[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>
</head>

<body>
  <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>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"
    integrity="sha384-Xe+8cL9oJa6tN/veChSP7q+mnSPaj5Bcu9mPX5F5xIGE0DVittaqT5lorf0EI7Vk"
    crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
    integrity="sha384-ODmDIVzN+pFdexxHEHFBQH3/9/vQ9uori45z4JjnFsRydbmQbmL5t1tQ0culUzyK"
    crossorigin="anonymous"></script>
</body>

</html>

This is my project structure.

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

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.

Solution

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

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