React Bootstrap — Badges, Breadcrumbs, and Buttons

Photo by Cristina Gottardi on Unsplash

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