Is the primary color modification in Bootstrap failing to take effect?

Question

Is the primary color modification in Bootstrap failing to take effect?

Currently, I am working on a react app and I have successfully integrated Bootstrap React.

One of the tasks I wanted to accomplish was changing the primary color from the default blue to a different shade. To do this, I navigated to bootstrap/scss/variable.scss

Within the file, I made the necessary change by updating the code to the following:

$blue: #445448 !default;

By changing the value of $primary: $blue !default;, I expected the primary color to reflect the new shade but it still shows as blue.

After trying to troubleshoot the issue, I stopped the server, ran npm start again but unfortunately, the changes were not reflected.

css reactjs bootstrap-4

Answer 1

Answer №1

To customize Bootstrap, create a file named custom.scss and include the following:

// Override Bootstrap variables here
// Change the primary Bootstrap color
$primary: #12a2f9;

@import "~bootstrap/scss/bootstrap"

Ensure that you define the variable overrides before importing Bootstrap.

Import this file before main.scss or after importing Bootstrap in either App.js or index.js

If your project structure resembles this:

App.js, include the following:
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
// Import the custom variables
import "./custom.scss";
// Import the SCSS code
import "./main.scss";

ReactDOM.render(
    <App />,
  document.getElementById("root")
);

Answer 2

To customize Bootstrap, create a file named custom.scss and include the following:

// Override Bootstrap variables here
// Change the primary Bootstrap color
$primary: #12a2f9;

@import "~bootstrap/scss/bootstrap"

Ensure that you define the variable overrides before importing Bootstrap.

Import this file before main.scss or after importing Bootstrap in either App.js or index.js

If your project structure resembles this:

App.js, include the following:
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
// Import the custom variables
import "./custom.scss";
// Import the SCSS code
import "./main.scss";

ReactDOM.render(
    <App />,
  document.getElementById("root")
);

Is the primary color modification in Bootstrap failing to take effect?

Answer №1

Similar questions

Mixing box-shadow and blur filters can result in unusual artifacts appearing in Webkit browsers

Unable to pass React API test using Nock due to the error message "Nock: Request does not match any routes."

Confusing Vaadin Component Styling Dilemma

Display subpages of WordPress site in a dropdown menu on the navigation bar

I'm wondering why my typography components display correctly on my local host, but not on my aws server. Any insights on

Error message: Trying to use the data type 'String' as an index in the React dynamic component name map won't work

What could be causing my Apollo useLazyQuery to be triggered unexpectedly within a React hook?

chrome side column must be set to 100% height

How can we use SWR to fetch user data conditionally based on their logged-in state?

adjust the div's position based on the window's scrolling bars

Implementing Autocomplete feature in Reactjs with Ant Design Library

Modify the default background color for the chosen element in the tree structure

Divide the <ul> element into two columns with CSS only if the number of <li> items is more than 5

React-snap causing trouble with Firebase

The variablewidth feature in Slick Carousel is malfunctioning

Reducing the amount of text displayed on ion-text to a minimum

Tips for sequentially arranging and rearranging an array of numbers, even when duplicates are present

Ways to enhance the custom input field within the React Table Library

Increased/Decreased impact

Vuejs dropdown selections are not working as expected due to a bug