React Bootstrap — Button Groups

Photo by Andrés Dallimonti on Unsplash

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.

Photo by Loïc Fürhoff on Unsplash

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.

Web developer. Subscribe to my email list now at https://thewebdev.info/subscribe/. Email me at hohanga@gmail.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store