Stacks

Shorthand helpers that build on top of our flexbox utilities to make component layout faster and easier than ever.

Vertical

Stacks are vertical by default and stacked items are full-width by default. Use the gap prop to add space between items.

<Stack gap={3}>
  <div className="bg-light border">First item</div>
  <div className="bg-light border">Second item</div>
  <div className="bg-light border">Third item</div>
</Stack>

<Stack gap={3}>
  <div className="bg-light border">First item</div>
  <div className="bg-light border">Second item</div>
  <div className="bg-light border">Third item</div>
</Stack>

Horizontal

Use direction="horizontal" for horizontal layouts. Stacked items are vertically centered by default and only take up their necessary width. Use the gap prop to add space between items.

<Stack direction="horizontal" gap={3}>
  <div className="bg-light border">First item</div>
  <div className="bg-light border">Second item</div>
  <div className="bg-light border">Third item</div>
</Stack>

<Stack direction="horizontal" gap={3}>
  <div className="bg-light border">First item</div>
  <div className="bg-light border">Second item</div>
  <div className="bg-light border">Third item</div>
</Stack>

Using horizontal margin utilities like .ms-auto as spacers:

<Stack direction="horizontal" gap={3}>
  <div className="bg-light border">First item</div>
  <div className="bg-light border ms-auto">Second item</div>
  <div className="bg-light border">Third item</div>
</Stack>

<Stack direction="horizontal" gap={3}>
  <div className="bg-light border">First item</div>
  <div className="bg-light border ms-auto">Second item</div>
  <div className="bg-light border">Third item</div>
</Stack>

And with vertical rules:

<Stack direction="horizontal" gap={3}>
  <div className="bg-light border">First item</div>
  <div className="bg-light border ms-auto">Second item</div>
  <div className="vr" />
  <div className="bg-light border">Third item</div>
</Stack>

<Stack direction="horizontal" gap={3}>
  <div className="bg-light border">First item</div>
  <div className="bg-light border ms-auto">Second item</div>
  <div className="vr" />
  <div className="bg-light border">Third item</div>
</Stack>

Examples

Use a vertical Stack to stack buttons and other elements:

<Stack gap={2} className="col-md-5 mx-auto">
  <Button variant="secondary">Save changes</Button>
  <Button variant="outline-secondary">Cancel</Button>
</Stack>

<Stack gap={2} className="col-md-5 mx-auto">
  <Button variant="secondary">Save changes</Button>
  <Button variant="outline-secondary">Cancel</Button>
</Stack>

Create an inline form with a horizontal Stack:

<Stack direction="horizontal" gap={3}>
  <Form.Control className="me-auto" placeholder="Add your item here..." />
  <Button variant="secondary">Submit</Button>
  <div className="vr" />
  <Button variant="outline-danger">Reset</Button>
</Stack>

<Stack direction="horizontal" gap={3}>
  <Form.Control className="me-auto" placeholder="Add your item here..." />
  <Button variant="secondary">Submit</Button>
  <div className="vr" />
  <Button variant="outline-danger">Reset</Button>
</Stack>

API

Stackview source file

import Stack from 'react-bootstrap/Stack'

Name	Type	Default	Description
gap	responsivePropType(PropTypes.number)		Sets the spacing between each item. Valid values are `0-5`.
bsPrefix	string	`'hstack \| vstack'`	Change the underlying component CSS base class name and modifier class names prefix. This is an escape hatch for working with heavily customized bootstrap css. Defaults to `hstack` if direction is `horizontal` or `vstack` if direction is `vertical`.

Stacks

Vertical#

Horizontal#

Examples#

API#

Stack#view source file

Vertical

Horizontal

Examples

API

Stackview source file