Category: React Bootstrap

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 cards.

Cards

Cards provide us with a flexible content container with multiple variants and options.

To use it, we can write:

import React from "react";
import Card from "react-bootstrap/Card";
import Button from "react-bootstrap/Button";
import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  return (
    <>
      <Card style={{ width: "20rem" }}>
        <Card.Img variant="top" src="http://placekitten.com/200/200" />
        <Card.Body>
          <Card.Title> Title</Card.Title>
          <Card.Text>
            Some quick example text to build on the card title and make up the
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent
            ultrices ac dolor nec vestibulum. Maecenas vulputate diam ut sem
            tempus, id eleifend tortor hendrerit. Sed non orci massa. Aliquam
            eget lectus a ante convallis gravida. Donec fringilla odio ut magna
            gravida aliquam. Cras molestie non ante vel dictum. Cras lacinia
            molestie lacus, in lacinia sapien imperdiet in. Sed eleifend laoreet
            finibus. Integer semper dictum eros nec eleifend. Nunc quam mi,
            finibus lacinia metus vitae, dapibus ultricies diam. Vivamus ante
            nisi, pellentesque at lacus eu, vehicula pretium lorem. Nunc vitae
            ligula laoreet, accumsan diam et, auctor mauris. Fusce vitae posuere
            nibh, vitae eleifend quam. Duis a enim lacus.
          </Card.Text>
          <Button variant="primary">Go somewhere</Button>
        </Card.Body>
      </Card>
    </>
  );
}

We have Card component with child components inside it.

Card.Img has the image we want to display on the card.

variant='top' makes it display on top.

src is the URL of the image.

Card.Body has the body of the card.

Card.Title has the title of the card.

Card.Text has the text of the card.

The card body can be shortened to:

import React from "react";
import Card from "react-bootstrap/Card";
import Button from "react-bootstrap/Button";
import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  return (
    <>
      <Card body>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent
        ultrices ac dolor nec vestibulum. Maecenas vulputate diam ut sem tempus,
        id eleifend tortor hendrerit. Sed non orci massa. Aliquam eget lectus a
        ante convallis gravida. Donec fringilla odio ut magna gravida aliquam.
        Cras molestie non ante vel dictum. Cras lacinia molestie lacus, in
        lacinia sapien imperdiet in. Sed eleifend laoreet finibus. Integer
        semper dictum eros nec eleifend. Nunc quam mi, finibus lacinia metus
        vitae, dapibus ultricies diam. Vivamus ante nisi, pellentesque at lacus
        eu, vehicula pretium lorem. Nunc vitae ligula laoreet, accumsan diam et,
        auctor mauris. Fusce vitae posuere nibh, vitae eleifend quam. Duis a
        enim lacus.
      </Card>
    </>
  );
}

We just add the body prop to the Card to make a simple card with text.

Title, Text, and Links

Card.Title has the title of the body.

Card.Subtitle has the subtitle.

Card.Text has the main text content.

Card.Body group those together with one container.

Card.Text output p tags around the content, so we can have more than one of them.

For instance, we can write:

import React from "react";
import Card from "react-bootstrap/Card";
import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  return (
    <>
      <Card style={{ width: "20rem" }}>
        <Card.Body>
          <Card.Title> Title</Card.Title>
          <Card.Subtitle className="text-muted">Card Subtitle</Card.Subtitle>
          <Card.Text>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent
            ultrices ac dolor nec vestibulum. Maecenas vulputate diam ut sem
            tempus, id eleifend tortor hendrerit. Sed non orci massa. Aliquam
            eget lectus a ante convallis gravida. Donec fringilla odio ut magna
            gravida aliquam. Cras molestie non ante vel dictum. Cras lacinia
            molestie lacus, in lacinia sapien imperdiet in. Sed eleifend laoreet
            finibus. Integer semper dictum eros nec eleifend. Nunc quam mi,
            finibus lacinia metus vitae, dapibus ultricies diam. Vivamus ante
            nisi, pellentesque at lacus eu, vehicula pretium lorem. Nunc vitae
            ligula laoreet, accumsan diam et, auctor mauris. Fusce vitae posuere
            nibh, vitae eleifend quam. Duis a enim lacus.
          </Card.Text>
          <Card.Link href="#"> Link</Card.Link>
          <Card.Link href="#">Another Link</Card.Link>
        </Card.Body>
      </Card>
    </>
  );
}

We have all of those components in one card.

List Groups

We can add ListGroup s to cards.

For instance, we can write:

import React from "react";
import Card from "react-bootstrap/Card";
import ListGroup from "react-bootstrap/ListGroup";
import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  return (
    <>
      <Card style={{ width: "20rem" }}>
        <ListGroup variant="flush">
          <ListGroup.Item>Lorem ipsum dolor</ListGroup.Item>
          <ListGroup.Item>sit amet</ListGroup.Item>
          <ListGroup.Item>Vestibulum at eros</ListGroup.Item>
        </ListGroup>
      </Card>
    </>
  );
}

We have a ListGroup in the Card to display it inside the card.

Conclusion

Cards are containers that can have a variety of content,

They include titles, subtitles, images, links, paragraphs, links, list groups etc.

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 customize React Bootstrap cards.

Image Overlays

We can add card backgrounds and overlays,

To do that, we can use the Card.ImgOverlay component.

For example, we can write:

import React from "react";
import Card from "react-bootstrap/Card";
import Button from "react-bootstrap/Button";
import "bootstrap/dist/css/bootstrap.min.css";
export default function App() {
  return (
    <>
      <Card style={{ width: "20rem" }}>
        <Card.Img
          variant="top"
          src="https://dummyimage.com/700/ffffff/000000"
        />
        <Card.ImgOverlay>
          <Card.Title>Special title</Card.Title>
          <Card.Text>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent
            ultrices ac dolor nec vestibulum. Maecenas vulputate diam ut sem
            tempus, id eleifend tortor hendrerit. Sed non orci massa. Aliquam
            eget lectus a ante convallis gravida. Donec fringilla odio ut magna
            gravida aliquam. Cras molestie non ante vel dictum. Cras lacinia
            molestie lacus, in lacinia sapien imperdiet in. Sed eleifend laoreet
            finibus. Integer semper dictum eros nec eleifend. Nunc quam mi,
            finibus lacinia metus vitae, dapibus ultricies diam. Vivamus ante
            nisi, pellentesque at lacus eu, vehicula pretium lorem. Nunc vitae
            ligula laoreet, accumsan diam et, auctor mauris. Fusce vitae posuere
            nibh, vitae eleifend quam. Duis a enim lacus.
          </Card.Text>
          <Button variant="primary">Go</Button>
        </Card.ImgOverlay>
      </Card>
    </>
  );
}

to make our text display above an image.

We did that with the Card.ImgOverlay component.

Navigation

We can add navigation to the card’s header.

To do that we can write:

import React from "react";
import Card from "react-bootstrap/Card";
import Button from "react-bootstrap/Button";
import Nav from "react-bootstrap/Nav";
import "bootstrap/dist/css/bootstrap.min.css";
export default function App() {
  return (
    <>
      <Card>
        <Card.Header>
          <Nav variant="tabs" defaultActiveKey="#first">
            <Nav.Item>
              <Nav.Link href="#first">Active</Nav.Link>
            </Nav.Item>
            <Nav.Item>
              <Nav.Link href="#link">Link</Nav.Link>
            </Nav.Item>
            <Nav.Item>
              <Nav.Link href="#disabled" disabled>
                Disabled
              </Nav.Link>
            </Nav.Item>
          </Nav>
        </Card.Header>
        <Card.Body>
          <Card.Title>Special title</Card.Title>
          <Card.Text>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent
            ultrices ac dolor nec vestibulum. Maecenas vulputate diam ut sem
            tempus, id eleifend tortor hendrerit. Sed non orci massa. Aliquam
            eget lectus a ante convallis gravida. Donec fringilla odio ut magna
            gravida aliquam. Cras molestie non ante vel dictum. Cras lacinia
            molestie lacus, in lacinia sapien imperdiet in. Sed eleifend laoreet
            finibus. Integer semper dictum eros nec eleifend. Nunc quam mi,
            finibus lacinia metus vitae, dapibus ultricies diam. Vivamus ante
            nisi, pellentesque at lacus eu, vehicula pretium lorem. Nunc vitae
            ligula laoreet, accumsan diam et, auctor mauris. Fusce vitae posuere
            nibh, vitae eleifend quam. Duis a enim lacus.
          </Card.Text>
          <Button variant="primary">Go somewhere</Button>
        </Card.Body>
      </Card>
    </>
  );
}

We have a navbar on the top of the card since we add the Nav component to the Card.Header component.

defaultActiveKey has the key of the active tab.

This can be changed to the pills variant to display the nav links as buttons.

For instance, we can write:

import React from "react";
import Card from "react-bootstrap/Card";
import Button from "react-bootstrap/Button";
import Nav from "react-bootstrap/Nav";
import "bootstrap/dist/css/bootstrap.min.css";
export default function App() {
  return (
    <>
      <Card>
        <Card.Header>
          <Nav variant="pills" defaultActiveKey="#first">
            <Nav.Item>
              <Nav.Link href="#first">Active</Nav.Link>
            </Nav.Item>
            <Nav.Item>
              <Nav.Link href="#link">Link</Nav.Link>
            </Nav.Item>
            <Nav.Item>
              <Nav.Link href="#disabled" disabled>
                Disabled
              </Nav.Link>
            </Nav.Item>
          </Nav>
        </Card.Header>
        <Card.Body>
          <Card.Title>Special title</Card.Title>
          <Card.Text>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent
            ultrices ac dolor nec vestibulum. Maecenas vulputate diam ut sem
            tempus, id eleifend tortor hendrerit. Sed non orci massa. Aliquam
            eget lectus a ante convallis gravida. Donec fringilla odio ut magna
            gravida aliquam. Cras molestie non ante vel dictum. Cras lacinia
            molestie lacus, in lacinia sapien imperdiet in. Sed eleifend laoreet
            finibus. Integer semper dictum eros nec eleifend. Nunc quam mi,
            finibus lacinia metus vitae, dapibus ultricies diam. Vivamus ante
            nisi, pellentesque at lacus eu, vehicula pretium lorem. Nunc vitae
            ligula laoreet, accumsan diam et, auctor mauris. Fusce vitae posuere
            nibh, vitae eleifend quam. Duis a enim lacus.
          </Card.Text>
          <Button variant="primary">Go somewhere</Button>
        </Card.Body>
      </Card>
    </>
  );
}

We change the variant prop on the Nav to pills so that we get button style links.

Background Color

We can set the background color with the bg prop.

The text color can be changed with the text prop.

For instance, we can write:

import React from "react";
import Card from "react-bootstrap/Card";
import Button from "react-bootstrap/Button";
import Nav from "react-bootstrap/Nav";
import "bootstrap/dist/css/bootstrap.min.css";
export default function App() {
  return (
    <>
      {[
        "Primary",
        "Secondary",
        "Success",
        "Danger",
        "Warning",
        "Info",
        "Light",
        "Dark"
      ].map((variant, index) => (
        <Card
          bg={variant.toLowerCase()}
          key={index}
          text={variant.toLowerCase() === "light" ? "dark" : "white"}
          style={{ width: "18rem" }}
          className="mb-2"
        >
          <Card.Header>Header</Card.Header>
          <Card.Body>
            <Card.Title>{variant} Card Title </Card.Title>
            <Card.Text>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            </Card.Text>
          </Card.Body>
        </Card>
      ))}
    </>
  );
}

We have the text prop to change the style variant of the text.

The bg prop changes the style variant of the card background.

Conclusion

We can add images that display below text content and nav links to our cards.

Also, we can change the text and background color of cards.

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 button groups.

Button Groups

We can create button groups to group buttons together on a single line.

For instance, we can write:

import React from "react";
import Button from "react-bootstrap/Button";
import ButtonGroup from "react-bootstrap/ButtonGroup";
import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  return (
    <ButtonGroup>
      <Button variant="secondary">foo</Button>
      <Button variant="secondary">bar</Button>
      <Button variant="secondary">baz</Button>
    </ButtonGroup>
  );
}

We imported the ButtonGroup component to create a button group with Button s inside.

Button Toolbar

A button toolbar is a container for a set of button groups.

For instance, we can write:

import React from "react";
import Button from "react-bootstrap/Button";
import ButtonGroup from "react-bootstrap/ButtonGroup";
import ButtonToolbar from "react-bootstrap/ButtonToolbar";
import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  return (
    <ButtonToolbar>
      <ButtonGroup className="mr-2">
        <Button>1</Button> <Button>2</Button> <Button>3</Button>{" "}
        <Button>4</Button>
      </ButtonGroup>
      <ButtonGroup className="mr-2">
        <Button>5</Button> <Button>6</Button> <Button>7</Button>
      </ButtonGroup>
      <ButtonGroup>
        <Button>8</Button>
        <Button>9</Button>
      </ButtonGroup>
    </ButtonToolbar>
  );
}

We have buttons in the button groups.

Then the buttons groups are in the ButtonToolbar .

We add the mr-2 class to give the groups some margins on the right.

We can mix input and button groups on our toolbars.

For example, we can write:

import React from "react";
import Button from "react-bootstrap/Button";
import ButtonGroup from "react-bootstrap/ButtonGroup";
import ButtonToolbar from "react-bootstrap/ButtonToolbar";
import InputGroup from "react-bootstrap/InputGroup";
import FormControl from "react-bootstrap/FormControl";
import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  return (
    <ButtonToolbar>
      <ButtonGroup className="mr-2">
        <Button>1</Button> <Button>2</Button> <Button>3</Button>{" "}
        <Button>4</Button>
      </ButtonGroup>
      <ButtonGroup className="mr-2">
        <Button>5</Button> <Button>6</Button> <Button>7</Button>
      </ButtonGroup>
      <ButtonGroup>
        <Button>8</Button>
        <Button>9</Button>
      </ButtonGroup>

      <InputGroup>
        <InputGroup.Prepend>
          <InputGroup.Text>@</InputGroup.Text>
        </InputGroup.Prepend>
        <FormControl
          type="text"
          placeholder="Input group"
        />
      </InputGroup>
    </ButtonToolbar>
  );
}

We have an InputGroup beside out ButtonGroup .

They’ll be displayed side by side if the screen is wide enough.

Sizing

We can change the size of the button groups.

For instance, we can write:

import React from "react";
import Button from "react-bootstrap/Button";
import ButtonGroup from "react-bootstrap/ButtonGroup";
import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  return (
    <>
      <ButtonGroup size="lg" className="mb-2">
        <Button>foo</Button>
        <Button>bar</Button>
        <Button>baz</Button>
      </ButtonGroup>
      <br />
      <ButtonGroup className="mb-2">
        <Button>foo</Button>
        <Button>bar</Button>
        <Button>baz</Button>
      </ButtonGroup>
      <br />
      <ButtonGroup size="sm">
        <Button>foo</Button>
        <Button>bar</Button>
        <Button>baz</Button>
      </ButtonGroup>
    </>
  );
}

We put buttons in our button groups.

The size prop lets us change the size of all the buttons.

Nesting

We can place DropdownButtons in ButtonGroup s.

For instance, we can write:

import React from "react";
import Button from "react-bootstrap/Button";
import ButtonGroup from "react-bootstrap/ButtonGroup";
import DropdownButton from "react-bootstrap/DropdownButton";
import Dropdown from "react-bootstrap/Dropdown";
import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  return (
    <>
      <ButtonGroup>
        <Button>1</Button>
        <Button>2</Button>

        <DropdownButton
          as={ButtonGroup}
          title="Dropdown"
          id="bg-nested-dropdown"
        >
          <Dropdown.Item eventKey="1">foo</Dropdown.Item>
          <Dropdown.Item eventKey="2">bar</Dropdown.Item>
        </DropdownButton>
      </ButtonGroup>
    </>
  );
}

We put the Button s in the ButtonGroup with the DropdownButton beside it.

Inside the DropdownButton , we have Dropdown.Item components that we can click on.

The title prop has the dropdown button’s text content.

Vertical Variation

We can make the buttons display vertically if we add a vertical prop to our ButtonGroup .

For example, we can write:

import React from "react";
import Button from "react-bootstrap/Button";
import ButtonGroup from "react-bootstrap/ButtonGroup";
import DropdownButton from "react-bootstrap/DropdownButton";
import Dropdown from "react-bootstrap/Dropdown";
import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  return (
    <>
      <ButtonGroup vertical>
        <Button>1</Button>
        <Button>2</Button>

        <DropdownButton
          as={ButtonGroup}
          title="Dropdown"
        >
          <Dropdown.Item eventKey="1">foo</Dropdown.Item>
          <Dropdown.Item eventKey="2">bar</Dropdown.Item>
        </DropdownButton>
      </ButtonGroup>
    </>
  );
}

Now everything is displayed vertically.

Conclusion

We can use button groups to group buttons together.

They can be vertical or horizontal.

The size can also vary according to the props.

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 customize React Bootstrap cards.

Border Color

We can change the border color of the cards.

For example, we can write:

import React from "react";
import Card from "react-bootstrap/Card";
import "bootstrap/dist/css/bootstrap.min.css";
export default function App() {
  return (
    <>
      {[
        "Primary",
        "Secondary",
        "Success",
        "Danger",
        "Warning",
        "Info",
        "Light",
        "Dark"
      ].map((variant, idx) => (
        <Card
          border={variant.toLowerCase()}
          key={idx}
          style={{ width: "18rem" }}
          className="mb-2"
        >
          <Card.Header>Header</Card.Header>
          <Card.Body>
            <Card.Title>{variant} Card Title </Card.Title>
            <Card.Text>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent
              ultrices ac dolor nec vestibulum. Maecenas vulputate diam ut sem
              tempus, id eleifend tortor hendrerit. Sed non orci massa. Aliquam
              eget lectus a ante convallis gravida. Donec fringilla odio ut
              magna gravida aliquam. Cras molestie non ante vel dictum. Cras
              lacinia molestie lacus, in lacinia sapien imperdiet in. Sed
              eleifend laoreet finibus. Integer semper dictum eros nec eleifend.
              Nunc quam mi, finibus lacinia metus vitae, dapibus ultricies diam.
              Vivamus ante nisi, pellentesque at lacus eu, vehicula pretium
              lorem. Nunc vitae ligula laoreet, accumsan diam et, auctor mauris.
              Fusce vitae posuere nibh, vitae eleifend quam. Duis a enim lacus.
            </Card.Text>
          </Card.Body>
        </Card>
      ))}
    </>
  );
}

to render cards with various kinds of borders with the border prop.

Card Groups

We can group cards together with CardGroup components.

For example, we can write:

import React from "react";
import Card from "react-bootstrap/Card";
import CardGroup from "react-bootstrap/CardGroup";
import "bootstrap/dist/css/bootstrap.min.css";
export default function App() {
  return (
    <>
      <CardGroup>
        {[
          "Primary",
          "Secondary",
          "Success",
          "Danger",
          "Warning",
          "Info",
          "Light",
          "Dark"
        ].map((variant, idx) => (
          <Card
            bg={variant.toLowerCase()}
            key={idx}
            style={{ width: "18rem" }}
            className="mb-2"
            text={variant.toLowerCase() === "light" ? "dark" : "white"}
          >
            <Card.Header>Header</Card.Header>
            <Card.Body>
              <Card.Title>{variant} Card Title </Card.Title>
              <Card.Text>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                Praesent ultrices ac dolor nec vestibulum. Maecenas vulputate
                diam ut sem tempus,
              </Card.Text>
            </Card.Body>
          </Card>
        ))}
      </CardGroup>
    </>
  );
}

We have a CardGroup component wrapped around multiple Card s.

Then they’ll display side by side if our screen is wide enough.

Card Deck

There’s also the CardDeck component to group cards together.

The difference between CardGroup and CardDeck is that there’re margins between cards in CardDeck and there’s none of that in CardGroup .

For instance, we can write:

import React from "react";
import Card from "react-bootstrap/Card";
import CardDeck from "react-bootstrap/CardDeck";
import "bootstrap/dist/css/bootstrap.min.css";
export default function App() {
  return (
    <>
      <CardDeck>
        {[
          "Primary",
          "Secondary",
          "Success",
          "Danger",
          "Warning",
          "Info",
          "Light",
          "Dark"
        ].map((variant, idx) => (
          <Card
            bg={variant.toLowerCase()}
            key={idx}
            style={{ width: "18rem" }}
            className="mb-2"
            text={variant.toLowerCase() === "light" ? "dark" : "white"}
          >
            <Card.Header>Header</Card.Header>
            <Card.Body>
              <Card.Title>{variant} Card Title </Card.Title>
              <Card.Text>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                Praesent ultrices ac dolor nec vestibulum. Maecenas vulputate
                diam ut sem tempus,
              </Card.Text>
            </Card.Body>
          </Card>
        ))}
      </CardDeck>
    </>
  );
}

to add card decks.

Card Columns

We can also put cards into columns with CardColumns .

For instance, we can write:

import React from "react";
import Card from "react-bootstrap/Card";
import CardColumns from "react-bootstrap/CardColumns";
import "bootstrap/dist/css/bootstrap.min.css";
export default function App() {
  return (
    <>
      <CardColumns>
        {[
          "Primary",
          "Secondary",
          "Success",
          "Danger",
          "Warning",
          "Info",
          "Light",
          "Dark"
        ].map((variant, idx) => (
          <Card
            bg={variant.toLowerCase()}
            key={idx}
            style={{ width: "18rem" }}
            className="mb-2"
            text={variant.toLowerCase() === "light" ? "dark" : "white"}
          >
            <Card.Header>Header</Card.Header>
            <Card.Body>
              <Card.Title>{variant} Card Title </Card.Title>
              <Card.Text>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                Praesent ultrices ac dolor nec vestibulum. Maecenas vulputate
                diam ut sem tempus,
              </Card.Text>
            </Card.Body>
          </Card>
        ))}
      </CardColumns>
    </>
  );
}

to display cards in columns if our screen is wide enough to have columns.

Conclusion

We can create cards and lay them out in various ways.

We can have card groups to have them side by side without margins between the cards.

Also, we can have card decks to have them side by side with margins between them.

And we can have card columns to place the cards in columns.

Border colors can also be changed.

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.