React follows the component-based architecture that contains the various HTML elements to create the user interface module of an app.
Every element in a component contains separate properties based on its type. For example, a file upload control has type as a file, and a text input control has type as a text.
In this guide, you will learn how to set custom styles and classes using bsStyle
property to the react-bootstrap
button.
Note
react-bootstrap
was supporting the property calledbsStyle
, but now it’s been replaced by a new property calledvariant
.
The react-bootstrap
element is entirely the same as the vanilla
bootstrap; the only difference is that all the aspects of react-bootstrap
are rewritten and used by the React app.
The variant property provides the style variant to the element according to specific behavior like primary, secondary, danger, warning.
Styling is one of the essential aspects when it comes to the custom styles of an element. Thus, you can use a variant property.
1<Button variant="default">
2 TEST BUTTON
3</Button>
The <Button>
element could be used from the library react-bootstrap
, and the property variant
defines the default styles to the button element.
Now, what if you want to add another different color or background to the button? This solution uses the styles
property along with the variant
property, and the button
element could be modified with custom styles.
Below is the complete example that uses variant
and style
properties together.
1import React, { Component } from "react";
2import { Button } from "react-bootstrap";
3import "bootstrap/dist/css/bootstrap.min.css";
4import './style.css';
5
6class CustomStyle extends Component {
7 render() {
8 return (
9 <div>
10 <span>Add custom style using bsStyle in react-bootstrap</span>
11 <hr />
12 <Button
13 variant="default"
14 style={{ color: "white", background: "silver" }}
15 >
16 TEST BUTTON
17 </Button>
18 </div>
19 );
20 }
21}
22
23export default CustomStyle;
As seen in the above example, there is one <Button>
element along with the two different properties called variant
and style
as shown below.
1<Button
2 variant="default"
3 style={{ color: "white", background: "silver" }}
4>
5 TEST BUTTON
6</Button>
By using variant
, the default styles would be applied, and by using the style
the added property based on the custom styles would be applied.
In the above example, we have applied custom styles along with the variant property. Applying styles seems to be a static approach, and it's not suitable for large apps.
You can apply the different custom class names along with the variant property, but before that creating the classes in a stylesheet file is a must and is explained below.
styles.css
1.textColor {
2 color: white
3}
4
5.bgColor {
6 background: purple
7}
In the stylesheet file, there are two different classes, one to set the font color, and another to set the background color of the button element.
Now the next step is to apply those two classes to the button element as shown below.
1render() {
2 return (
3 <div>
4 <span>Add custom style using bsStyle in react-bootstrap</span>
5 <hr />
6 <Button variant="default" className="cool">
7 TEST TEXT
8 </Button>
9 </div>
10 );
11}
For example, there is one <Button>
element used along with two different properties variant
and className
.
In the previous example, style
property was used when the styles are specified inline, but in the above example there are two custom class names provided as shown below.
1<Button variant="default" className="textColor bgColor">
2 TEST TEXT
3</Button>
By doing this, the default variant would be applied to the button element, and the custom classes reflect in the button element.
The library react-bootstrap
is flexible in defining the customized behavior of any element that resides in your React app in some context by using the added property like variant
.
In this guide, you have learned two simple approaches to apply custom styles using bsStyle/variant property, and I hope it will be helpful while styling react-bootstrap elements
.