Modifying Bootstrap 5 color themes does not affect the button color classes

After following the steps outlined in this guide, I successfully customized the default colors of Bootstrap 5 in my React application created using create-react-app. Within my /src/scss/custom.scss file, I can easily utilize any newly defined variables and classes that I have created work without any issues. However, I am facing a challenge with the default Bootstrap classes that involve colors such as btn-primary, bg-secondary, or text-white. Even though I have made changes to these colors in my custom stylesheet, they are not reflecting when I use the corresponding Bootstrap classes. For instance, despite updating the color assigned to btn-primary, the button still appears in the original blue shade that is the standard Bootstrap primary color.

What could be causing this discrepancy?

cssreactjstwitter-bootstrapreact-bootstrapbootstrap-5

Answer №1

Ensure that when you @import Bootstrap, it comes after the custom.scss file. This sequence allows your modifications to take precedence over the default theme colors in Bootstrap's variables.scss (referenced in bootstrap.scss).

/* custom.scss */
$primary: #362ec4;
$secondary: #8f5325;
$success: #3e8d63;
$info: #7854e4;
$warning: #b8c924;
$danger: #d62518;
$light: #f8f9fa;
$dark: #343a40;
/* end custom.scss */

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

Engage with the Codeply community

Additionally, be mindful that the article unnecessarily duplicates the theme-colors map, which is not required unless introducing a new theme color variant such as $accent.

For more information, refer to: Troubleshooting issues with overriding $theme-color in bootstrap

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

When beginning a test with Jest, an error has occurred in NextJs stating: "TypeError: replace is not a function"

This is a NavBar component that includes a search input. When used, it redirects to another page displaying the search results. The redirection method being utilized here is using "replace" instead of "push". import React, { useEffect, useState } f ...

reactjsnext.jsjestjs

Adjust the dimensions of the HTML button to match that of its background

Typically, buttons are created with specific dimensions like this: <button style="width: 120px; height: 40px;"> Mememe <button> Afterwards, a background is added that matches the size of the button: button { background-size: 100% 100%; } ...

htmlcssbuttonbackground-image

Ways to extract URL parameters from a React Router route

I find myself in a bit of a bind as I work on developing a basic CRUD recipe app using the MERN (Mongo, Express, React, and Node) stack. The challenge arose when I tried to implement React Router after already establishing the core logic, causing some frus ...

reactjsexpressreact-router

Each time a page loads, the react useContext feature is causing the web socket connection to reset

I have integrated websockets into various parts of my nextJS application and need to make sure they are accessible everywhere without resetting the socket connection. Whenever the connection is reset, it loses all the rooms it was connected to, causing iss ...

javascriptreactjswebsocketnext.jssocket.io

Utilizing dynamic CSS classes within an ngFor loop

Struggling with my pure CSS star rating implementation, specifically with the hover effect. When hovering on one rating star, the behavior affects the first or all five stars of the previous question. https://i.sstatic.net/cpjvw.png In the provided image ...

htmlcssangular

Tips for utilizing CSS perspective to align a div so it seamlessly fits within an SVG laptop display

Confusion may arise from the question at hand. My goal is to utilize CSS to absolutely position a div with perspective in a way that resembles it being inside the laptop screen I created with an SVG. I am under the impression that achieving this effect is ...

htmlcssperspective

Teaching the render engine: The process of ReactJS guiding the render engine through updating the DOM component

I recently learned that ReactJS utilizes Virtual DOM to efficiently compare and update only the necessary parts of the actual DOM node, rather than refreshing all nodes. It's interesting how React instructs the render engine to target specific nodes f ...

javascriptreactjs

Discover the magic of DevTools: Easily view real-time SCSS updates without the hassle of constantly saving your changes

The question at hand fails to provide a complete picture of the situation. While I am familiar with Workspaces and SASS source-maps, I can already track the line in the scss file where the specific rule is located that I wish to modify, thanks to the Style ...

csssassgoogle-chrome-devtools

I ran into an issue trying to modify the color and thickness of the divider line in MaterialUI

Check out my code on codesandbox here. I'm trying to adjust the line thickness and color of the separator in my MaterialUI project, but I'm having trouble getting it to work. I've looked at a few examples, but nothing seems to be working for ...

javascriptcssreactjsmaterial-ui

Angular background image not displayed

After searching extensively, I came across many examples that didn't work for me. I'm not sure what I'm doing wrong and I need assistance! I noticed that I can see the image if I use the <img> tag, but not when I try to set it as a ba ...

cssangulartypescriptsanitize

Why is it not possible for me to place my image and text side by side?

I've been working on my personal portfolio website and ran into an issue when trying to position the image with text that says Ib student. I attempted using the bootstrap box model which didn't work, followed by using float, but that also didn&ap ...

htmlcssbootstrap-5

Are you looking for a solution to resolve Module Federation import paths in ESLint when using TypeScript?

I have been immersed in developing this cutting-edge Micro Front-End project for quite some time now. Leveraging TypeScript along with Module Federation configurations has been crucial to mitigate type issues, thanks to the @cloudbeds/webpack-module-federa ...

reactjstypescript-eslintwebpack-module-federation

Header width does not fully occupy the available space

I'm working on a table that includes a div element for adding a header to it. <div class="table-responsive"> <table class="table"gt; <thead> <div class="topPic"><span><i class="fa fa-tree fa-2x"></i>< ...

htmlcssresponsive-design

Is there a way to assign a value of 1 to the input-group spinner?

At first, I thought this problem would be easy to solve, but now I'm finding myself stuck. My goal is to have the input-group spinner display the value 1 when a user opens the application. <input id="option1" type="number" min="1" value ="1" ...

htmlangularjstwitter-bootstrap

Can the meta viewport be eliminated using a script?

I currently do not have access to the HTML file on the server side, but I can make changes by adding additional HTML to the website. My issue is with a non-responsive site listed below, which now requires me to zoom in after it loads due to the new viewpor ...

javascriptjquerycssviewport

Trouble displaying CSS content image in Internet Explorer

Usually, I use Chrome as my default browser. However, I recently decided to test whether my website functions properly on other browsers as well. In Chrome, the header displays my logo with great quality using content:url. But when I tried accessing my w ...

cssinternet-explorergoogle-chrome

Using mui autocomplete alongside react-hook-form: defaultValue within formData

When setting the defaultValue of the Autocomplete component like this: <Controller control={control} name={name} render={({field: {onChange, value}}) => ( <Autocomplete freeSolo={freeSolo} options={options} renderInput= ...

reactjsmaterial-uinext.jsreact-hook-form

The Safari 7.1+ browser seems to be having trouble with the spotlight effect

Why is the CodePen not functioning properly in Safari? Despite working well in Chrome and Firefox, it completely fails to work in Safari 7.1+. Can anyone provide some insights? http://codepen.io/cchambers/pen/Dyldj $(document).on("mousemove", function( ...

javascriptjqueryhtmlcsssafari

Learn how to center content and stretch a column using Vuetify frameworks

Looking for a layout with 2 columns of equal height and centered content vertically? Here's how to achieve it using Vuetify! Check out the code snippet below: <div id="app"> <v-app> <v-row align="center"> ...

htmlcssvue.jsvuetify.js

Utilizing the empty space to the right of an image in HTML

What could be causing the empty space to the right of my image? This is how the HTML file appears: ... <body> <div class="image"> <img src="image.jpg" alt="Picture here" id="image" align="middle"></img> </div> ...

htmlcssimage