Reactstrap — Badges and Breadcrumbs

Photo by Natalie Scott on Unsplash

Reactstrap is a version Bootstrap made for React.

It’s a set of React components that have Boostrap styles.

In this article, we’ll look at how to add badges and breadcrumbs with Reactstrap.

Badges

We can add badges to display some content besides another piece of text.

To add them, we use the Badge component:

import React from "react";
import { Badge } from "reactstrap";
import "bootstrap/dist/css/bootstrap.min.css";
export default function App() {
  return (
    <div className="App">
      <h1>
        Heading <Badge color="primary">New</Badge>
      </h1>
      <h2>
        Heading <Badge color="primary">New</Badge>
      </h2>
      <h3>
        Heading <Badge color="primary">New</Badge>
      </h3>
      <h4>
        Heading <Badge color="primary">New</Badge>
      </h4>
      <h5>
        Heading <Badge color="primary">New</Badge>
      </h5>
      <h6>
        Heading <Badge color="primary">New</Badge>
      </h6>
    </div>
  );
}

We add badges in various heading tags.

The color prop changes the color.

The badges scale to the same size as the text beside it.