How to add custom styles to React Bootstrap components?

Last Updated : 25 Jul, 2024

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.

Table of Content

Prerequisite

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.

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; }

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;

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:

How to get a react bootstrap card to center vertically?

gpancomputer

Improve

Article Tags :

How to add custom styles to React Bootstrap components?

Prerequisite

Steps to create React Application and install required modules:

Approach 1:Using External CSS file

Output:

Approach 2: Using Inline Styles

Output:

Similar Reads

React Bootstrap Basics

React Bootstrap Layout

React Bootstrap Form

React Bootstrap Components

React Bootstrap Utilities

React Bootstrap Questions