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.

结果

Loading...

实时编辑器

import Stack from 'react-bootstrap/Stack'; function VerticalExample() { return ( <Stack gap={3}> <div className="p-2">First item</div> <div className="p-2">Second item</div> <div className="p-2">Third item</div> </Stack> ); } export default VerticalExample;

import Stack from 'react-bootstrap/Stack';

function VerticalExample() {
  return (
    <Stack gap={3}>
      <div className="p-2">First item</div>
      <div className="p-2">Second item</div>
      <div className="p-2">Third item</div>
    </Stack>
  );
}

export default VerticalExample;

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.

结果

Loading...

实时编辑器

import Stack from 'react-bootstrap/Stack'; function HorizontalExample() { return ( <Stack direction="horizontal" gap={3}> <div className="p-2">First item</div> <div className="p-2">Second item</div> <div className="p-2">Third item</div> </Stack> ); } export default HorizontalExample;

import Stack from 'react-bootstrap/Stack';

function HorizontalExample() {
  return (
    <Stack direction="horizontal" gap={3}>
      <div className="p-2">First item</div>
      <div className="p-2">Second item</div>
      <div className="p-2">Third item</div>
    </Stack>
  );
}

export default HorizontalExample;

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

结果

Loading...

实时编辑器

import Stack from 'react-bootstrap/Stack'; function HorizontalMarginStartExample() { return ( <Stack direction="horizontal" gap={3}> <div className="p-2">First item</div> <div className="p-2 ms-auto">Second item</div> <div className="p-2">Third item</div> </Stack> ); } export default HorizontalMarginStartExample;

import Stack from 'react-bootstrap/Stack';

function HorizontalMarginStartExample() {
  return (
    <Stack direction="horizontal" gap={3}>
      <div className="p-2">First item</div>
      <div className="p-2 ms-auto">Second item</div>
      <div className="p-2">Third item</div>
    </Stack>
  );
}

export default HorizontalMarginStartExample;

And with vertical rules:

结果

Loading...

实时编辑器

import Stack from 'react-bootstrap/Stack'; function HorizontalVerticalRulesExample() { return ( <Stack direction="horizontal" gap={3}> <div className="p-2">First item</div> <div className="p-2 ms-auto">Second item</div> <div className="vr" /> <div className="p-2">Third item</div> </Stack> ); } export default HorizontalVerticalRulesExample;

import Stack from 'react-bootstrap/Stack';

function HorizontalVerticalRulesExample() {
  return (
    <Stack direction="horizontal" gap={3}>
      <div className="p-2">First item</div>
      <div className="p-2 ms-auto">Second item</div>
      <div className="vr" />
      <div className="p-2">Third item</div>
    </Stack>
  );
}

export default HorizontalVerticalRulesExample;

Examples

Use a vertical Stack to stack buttons and other elements:

结果

Loading...

实时编辑器

import Button from 'react-bootstrap/Button'; import Stack from 'react-bootstrap/Stack'; function ButtonsExample() { return ( <Stack gap={2} className="col-md-5 mx-auto"> <Button variant="secondary">Save changes</Button> <Button variant="outline-secondary">Cancel</Button> </Stack> ); } export default ButtonsExample;

import Button from 'react-bootstrap/Button';
import Stack from 'react-bootstrap/Stack';

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

export default ButtonsExample;

Create an inline form with a horizontal Stack:

结果

Loading...

实时编辑器

import Button from 'react-bootstrap/Button'; import Form from 'react-bootstrap/Form'; import Stack from 'react-bootstrap/Stack'; function FormExample() { return ( <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> ); } export default FormExample;

import Button from 'react-bootstrap/Button';
import Form from 'react-bootstrap/Form';
import Stack from 'react-bootstrap/Stack';

function FormExample() {
  return (
    <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>
  );
}

export default FormExample;

API

Stack