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.

    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.

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

    And with vertical rules:

    Examples

    Use a vertical Stack to stack buttons and other elements:

    Create an inline form with a horizontal Stack:

    API

    import Stack from 'react-bootstrap/Stack'Copy import code for the Stack component
    NameTypeDefaultDescription
    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.