Having trouble getting Bootstrap 4 SCSS overrides to take effect?

Let's dive into a quote from the Bootstrap documentation:

Each Sass variable in Bootstrap 4 comes with the !default flag, allowing you to modify the default value in your own Sass even after that original variable has been set.

Here is the content of my theme.scss file:

// Original Bootstrap
@import "bootstrap/scss/bootstrap";

// Custom Variable Overrides
@import "custom-variables";

The contents of the custom custom-variables.scss file (used for testing purposes only):

$body-color: #555;
$font-family-base: serif;

Although everything compiles without errors, there are no visible changes to the styles. For example, the body color and base font family remain the same as defined in the original Bootstrap files. Why could this be?

Answer №1

Regarding the alpha version of v4: To properly customize Bootstrap styles, it is crucial to override the variables before they are applied to all components. In the `bootstrap/scss/bootstrap` file, each scss file is imported with their `variables` file at the beginning. This allows for a pre-hook where you can modify the variables before they affect tables, buttons, and similar elements.

For easier customization in Bootstrap 4, there is a _custom.scss file provided to override default variables located in /scss/_variables.scss. By copying relevant lines from this file into the _custom.scss file, adjusting the values, and recompiling your Sass code, you can alter the default settings. Make sure to remove the !default flag from the overridden values. [Source]

The `_custom.scss` file should be placed within the `bootstrap/scss/` directory.
Please note that this feature has been deprecated since v4 beta.


In versions starting from beta and onwards: When dealing with variable defaults, things work differently. A variable marked with the `!default` flag will default to the previously set value (if available). Since all Bootstrap variables carry this flag, you can import your `custom-variables.scss` prior to the `bootstrap/scss/bootstrap`;

$var: 2px; /* defined in custom-variables.scss */
$var: 1px !default; /* defined in bootstrap _variables.scss */

.element {
  width: $var;
}

results in

.element {
  width: 2px;
}

If you wish to utilize Bootstrap variables while overriding them, one method is to import the `_variables.scss` file twice; once as a standalone file before setting your overrides and once again after incorporating the entire Bootstrap framework:

// Import bootstrap _variables.scss file
$var: 1px !default;
$var2: 4px !default;

// Your custom-variables.scss
$var: 2px + $var2;

// Import bootstrap
$var: 1px !default;
$var2: 4px !default;

.element {
  width: $var;
}

which compiles to

.element {
  width: 6px;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Angular: Material Button that Adjusts According to Header Size

How can I adjust the size of a mat-icon to match the header size? Despite my efforts, the arrows remain small. <h1> <button mat-icon-button (click)="testEvent()"> <mat-icon>keyboard_arrow_up</mat-icon> < ...

Unlocking the Possibilities of scroll-snap-type

My goal is to effectively utilize the scroll-snap-type property I'm struggling to understand why this code functions as intended html, body { scroll-snap-type: y mandatory; } .child { scroll-snap-align: start none; border: 3px dashed blac ...

Unfortunately, Node Sass does not have compatibility with your current environment, which is Windows 64-bit with an unsupported runtime

Having been a regular user of Node.js to utilize gulp and sass for my HTML projects, I recently encountered a new issue. An error message stating "Node Sass does not yet support your current environment: Windows 64-bit with Unsupported runtime (57)" has no ...

Is your pagination feeling a bit sluggish?

I have been working on a basic table application that showcases dummy data with columns such as name, number, date, and more. Users have the ability to sort the table by columns and navigate through paginated pages. However, I have encountered an issue wh ...

A mysterious JavaScript snippet that automatically scrolls down when the webpage is loaded

Recently, I encountered an issue with a mysterious JavaScript script that automatically scrolls down when entering the page (I suspect it's JavaScript). I've tried to investigate using Firebug, examining the code, deleting scripts, and even remov ...

The scrollbar located within a table cell is malfunctioning and unresponsive

In a container with a fixed width of 500px, I have a table that contains a cell with potentially long text. To ensure the long text appears on a single line, I set the white-space: nowrap property. However, this causes the table to adjust its size to accom ...

Is it possible to nest a <div> element inside a table in HTML code?

I am facing a requirement where I need the table rows inside a table, excluding the head row, to be scrollable. I attempted the following code, but it did not produce the desired outcome: <table id="applicantList1" border="1" align="left"> &l ...

Placing a button above another element using CSS styled components

I'm attempting to make a button overlap and be positioned in a specific location on top of a search bar. The current appearance is not what I desire, as the button seems to shift back to its original position when adding a :hover element after applyin ...

Ways to customize background color for a particular date?

I have been using the fullcalendar npm package to display a calendar on my website. I am trying to figure out how to set a background color for a specific selected date. I tried looking into this issue on GitHub at this link. However, it seems that dayRe ...

Enhancing webpage design by dynamically changing borders and headers using JavaScript

I have implemented a fixed positioning for the table headers using the following code: onScroll={() => { document.querySelector('thead').style.transform = `translate(0,${this.scrollRef.scrollTop}px)`; }} However, when I scroll the ta ...

What is the reason behind the modification in flex item size when align-items property is applied?

When creating the responsive design, I utilized flexbox. Surprisingly, without changing the size of each flex-item, applying align-items:center caused the size of the first flex item (PICTURE 2) to change when displayed in a vertical view. On the other han ...

Unable to determine why node.js express path is not working

const express = require("express"); const app = express(); app.use(express.static("public")); var dirname = __dirname; app.get("/:lang/:app",function(req,res){ console.log(req.params.lang + " " + req.params.app); ...

Troubleshooting the issue: AngularJS not functioning properly with radio button selection to show specific div containing input field

Looking for some help with radio buttons: I need the selection of radio buttons to display their respective input boxes. I have included a snippet of my HTML and controller code below. In my controller, I am using ng-change to call a function that uses jQu ...

Can anyone tell me how to retrieve the value of {{org}} in this situation?

<head> <title>My Unique Page</title> </head> <body> <input type="text" ng-model="selectedOrg" ng-show="!isSuperAdmin" readonly /> <select id="nameOrg" ng-model="selectedOrg" ng-cha ...

Retrieve the selected option from the dropdown menu in the specified form

What should I do if I have numerous products and want users to be able to add new dropdown boxes dynamically? When the submit button is clicked, only the value of "category[]" within the form should be retrieved. https://i.stack.imgur.com/v1fnd.png Below ...

The make-xx-column() mixins in Bootstrap are malfunctioning

After careful examination, it looks like some of the Bootstrap mixins are not functioning as expected. Specifically, the .make-md-column() and .make-sm-column() seem to have no effect at all. Initially, I suspected that WebEssentials was not compiling the ...

assigning a CSS class to an input element based on a certain condition

My dilemma involves an input field for which I need to conditionally apply a CSS class. For instance, if firstName == undefined, I want to apply the CSS class ng-dirty. To achieve this, I attempted: <input required [(ngModel)]="customer.firstName" nam ...

Aligning content within a table cell using the Div tag

I am struggling with a <td> that looks like this: <td valign="middle" class="table_td td top" style="width: 347px"> <div id="Style" style="position:absolute;"> <img src="images/additional-keywords-image.gif" style="background: ...

Distinct styling for the start and subsequent lines of an anchor element using ::before pseudo-element

I'm currently working on a project that requires adding a decoration in front of some anchor links (A). Right now, I am using ::before to achieve this. However, there is an issue where some of the links will line-break and the second line and subseque ...

Leveraging ASCII characters within the .htaccess file

I'm currently working on developing my own local network website and I'm interested in adding password protection to certain parts using .htaccess. However, the guide I've been following mentioned that they need to be saved with ASCII encodi ...