Where is the best place to import Bootstrap in my SCSS file when customizing it with Sass?

When attempting to customize bootstrap using Sass, I discovered that overriding default bootstrap variables can be quite confusing. I am curious if someone could provide an explanation for the inconsistent behavior.

Some variables only seem to be overridden if they are declared before importing bootstrap, while others only take effect if defined after the import. Let me illustrate with examples of each scenario.

The variables $form-range-thumb-width and $form-range-thumb-height will only be overridden with my specified values if I declare them before importing bootstrap:

$form-range-thumb-width: 2rem;
$form-range-thumb-height: 2rem;
@import '../node_modules/bootstrap/scss/bootstrap';

However, if I do the opposite (importing bootstrap before declaring the variables), then the values have no impact and default values (1rem) are used in the compiled CSS.

One might assume that variables need to be overridden before importing bootstrap, but this is contradicted by a variable like $font-family-base. In this case, overriding the variable must occur after importing bootstrap for it to take effect.

For instance, this would work as expected:

@import '../node_modules/bootstrap/scss/bootstrap';
$font-family-base: 'Manrope';

However, the following approach would not result in the desired font override:

$font-family-base: 'Manrope';
@import '../node_modules/bootstrap/scss/bootstrap';

In the second scenario, the font family reverts to its default value. Can anyone shed light on what is causing this inconsistency?

Answer №1

The solution can be found in the documentation: https://getbootstrap.com/docs/5.0/customize/sass/#importing

If you are customizing without using any of the existing variables, make sure to set your changes before importing bootstrap to override the default variables...

$form-range-thumb-width: 2rem;
$form-range-thumb-height: 2rem;
$font-family-base: 'Manrope';

@import '../node_modules/bootstrap/scss/bootstrap';

I have personally tested the $font-family-base and did not encounter the issue mentioned. It seems to be working as intended:

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

Drop down menu alignment issue: unable to center menu on the page

My dropdown menu is misaligned and not centering on the page, even after multiple attempts to fix it using HTML and CSS only. I have refrained from using JavaScript or JQuery for this issue. CSS Code: <style type="text/css"> /* STYLING FOR DROPDOWN ...

Error Encountered: Anticipated 'styles' to consist of a series of string elements

I have attempted various solutions for this particular error message without any success. When launching my angular project using the angular cli via ng serve, everything runs smoothly with no errors. However, upon compiling it with webpack, I encounter th ...

Solutions for concealing the current div when clicking on a new div that reveals a fresh one

Is there a way to hide the current div once you click on a new div that reveals another one? The code below toggles the display of the div, but what I am attempting to achieve is that when you click on a new item after clicking on the first one, the first ...

Troubleshooting the issues with implementing cross-browser jscrollpane functionality

Hey there! I've been exploring this tool to customize the default scroll-bar, and here's a fiddle showcasing my experimentation. In the fiddle, I've included the following code snippet <div class="scroll-pane horizontal-only">(located ...

What is the best way to initially hide a div using slide toggle and then reveal it upon clicking?

Is there a way to initially hide the div tag and then animate it in a slide toggle effect? I attempted using display:none on my '.accordion_box' followed by show() in slideToggle, but this results in adding the CSS property display: block. My goa ...

Why isn't the float left property working as expected?

Why won't my image float to the left? I'm using a class called align-left with float: left but it's not working. You can see the live version at - (check out the review grid halfway down under the heading 'High customer satisfaction r ...

"CSS: Mastering the Art of Color Curves

Is there a way to achieve this with just HTML and CSS? ...

Eliminate the display of Last Modified date and file Size in mod_autoindex

Recently, while developing a file storage webpage for my website, I successfully implemented mod_autoindex for my Apache server. However, I now face the challenge of removing the Last Modified and Size fields from the table. I am hopeful that there is a w ...

What is the best way to apply a CSS class to a div element without affecting its child elements using JavaScript?

Currently, I am using JavaScript to add and remove a CSS class through a click event. Within my div structure, I have multiple similar divs. While I can successfully add and remove the class from my main div, I am facing an issue where the class is also ap ...

Ways to vertically center an absolutely positioned element

In the code snippet below, there is a .square-container that is absolutely positioned and contains a square. The goal is to vertically center the .square-container within its parent div. .container { position: relative; background-color: blue; } ...

I am looking to create a div that can consistently refresh on its own without needing to refresh

I have implemented a comment system using ajax that is functioning well. I am looking to incorporate an ajax/js code to automatically refresh my "time ago" div every 5 seconds so that the time updates while users are viewing the same post. Important note: ...

Determining the nth-child within a given table or container

I have various divs within a container with the same class (class="myDiv"). The positioning of these divs inside the container can vary... The goal is to style all divs with the class .myDiv as follows: the first div should have color "red" the second d ...

Guide: Using jQueryUI's explode effect to animate an HTML element explosion

I'm having trouble getting the jQueryUI explode effect to work properly. I've tested it out on this jsfiddle, but the explosion effect doesn't seem to happen as expected - the element just disappears with no explosion animation. $('h1, ...

Issues with image sizing on mobile devices

After finalizing my header design, I encountered an issue with the mobile version of the website. The images in the header are not responsive and do not adapt well to different screen sizes. I need assistance converting the header design into functional co ...

What is the CSS code to extend the width or length of a form field?

I am working with a form field box that has the class CCPPDisplayTD. I am attempting to increase its length using CSS styling. What is the best way to achieve this using CSS? ...

The jquery datepicker is malfunctioning after switching to another component

My current setup includes the following versions: jQuery: 3.3.1 jQuery UI: 1.12.1 AngularJS: 6 Here's a snippet of my code: <input id="test" type="text" class="form-control" value=""> In my component (component.t ...

Restrict the Number of Columns in GridView

I am currently working with a gridview that displays product information. I'm trying to find a way to limit the description field so that only the first few lines are shown if it is too long, and also resize the image to fit into the image column whil ...

How can I make a div element match the height of an image and overflow without relying on

Here is the code that I am currently working with: https://codepen.io/allen-houng/pen/ExYKYdq Additionally, you can find a gist of the code snippet below: <div class="parent"> <div class="imageWrapper"> <img class="image" src="imageurl" ...

Retrieving the CSS property values for a specific element using Selenium

Imagine a scenario where I locate an element by its XPath using: WebElement element = driver.findElement(By.xpath("specific XPath")); While I can retrieve the value of a single CSS property with element.getCssValue("specific property"), is there a way to ...

Generate a variety of HTML ordered lists

Can anyone assist me in determining the type of ordered list shown below? What is the method to achieve an ordered list like this: (a) (b) (c) in HTML? ...