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

Buttons Basics

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="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.

Button Sizes

We can change the size with the size 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 (
    <>
      <div>
        <Button variant="primary" size="lg">
          Large
        </Button>{" "}
        <Button variant="secondary" size="lg">
          Large
        </Button>
      </div>
      <div>
        <Button variant="primary" size="sm">
          Small
        </Button>{" "}
        <Button variant="secondary" size="sm">
          Small
        </Button>
      </div>
    </>
  );
}

We set the size to lg to create a large button.

And we set the size to sm to create a small button.

Also, we can add the block prop to make them display as a block-level element.

#javascript #web-development #software-development #programming #technology #react