Adding custom css to boostrap project

Question

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/bootstrap@5.2.0/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/core@2.11.5/dist/umd/popper.min.js"
    integrity="sha384-Xe+8cL9oJa6tN/veChSP7q+mnSPaj5Bcu9mPX5F5xIGE0DVittaqT5lorf0EI7Vk"
    crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/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.

score 0 · Answer 1 · answered Aug 01 '22 at 03:11

This may have to do with the browser cache. Have you tried hard refreshing the browser? Anytime you make changes to CSS, JavaScript and are viewing the page you've updated - you will see this concern. You can force a refresh by pressing CTRL+F5 on the browser and that will get the latest version. Some more info

Hitesh Kumawat · Answer 2 · 2022-08-01T04:55:48.243

First, please follow this folder structure. This kind of structure provides your project with a solid base or scale.

├── Project Name
│   └── index.html
├── assets
    └── images
        └── logo.svg
        └── other images
    └── css
        └── main.scss
    └── js
        └── main.js

After this, please download and enable the Live Sass Compiler in VS Code editor and follow the steps.

To compile CSS you need to add 3 lines of code in the Live Sass Compiler setting.json file and the code is

  "liveSassCompile.settings.formats": [
    {
      "format": "compressed",
      "extensionName": ".min.css",
      "savePath": null
    }
  ],

you can watch this video https://youtu.be/cpbN0YAW44g

After this, you can see the main.min.css file automatically created in your CSS folder and now you can call CSS file like this

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

Now run and check; it should work :)

score 0 · Accepted Answer · answered Aug 05 '22 at 09:29

.
├── 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

Adding custom css to boostrap project

3 Answers3