Reactstrap — Button Groups

Photo by Hermes Rivera 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 button groups with Reactstrap.

Button Groups

Button groups is a container for grouping buttons together.

For example, we can write:

import React from "react";
import { Button, ButtonGroup } from "reactstrap";
import "bootstrap/dist/css/bootstrap.min.css";
export default function App() {
  return (
    <>
      <ButtonGroup>
        <Button>Left</Button>
        <Button>Middle</Button>
        <Button>Right</Button>
      </ButtonGroup>
    </>
  );
}

We add the ButtonGroup component with a few Button s inside.

They’ll be displayed side by side without any gaps in between them.

Button Toolbar

To group button groups, we can use the ButtonToolbar component.

For instance, we can write:

import React from "react";
import { Button, ButtonGroup, ButtonToolbar } from "reactstrap";
import "bootstrap/dist/css/bootstrap.min.css";
export default function App() {
  return (
    <>
      <ButtonToolbar>…