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