React Bootstrap is one version of Bootstrap made for React.
It’s a set of React components that have Bootstrap styles.
In this article, we’ll look at how to work with React Bootstrap’s badges, breadcrumbs, and buttons in our React app.
Badges
Badges are components that lets us display some text in a box beside other text.
It’s sized according to the neighboring text.
For instance, we can use it by writing:
import React from "react";
import Badge from "react-bootstrap/Badge";
import "bootstrap/dist/css/bootstrap.min.css";
export default function App() {
return (
<>
<div>
<h1>
heading <Badge variant="primary">New</Badge>
</h1>
<h2>
heading <Badge variant="secondary">New</Badge>
</h2>
<h3>
heading <Badge variant="warning">New</Badge>
</h3>
<h4>
heading <Badge variant="success">New</Badge>
</h4>
<h5>
heading <Badge variant="danger">New</Badge>
</h5>
<h6>
heading <Badge variant="secondary">New</Badge>
</h6>
</div>
</>
);
}
We have the variant prop that lets us change the background color.
The size of it will match the neighboring text.
Contextual Variations
We can change the variant prop to style the badge the way we want.
For example, we can write:
import React from "react";
import Badge from "react-bootstrap/Badge";
import "bootstrap/dist/css/bootstrap.min.css";
export default function App() {
return (
<>
<div>
<p>
heading <Badge variant="primary">New</Badge>
</p>
<p>
heading <Badge variant="secondary">New</Badge>
</p>
<p>
heading <Badge variant="warning">New</Badge>
</p>
<p>
heading <Badge variant="success">New</Badge>
</p>
<p>
heading <Badge variant="danger">New</Badge>
</p>
<p>
heading <Badge variant="dark">New</Badge>
</p>
<p>
heading <Badge variant="light">New</Badge>
</p>
</div>
</>
);
}
We change the variant to those values so that they have different background colors.
Pill
Also, we can change the style to the pill style, which is rounder than the regular badge.
For example, we can write:
import React from "react";
import Badge from "react-bootstrap/Badge";
import "bootstrap/dist/css/bootstrap.min.css";
export default function App() {
return (
<>
<div>
<p>
heading{" "}
<Badge pill variant="primary">
New
</Badge>
</p>
<p>
heading{" "}
<Badge pill variant="secondary">
New
</Badge>
</p>
<p>
heading{" "}
<Badge pill variant="warning">
New
</Badge>
</p>
<p>
heading{" "}
<Badge pill variant="success">
New
</Badge>
</p>
<p>
heading{" "}
<Badge pill variant="danger">
New
</Badge>
</p>
<p>
heading{" "}
<Badge pill variant="dark">
New
</Badge>
</p>
<p>
heading{" "}
<Badge pill variant="light">
New
</Badge>
</p>
</div>
</>
);
}
We add the pill prop so that we get rounded badges.
Breadcrumbs
We can add breadcrumbs to show the navigation hierarchy with separators separating each level.
For example, we can write:
import React from "react";
import Breadcrumb from "react-bootstrap/Breadcrumb";
import "bootstrap/dist/css/bootstrap.min.css";
export default function App() {
return (
<>
<Breadcrumb>
<Breadcrumb.Item href="#">Home</Breadcrumb.Item>
<Breadcrumb.Item href="https://example.com/">Profile</Breadcrumb.Item>
<Breadcrumb.Item active>Data</Breadcrumb.Item>
</Breadcrumb>
</>
);
}
We have the Breadcrumb component with Breadcrumb.Item components inside.
href has the URL to go when we click on the breadcrumb link.
Buttons
React Bootstrap provides us with multiple styles of buttons.
We can change the style with the variant prop.
For example, we can write:
import React from "react";
import Button from "react-bootstrap/Button";
import "bootstrap/dist/css/bootstrap.min.css";
export default function App() {
return (
<>
<Button variant="primary">button</Button>{" "}
<Button variant="secondary">button</Button>{" "}
<Button variant="success">button</Button>{" "}
<Button variant="warning">button</Button>{" "}
<Button variant="danger">button</Button>{" "}
<Button variant="info">button</Button>{" "}
<Button variant="light">button</Button>{" "}
<Button variant="dark">button</Button>{" "}
<Button variant="link">Link</Button>
</>
);
}
We have different varieties of buttons with different background colors.
variant has the background color of the button.
If the variant is link , then it’s displayed as a link.
Outline Buttons
We can make buttons have a light background and colored outline with the outline- prefix for the variant prop.
For example, we can write:
import React from "react";
import Button from "react-bootstrap/Button";
import "bootstrap/dist/css/bootstrap.min.css";
export default function App() {
return (
<>
<Button variant="outline-primary">button</Button>{" "}
<Button variant="outline-secondary">button</Button>{" "}
<Button variant="outline-success">button</Button>{" "}
<Button variant="outline-warning">button</Button>{" "}
<Button variant="outline-danger">button</Button>{" "}
<Button variant="outline-info">button</Button>{" "}
<Button variant="outline-light">button</Button>{" "}
<Button variant="outline-dark">button</Button>{" "}
<Button variant="outline-link">Link</Button>
</>
);
}
Now we get buttons with the outline colored and white background.
Button Tags
We can change the tag that a Button is rendered as with the as prop.
For instance, we can write:
import React from "react";
import Button from "react-bootstrap/Button";
import "bootstrap/dist/css/bootstrap.min.css";
export default function App() {
return (
<>
<Button as="input" type="button" value="button" />{" "}
<Button as="input" type="submit" value="submit" />{" "}
<Button as="input" type="reset" value="reset" />
</>
);
}
We have the as prop to render the component we the input element.
Then we specified the type prop for the input field type.
The value has the text content of the button.
Conclusion
Badges let us display a small piece of text beside another piece of text.
Also, breadcrumbs let us display navigation hierarchy with links.
And buttons can be styled and rendered in various ways.
