How to Change Colors for a Button in React-Bootstrap?
In this tutorial, we will learn how to change the colors of buttons in React-Bootstrap. The Button component in React-Bootstrap is a simple button with CSS and the effects of Boostrap. We can apply different colors based on the different situations like Error, Success, etc.
Steps to create the application:
- Create a new react project:
npx create-react-app change-button-color
- Navigate to the project and install react-bootstrap:
cd change-button-color
npm install react-bootstrap bootstrap
- Add the bootstrap stylesheet CSS to the in the index.js file:
import "bootstrap/dist/css/bootstrap.min.css";
Project Structure:
Step to Run Application:
Run the application using the following command from the root directory of the project:
npm start
Example 1: Using theme colors, modify the button color
App.js
Javascript
import { Button } from "react-bootstrap" ; import "./App.css" ; function App() { return ( <div className= "App" > <h1 className= "text-center" > Welcome to w3wiki </h1> <h3 className= "text-center mt-5" > How to change colors for a button in React-Bootstrap </h3> <div className= "container mt-5 d-flex justify-content-center" > <Button onClick={() => { alert( "Welcome to w3wiki Primary Button" ); }} className= "m-4" variant= "primary" > Primary </Button> <Button onClick={() => { alert( "Welcome to w3wiki Success Button" ); }} className= "m-4" variant= "success" > Success </Button> <Button onClick={() => { alert( "Welcome to w3wiki Warning Button" ); }} className= "m-4" variant= "warning" > Warning </Button> <Button onClick={() => { alert( "Welcome to w3wiki Danger Button" ); }} className= "m-4" variant= "danger" > Danger </Button> </div> </div> ); } export default App; |
Output:
Example 2: Using style properties to modify button color
Javascript
//App.js import { Button } from "react-bootstrap" ; import "./App.css" ; function App() { return ( <div className= "App" > <h1 className= "text-center" > Welcome to w3wiki </h1> <h3 className= "text-center mt-5" > How to change colors for a button in React-Bootstrap </h3> <div className= "container mt-5 d-flex justify-content-center" > <Button onClick={() => { alert( "Welcome to w3wiki Pink Button" ); }} className= "m-4" style={ { backgroundColor: "#FF1493" , borderColor: "#FF1493" }}> Pink </Button> <Button onClick={() => { alert( "Welcome to w3wiki Light Green Button" ); }} className= "m-4" style={ { backgroundColor: "#32CD32" , borderColor: "#32CD32" }}> Light Green </Button> <Button onClick={() => { alert( "Welcome to w3wiki Deep Green Button" ); }} className= "m-4" style={ { backgroundColor: "#149403" , borderColor: "#149403" }}> Deep Green </Button> <Button onClick={() => { alert( "Welcome to w3wiki Deep Blue Button" ); }} className= "m-4" style={ { backgroundColor: "#11077d" , borderColor: "#11077d" }}> Deep Blue </Button> </div> </div> ); } export default App; |
Output:
Contact Us