How to add custom styles to React Bootstrap components?

In react-bootstrap, there are many components that we can use to make the application more attractive and interactive. But while using these components, we also need to customize the styling of the components in terms of color, effects, hovering, etc. So this can be done by using custom styling code like CSS. We can use the custom classes and manage the properties of the custom classes from the CSS code.

In this article, we will see how we can add custom styles to React Bootstrap components.

Prerequisite

• React JS
• React-Bootstrap

Steps to create React Application and install required modules:

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

npx create-react-app custom-style

Step 2: After creating your project folder(i.e. custom-style), move to it by using the following command:

cd custom-style

Step 3: Now install react-bootstrap in your working directory i.e. custom-style by executing the below command in the VScode terminal:

npm install react-bootstrap bootstrap

Step 4: Now we need to Add Bootstrap CSS to the index.js or App.js file:

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

Approach 1:Using External CSS file

In this approach, we are using the Modal Component from the React-Bootstrap library. We have imported two modal components. And for each modal, we have defined the user-defined function. We have assigned the class name to both of these modal components. There is a styling file called App.css in which we have styled the components using the className. We have given custom background color, box style, border size, effects, and many more styling options. We can add more styling as per our needs; this actually makes the application more attractive in terms of interface.

Example 1: Below is the example for above discussed approach.

Javascript

//App.js
import React, { useState } from "react";
import {Modal, Button,
    } from "react-bootstrap";
import "bootstrap/dist/css/bootstrap.min.css";
import "./App.css";

function Modal1Function() {
    const [show, set_Show] = useState(false);
    const closeModal1 = () => set_Show(false);
    const showModal = () => set_Show(true);
    return (
        <>
            <Button variant="primary"
                    onClick={showModal}
                    className="modal-button">
                Show Modal 1
            </Button>
            <Modal show={show}
                   onHide={closeModal1}
                   className="custom-modal-1">
                <Modal.Header closeButton>
                    <Modal.Title>
                        GeeksforGeeks Modal 1
                    </Modal.Title>
                </Modal.Header>
                <Modal.Body>
                    Modal 1 Has Custom Styling.
                </Modal.Body>
                <Modal.Footer>
                    <Button variant="secondary"
                            onClick={closeModal1}>
                        Close
                    </Button>
                    <Button variant="primary"
                            onClick={closeModal1}>
                        Save Changes
                    </Button>
                </Modal.Footer>
            </Modal>
        </>
)}
function Modal2Function() {
    const [show, set_Show] = useState(false);
    const closeModal2 = () => set_Show(false);
    const showModal2 = () => set_Show(true);
    return (
        <>
            <Button variant="success"
                    onClick={showModal2}
                    className="modal-button">
                Show Modal 2
            </Button>
            <Modal show={show}
                   onHide={closeModal2}
                   className="custom-modal-2">
                <Modal.Header closeButton>
                    <Modal.Title>
                        GeeksforGeeks Modal 2
                    </Modal.Title>
                </Modal.Header>
                <Modal.Body>
                    Modal 2 has Custom Styling.
                </Modal.Body>
                <Modal.Footer>
                    <Button variant="secondary"
                            onClick={closeModal2}>
                        Close
                    </Button>
                    <Button variant="success"
                            onClick={closeModal2}>
                        Save Changes
                    </Button>
                </Modal.Footer>
            </Modal>
        </>
)}
function App() {
    return (
        <div className="App">
            <h1 className="app-title">
                GeeksforGeeks
            </h1>
            <h3 className="app-subtitle">
                Custom Styling to
                Bootstrap Components -
                Example 1
            </h3>
            <div className="button-container">
                <Modal1Function />
                <div className="button-gap" />
                <Modal2Function />
            </div>
        </div>
)}
export default App;

CSS

/* App.css */
.App {
    text-align: center;
}
.app-title {
    color: green;
}
.app-subtitle {
    font-size: 18px;
}
.button-container {
    display: flex;
    justify-content: center;
    align-items: center;
}
.modal-button {
    margin: 10px;
}
.button-gap {
    width: 20px;
}
.custom-modal-1 .modal-content {
    background: linear-gradient(
        45deg,
        #ffd700,
        #ff6347
    );
    color: white;
    border-radius: 10px;
    box-shadow: 0 0 10px
        rgba(0, 0, 0, 0.2);
    transform: rotate(-3deg);
}
.custom-modal-1 .modal-content:hover {
    transform: scale(1.05) rotate(3deg);
    transition: transform 0.2s;
}
.custom-modal-2 .modal-content {
    background: linear-gradient(
        135deg,
        #00bfff,
        #ff6347
    );
    color: white;
    border-radius: 20px;
    box-shadow: 0 0 15px
        rgba(0, 0, 0, 0.3);
    opacity: 0.9;
}
.custom-modal-2 .modal-content:hover {
    transform: translateY(-5px);
    transition: transform 0.2s;
}

Output:

Approach 2: Using Inline Styles

In this approach, we have imported or are using the Alert and Toast components from the React-Bootstrap library. We have used the state hook to manage the state of the components. Here, rather than using the external file for styling, we have used the inline styles to add the custom styles to the Alert and Toast components. Here, we have used the JavaScript objects to define the styles and apply them inline to the elements.

Example: Below is the example of above discussed approach.

Javascript

// App.js
import React, { useState } from "react";
import { Alert, Toast, Button,
    } from "react-bootstrap";
import "bootstrap/dist/css/bootstrap.min.css";

const App = () => {
    const [alert, set_Alert] = useState(false);
    const [toast, set_Toast] = useState(false);
    const showAlertFunction = () => { set_Alert(true);
        setTimeout(() => {
            set_Alert(false)}, 3000)}
    const showToastFunction = () => {
        set_Toast(true);
        setTimeout(() => {
            set_Toast(false)}, 3000)};
    const customAlertStyle = {
        position: "absolute",
        top: "20px",
        left: "50%",
        transform: "translateX(-50%)",
        width: "80%",
        maxWidth: "400px",
        animation:`slide-in-alert
                   0.5s ease-in-out
                   forwards, bounce-alert
                   0.5s ease-in-out 0.5s`,
        background:
            "linear-gradient(45deg, #FFD700, #FF6347)",
        color: "white",
        borderRadius: "10px",
        boxShadow:
            "0 0 10px rgba(0, 0, 0, 0.2)",
        zIndex: 999,
    };
    const customToastStyle = {
        position: "absolute",
        top: "20px",
        right: "20px",
        width: "200px",
        animation:`slide-in-toast 0.5s
                   ease-in-out forwards,
                   rotate-toast 0.5s ease-in-out 0.5s`,
        background:
            "linear-gradient(135deg, #00BFFF, #FF6347)",
        color: "white",
        borderRadius: "10px",
        boxShadow:
            "0 0 10px rgba(0, 0, 0, 0.3)",
        zIndex: 999,
    };
    return (
        <div style={{ marginTop: "30px",
                      color: "green",
                      fontWeight: "bold",}}>
            <h1 style={{ color: "green",
                         fontWeight: "bold",}}>
                GeeksforGeeks
            </h1>
            <h3 style={{ fontSize: "18px",}}>
                Custom Styling to Bootstrap
                Components - Example 2
            </h3>
            <div style={{ marginTop: "20px",
                          display: "flex",
                          gap: "20px",}}>
                <Button variant="primary"
                        onClick={showAlertFunction}>
                    Show Alert
                </Button>
                <Button variant="success"
                        onClick={showToastFunction}>
                    Show Toast
                </Button>
            </div>
            {alert && (
                <Alert variant="danger"
                       onClose={() =>set_Alert(false)}
                       dismissible
                       style={customAlertStyle}>
                    Alert with GeeksforGeeks Text
                </Alert>)}
            {toast && (
                <Toast
                    onClose={() =>set_Toast(false)}
                    style={customToastStyle}>
                    <Toast.Header closeButton={false}>
                        <strong style={{marginRight:"auto",}}>
                            Toast Notification
                        </strong>
                    </Toast.Header>
                    <Toast.Body>
                        Article Submitted Successfully!
                    </Toast.Body>
                </Toast>)}
        </div>
    )};
export default App;

Output: