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.
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.
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:
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:
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:
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:
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