Enhancing Bootstrap project with personalized CSS styling

Question

Enhancing Bootstrap project with personalized CSS styling

Utilizing SCSS to create my CSS has been the approach I've taken. The content of my main.scss file remains consistent even after it is compiled into css.

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

Contained within my index.html file is everything needed for the project.

<!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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="caa8a5a5beb9beb8abba8affe4f8e4fa">[email protected]</a>/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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ef8c809d8aafddc1dedec1da">[email protected]</a>/dist/umd/popper.min.js"
    integrity="sha384-Xe+8cL9oJa6tN/veChSP7q+mnSPaj5Bcu9mPX5F5xIGE0DVittaqT5lorf0EI7Vk"
    crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8fede0e0fbfcfbfdeeffcfbaa1bda1bf">[email protected]</a>/dist/js/bootstrap.min.js"
    integrity="sha384-ODmDIVzN+pFdexxHEHFBQH3/9/vQ9uori45z4JjnFsRydbmQbmL5t1tQ0culUzyK"
    crossorigin="anonymous"></script>
</body>

</html>

This illustrates how my project is structured.

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

I have explored various resources and guides on incorporating CSS into my website or project, yet despite this effort, I have encountered an issue. Specifically, the background within the .my-custom-row selector fails to change, leaving me puzzled as to why.

html css sass

Answer 1

Answer №1

If you are encountering this issue, it could be related to the browser cache. One solution is to perform a hard refresh on your browser. Whenever you update CSS or JavaScript and view the updated page, you may experience this problem. To force a refresh, simply press CTRL+F5 on your browser to load the latest version. You can find more information here.

Answer 2

If you are encountering this issue, it could be related to the browser cache. One solution is to perform a hard refresh on your browser. Whenever you update CSS or JavaScript and view the updated page, you may experience this problem. To force a refresh, simply press CTRL+F5 on your browser to load the latest version. You can find more information here.

Answer 3

Answer №2

To begin, it is important to establish a proper folder structure for your project. This structure serves as a strong foundation and helps with organization.

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

Next, make sure to download and activate the Live Sass Compiler extension in your VS Code editor. Follow the instructions provided in this link.

In order to compile CSS successfully, you will need to include 3 lines of code in the Live Sass Compiler's setting.json file. The code snippet is as follows:


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

A helpful video tutorial can be found here: https://youtu.be/cpbN0YAW44g

Once these steps are completed, you will notice that a main.min.css file has been automatically generated in your CSS folder. Now, you can link to this CSS file using the following code:

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

Run a check to ensure that everything is functioning correctly. It should be working smoothly now :)

Answer 4

To begin, it is important to establish a proper folder structure for your project. This structure serves as a strong foundation and helps with organization.

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

Next, make sure to download and activate the Live Sass Compiler extension in your VS Code editor. Follow the instructions provided in this link.

In order to compile CSS successfully, you will need to include 3 lines of code in the Live Sass Compiler's setting.json file. The code snippet is as follows:


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

A helpful video tutorial can be found here: https://youtu.be/cpbN0YAW44g

Once these steps are completed, you will notice that a main.min.css file has been automatically generated in your CSS folder. Now, you can link to this CSS file using the following code:

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

Run a check to ensure that everything is functioning correctly. It should be working smoothly now :)

Answer 5

Answer №3


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

Addressing the file path issue, we see that index.html is located in the html directory. To go back to the previous directory, we need to make a change here.

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

In this case, the correct href should be ../stylesheets/main.css

Answer 6


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

Addressing the file path issue, we see that index.html is located in the html directory. To go back to the previous directory, we need to make a change here.

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

In this case, the correct href should be ../stylesheets/main.css

Enhancing Bootstrap project with personalized CSS styling

Answer №1

Answer №2

Answer №3

Similar questions

Retrieve the text value from a single object by utilizing jQuery

How about using a JQuery variable?

Lately, I've been working on a practice website I'm developing, and I'm facing some issues with my hyperlinks

Bootstrap not recognizing jQuery despite jQuery being present

Automatically updating div content using a static HTML page

CSS is effective when styling table elements such as 'tr' and 'td', but encounters issues when trying to include 'th'

Creating links to external websites in PHP files

Having difficulty uploading files to my website [PHP]

What is the best way to adjust the height of a dropdown box in an angular application?

Customize the appearance of a shadow-root element

What is the best way to position a small image within a menu?

Is it possible to utilize the lighten css property within ngStyle in Angular?

I'm looking to create a unit test for my AngularJS application

Using jQuery to manipulate the image within a specific div element

Tips for designing a user interface for a security software product

Express server does not send any response body

Adjust the image size using CSS within the containing outer div

What is the process for inserting images into a vertical timeline format?

Obtain the value of the background image's URL

What is the best way to access the form button inside a div element?