React Bootstrap Color Modes

Last Updated : 14 Mar, 2024

Color modes in React-Bootstrap are applied through props or CSS classes, providing flexibility in design customization across different components.

Some of the commonly used color modes include:

Background Colors: Modify the background color of components.
Text Colors: Adjust the text color for improved readability and visual appeal.
Border Colors: Customize the border color of elements to enhance visual hierarchy.
Button Variants: Apply different color variants to buttons for distinct visual styles.
Alert Variants: Customize alert components with various color modes to convey different messages effectively.
Badge Variants: Modify badge components to highlight important information using different color options.

These color modes contribute to a consistent and visually appealing user interface, enhancing the overall user experience.

Approach to Implement React Bootstrap Color Modes:

First, install the react-bootstrap using the above-mentioned command.
After completing the installation, Now in the file app.js write the code following the below instructions.

Steps to Creat React Application And Installing Module:

Step 1: Create a React application using the following command.

npx create-react-app foldername

Step 2: After creating your project folder i.e. foldername, move to it using the following command.

cd foldername

Step 3: After creating the ReactJS application, Install the required modules using the following command.

npm install react-bootstrap bootstrap

Step 4: Add the below line in index.js file.

import 'bootstrap/dist/css/bootstrap.css';

Project Structure:

The uodated dependencies in package.json file will look like:

"dependencies": {
    "react": "^18.2.0",
    "react-bootstrap": "^2.10.0",
    "react-dom": "^18.2.0",
    "web-vitals": "^2.1.4"
},

Example 1: Below is an example of Background Color for a button:

JavaScript

// App.jsx
import React from "react";
import Button from "react-bootstrap/Button";

function App() {
    return (
        <>
            <Button variant="info">
                Blue Button
            </Button>
            <Button variant="warning">
                Yellow Button
            </Button>
            <Button variant="danger">
                Red Button
            </Button>
            <Button variant="success">
                Green Button
            </Button>
        </>
    );
}

export default App;

Output:

Example 2: Below is an example of Alert Variant using color modes in React Bootstrap:

JavaScript

// App.jsx

import React from "react";
import Alert from "react-bootstrap/Alert";omp/ButtonGrouping";

function App() {
  return (
    
      <>
    <Alert variant="success">
      This is a green alert!
    </Alert>
    <Alert variant="warning">
    This is a yellow alert!
     </Alert>
     <Alert variant="info">
     This is a sky blue alert!
    </Alert>
    <Alert variant="primary">
      This is a blue alert!
    </Alert>
    <Alert variant="danger">
    This is a red alert!
     </Alert>

      </>
      
  );
}

export default App;