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
Steps to create React Application and install required modules:
Step 1: Create a React application using the following command:
npx create-react-app custom-styleStep 2: After creating your project folder(i.e. custom-style), move to it by using the following command:
cd custom-styleStep 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 bootstrapStep 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.
/* 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;
}
//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.
// 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;
