Tips for customizing Bootstrap theme color schemes in a React/Redux application that has been bootstrapped

Question

Tips for customizing Bootstrap theme color schemes in a React/Redux application that has been bootstrapped

As a newcomer to REACT, I am facing an issue with changing the theme colors in my freshly bootstrapped react application.

I have gone through some solutions suggested by others but none of them seem to work for me.

My entry point looks like this:

import React from 'react';
import ReactDOM from 'react-dom';
import { App } from './components/App';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap';
import './styles/app.scss';

ReactDOM.render(<App />, document.getElementById('app'));

and I have app.scss stylesheet in src/styles:

@import '_settings.scss';
@import '_base.scss';
@import './components/_header.scss';

I attempted to modify the theme colors here, but they do not reflect any changes:

@import "node_modules/bootstrap/scss/bootstrap";

$theme-colors: (
  "primary": #991196,
  "danger": #ff4136
);

Can anyone guide me on how to make this work? The existing answers and tutorials I've looked at use different methods.

The version of Bootstrap I am using is:

"bootstrap": "^4.0.0"

css reactjs sass bootstrap-4

Answer 1

Answer №1

Check out this resource for using Bootstrap with webpack in ReactJS: Bootstrap webpack

This method shows how to import the compiled version of Bootstrap CSS into your project.

Instead of simply importing 'bootstrap/dist/css/bootstrap.min.css', follow these steps:

import 'bootstrap/dist/css/bootstrap.min.css'; //Avoid this

Instead, in your app.scss file, define your color variables first:

$primary: #13C7CD;
$danger: red;

Then import the SCSS version of Bootstrap using:

@import '~bootstrap/scss/bootstrap';

The use of ~ signifies that webpack will locate it in the node_modules directory.

After this, import the app.scss file in your main JS file (e.g., index.js or app.js):

import './styles/app.scss';

How Does This Work?

By defining your color variables before importing Bootstrap SCSS, the resulting compiled CSS will include your specified color values.

For Vite users, make sure to update your vite.config.js as follows:

const path = require('path')

export default {
  root: path.resolve(__dirname, 'src'),
  resolve: {
    alias: {
      '~bootstrap': path.resolve(__dirname, 'node_modules/bootstrap'),
    }
  },
  server: {
    port: 8080,
    hot: true
  }
}

Then in your SCSS file:

@import ""~bootstrap/scss/bootstrap"";

Answer 2

Check out this resource for using Bootstrap with webpack in ReactJS: Bootstrap webpack

This method shows how to import the compiled version of Bootstrap CSS into your project.

Instead of simply importing 'bootstrap/dist/css/bootstrap.min.css', follow these steps:

import 'bootstrap/dist/css/bootstrap.min.css'; //Avoid this

Instead, in your app.scss file, define your color variables first:

$primary: #13C7CD;
$danger: red;

Then import the SCSS version of Bootstrap using:

@import '~bootstrap/scss/bootstrap';

The use of ~ signifies that webpack will locate it in the node_modules directory.

After this, import the app.scss file in your main JS file (e.g., index.js or app.js):

import './styles/app.scss';

How Does This Work?

By defining your color variables before importing Bootstrap SCSS, the resulting compiled CSS will include your specified color values.

For Vite users, make sure to update your vite.config.js as follows:

const path = require('path')

export default {
  root: path.resolve(__dirname, 'src'),
  resolve: {
    alias: {
      '~bootstrap': path.resolve(__dirname, 'node_modules/bootstrap'),
    }
  },
  server: {
    port: 8080,
    hot: true
  }
}

Then in your SCSS file:

@import ""~bootstrap/scss/bootstrap"";

Answer 3

Answer №2

To apply overrides and incorporate Bootstrap fully into your project, you can do so within the app.scss file. It's crucial to import Bootstrap after making any theme color adjustments to override the default colors defined in bootstrap _variables.scss.


    @import '_settings.scss';
    @import '_base.scss';
    @import './components/_header.scss';

    /* Import only the necessary Bootstrap files for customization */
    @import "node_modules/bootstrap/scss/functions";
    @import "node_modules/bootstrap/scss/variables";

    /* Implement customizations */
    $theme-colors: (
      "primary": #991196,
      "danger": #ff4136
    );

    /* Import bootstrap to apply changes */
    @import "node_modules/bootstrap/scss";

Once the react app is built and SASS is compiled, the resulting CSS will reflect your modifications along with Bootstrap, eliminating the need to manually import Bootstrap into react separately.

Check out a demo here:

Answer 4

To apply overrides and incorporate Bootstrap fully into your project, you can do so within the app.scss file. It's crucial to import Bootstrap after making any theme color adjustments to override the default colors defined in bootstrap _variables.scss.


    @import '_settings.scss';
    @import '_base.scss';
    @import './components/_header.scss';

    /* Import only the necessary Bootstrap files for customization */
    @import "node_modules/bootstrap/scss/functions";
    @import "node_modules/bootstrap/scss/variables";

    /* Implement customizations */
    $theme-colors: (
      "primary": #991196,
      "danger": #ff4136
    );

    /* Import bootstrap to apply changes */
    @import "node_modules/bootstrap/scss";

Once the react app is built and SASS is compiled, the resulting CSS will reflect your modifications along with Bootstrap, eliminating the need to manually import Bootstrap into react separately.

Check out a demo here:

Answer 5

Answer №3

https://i.sstatic.net/VpGDM.pngThe easiest method...

Ensure to include your custom styles prior to adding BOOTSTRAP styles. And that's all there is to it! 'Enjoy coding'

Answer 6

https://i.sstatic.net/VpGDM.pngThe easiest method...

Ensure to include your custom styles prior to adding BOOTSTRAP styles. And that's all there is to it! 'Enjoy coding'

Tips for customizing Bootstrap theme color schemes in a React/Redux application that has been bootstrapped

Answer №1

Answer №2

Answer №3

Similar questions

JQuery ID Media Queries: Enhancing responsive design with targeted

Placing horizontal text over a Bootstrap 5 grid

How to use the Enter key to submit a form in react.js with the help of "@material-ui/core/Button"

Tips on expanding properties for Material-UI components with Typescript?

The size of the cursor varies depending on the line it's placed on

Error during Next.js compilation, undefined property

What is the best way to create a continuous typewriter effect in Next.js?

The Safari browser displays the mobile-friendly version of the website

There is an unnecessary gap between the parent div and the image contained within it

Rendering only a portion of a component when the state updates using MobX or SWR Mutation

Exploring the possibilities offered by utilizing semantic-ui-react within a React

flex child moves outside parent when available space shifts

Adding Information to a Material Design Card

Tips for emphasizing a row of various list boxes when hovering in asp.net

What is the best way to create a <div> that will automatically start a new line based on the user's input?

Whenever I attempt to type a command in Ubuntu, it shows me an error message saying "/usr/bin/env: ‘bash ’: No such file

What could be causing the error message `this.props.data is undefined` to appear for me?

What is the best way to set up Webpack for a React application that includes Express.js, GraphQL, and separate client and server folders

Whenever a user logs in or logs out from the child component, the app.js is not being re-rendered

What is the best way to dynamically change the color of my component depending on the prop passed to it?