Customizing Bootstrap SCSS variables by substituting them with different Bootstrap variables

What is the most effective way to customize variables?

I have found that following this specific order yields the best results:

@import "bootstrap/_functions.scss";

$primary: red;

@import "bootstrap/_variables.scss";
@import "bootstrap/_mixins.scss";

However, a challenge arises when trying to utilize a variable from Bootstrap itself. For instance:

@import "bootstrap/_functions.scss";

$primary: $red;

@import "bootstrap/_variables.scss";
@import "bootstrap/_mixins.scss";

This particular scenario fails to compile due to the undefined $red variable.

Experimenting with an alternative order:

@import "bootstrap/_functions.scss";    
@import "bootstrap/_variables.scss";
@import "bootstrap/_mixins.scss";

$primary: $red;

While this approach works for certain elements, it falls short in others. For instance, within bootstrap/_variables.scss:

$link-color: $primary !default;

The $link-colour variable does not reflect the customization and resorts back to the default value.

Any suggestions or insights on overcoming this challenge?

csstwitter-bootstrapsassbootstrap-5

Answer №1

My preferred folder structure includes a custom SASS directory at /src/scss/core:

// 1. Functions first for manipulation capabilities
@import "../../node_modules/bootstrap/scss/functions";
@import "../../node_modules/bootstrap/scss/variables";

// 2. Default variable overrides
@import "core/variables"; // Custom theme variables
@import "core/variables-bootstrap"; // Bootstrap variables overrides

// Mixins
@import "../../node_modules/bootstrap/scss/mixins";
@import "core/mixins.scss";

// Bootstrap core components
@import "../../node_modules/bootstrap/scss/utilities";
@import "../../node_modules/bootstrap/scss/root";
... (list continues)

// Additional notes on variable overrides and extending, with an example of overriding link colors:
$primary: $red;
$link-color: $primary;
$link-hover-color: shift-color($link-color, $link-shade-percentage);

I find this structure effective for managing variable overrides and extensions, but it's important to note the need for directly overriding specific default values like $link-hover-color to align with your customized variables.

Answer №2

Enhancing Bootstrap 5 Colors

To customize the colors in Bootstrap 5, it's important to adjust other variables that rely on '$link-color', such as '$btn-link-color'. Additionally, you need to blend the new colors into the '$theme-colors' map...

@import "functions";
@import "variables";
@import "mixins";

$primary: $red;
$link-color: $primary;
$btn-link-color: $primary;

$theme-colors: map-merge(
  $theme-colors,
  (
    "primary": $primary
  )
);

@import "bootstrap";

See Demo

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

The dropdown menu is being truncated

I am having an issue with a drop-down menu being cut off by its parent div. When I increase the height of the parent div, the drop-down menu becomes visible. Can someone please assist me? Below is my code snippet: MarkUp <div id="main-navigation" clas ...

csshtml

Designing the button outline variant with Material-UI styling

I've recently started using Material UI and I'm facing some difficulties. One of the challenges I'm encountering is with a button component export default function TheButton(props: PropsWithChildren<Props>) { const { className, hover ...

cssreactjsmaterial-ui

Issue with CSS: Parent container disregards child element's width limit

Trying to maintain a 1:1 aspect ratio for a div by using an image. The goal is for the div to fill the available height within a flex-container while the container's width adjusts to fit its content. The square-div displays with correct dimensions, b ...

cssflexboxaspect-ratio

What is the best way to anchor an image to the bottom right corner while also adjusting its position as

Hey there! I have a challenge where I want to anchor an image at the bottom right corner of a webpage. Initially, it works perfectly using this CSS: .logo img{ position: absolute; bottom: 0; right: 0; } However, when I resize the window, the ...

htmlcssimage

Incorporate dynamic rules into a CSS stylesheet

I am trying to dynamically add a rule to my CSS for each element. Each rule should have a different background-image and name. However, I seem to be encountering an issue where the dynamically added div is not linking to the dynamically added CSS rule. I&a ...

javascripthtmlcssajaxrules

Swap the image when hovering over it

Is it possible to modify this specific code so that a hover effect is triggered on mouseover? I attempted to look into similar questions and answers, but I found them difficult to understand. Here is the HTML snippet: <a href="RR.html"><img src ...

htmlcsshover

CSS changes on child elements cause conflicts with parent hover effects

I've come across the following html code : .logo { display: inline-block; width: 30px; position: absolute; top: 50%; opacity: 0; transition: 0.6s; } .container:hover .logo { opacity: 1; transition: 0.6s; } .container:hover .pictur ...

htmlcss

What's the best way to ensure that columns clear properly when using bootstrap?

Instead of providing code to solve an issue, I am using Bootstrap and encountering problems with the roster section where the heights are inconsistent. My temporary solutions involved adding classes to specific divs or setting fixed column heights, but I&a ...

jqueryhtmlcsstwitter-bootstrap

Customizing existing Mui classes through the use of makeStyles

Recently, I made a small change in my approach to styling by moving CSS directly into my component files using styled components, emotion, and make styles. This decision was driven by the benefits of easier management and improved development experience. A ...

cssreactjsmaterial-ui

Why is the defaultDate property not functioning properly in Material-UI's <DatePicker/> component with ReactJS?

I recently implemented the <DatePicker/> component from Material-UI ( http://www.material-ui.com/#/components/date-picker ) in my project. I encountered an issue while trying to set the defaultDate property to the current date on my computer, as it r ...

javascriptcssreactjsdatepickermaterial-ui

CSS animation for horizontal scrolling with sticky positioning is not functioning as intended

I've designed a creative way to achieve infinite horizontal scrolling using CSS animation, and my goal is to make the first element in the list stick in place. Everything works smoothly when I utilize the left property within the @keyframes. However, ...

htmlcsscss-animationscss-positioncss-transforms

Issue with CSS on various mobile devices

Using this CSS to display a fixed part at the bottom of the mobile screen, I noticed that it works well on the Samsung Grand Prime but appears narrower on the Samsung J7 Max. Here is the code snippet and images for reference: .footer { position: fixed ...

cssresponsive

Tips for preventing the state of a checkbox from being saved in the browsing history

I have implemented a mobile menu using a checkbox, with the following simplified code: input, ul { display: none; } label { cursor: pointer; } input:checked ~ ul { display: block; } <input type="checkbox" id="toggle-menu" /> <label for="t ...

htmlcss

Guidelines for attaching a div to the bottom of a page?

I have a navigation menu inside div.wrapper, and I am trying to make the div.wrapper stick to the footer. <div class="wrapper"> <div id="menu"> <ul> <li>1.</li> <li>2.</li> ...

javascriptjquerycsshtml

Tips on preventing the constant shifting of my webpage div elements when resizing the browser

Whenever I resize my webpage browser, the 3 text input boxes move and overlap, causing the page layout to become messy. View of The Browser in full screen (normal) View of The Browser when it's smaller (not normal) As a beginner programmer, I have ...

htmlcssformatting

Guide to positioning an anchor tag in the middle of a container, ensuring the anchor fills the entire space of the container

I'm currently working on making an anchor element expand to cover 100% of its parent element, allowing the entire area to be clickable while also centering the text both vertically and horizontally within the parent. I need some guidance on what CSS c ...

htmlcss

When hovering over nav bar links, shadows are not displayed

When hovering over the navbar links, I am able to change their color but a shadow at the bottom is missing. Is there a way to add a shadow at the bottom like it had before when not hovered? Visit this link for more information ...

htmlcss

What is the solution to prevent angular-material components from covering my fixed navbar?

After creating a navbar using regular CSS3, I incorporated input fields and buttons from angular material. However, my sticky navbar is being obscured by the components created with angular material. Here is the CSS for the navbar: position: sticky; top: ...

cssangularangular-materialangular7

What is the method used to incorporate the radial gradient in this design?

As I was browsing the internet, I came across several websites with beautiful natural gradients on their backgrounds. However, I'm puzzled as to how they achieved this effect. It doesn't seem like a simple image file because the gradient adjusts ...

css

Guide to positioning an image at the center across 2 columns using Bootstrap

Looking to create a split screen Bootstrap 4 layout with an image in the center overlapping the two columns. Have successfully set up two equal columns but struggling to position the image to overlap. Have experimented with position:absolute and float:lef ...

htmltwitter-bootstrapcssbootstrap-4