Stacks

Stacks offer a shortcut for applying a number of flexbox properties to quickly and easily create layouts in Kyber. All credit for the concept and implementation goes to the open source Pylon project.

Heads up! Support for gap utilities with flexbox isn’t available in Safari prior to 14.5, so consider verifying your intended browser support. Grid layout should have no issues. Read more.

Vertical

Use .vstack to create vertical layouts. Stacked items are full-width by default. Use .gap-* utilities to add space between items.

Result

Loading...

Live Editor

<div className="bd-example-flex">
	<div className="vstack gap-3">
		<div className="p-2">First item</div>
		<div className="p-2">Second item</div>
		<div className="p-2">Third item</div>
	</div>
</div>

Horizontal

Use .hstack for horizontal layouts. Stacked items are vertically centered by default and only take up their necessary width. Use .gap-* utilities to add space between items.

Result

Loading...

Live Editor

<div className="bd-example-flex">
	<div className="hstack gap-3">
		<div className="p-2">First item</div>
		<div className="p-2">Second item</div>
		<div className="p-2">Third item</div>
	</div>
</div>

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

Result

Loading...

Live Editor

<div className="bd-example-flex">
	<div className="hstack 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>
	</div>
</div>

And with vertical rules:

Result

Loading...

Live Editor

<div className="bd-example-flex">
	<div className="hstack gap-3">
		<div className="p-2">First item</div>
		<div className="p-2 ms-auto">Second item</div>
		<div className="vr"></div>
		<div className="p-2">Third item</div>
	</div>
</div>

Examples

Use .vstack to stack buttons and other elements:

Result

Loading...

Live Editor

<div className="vstack gap-2 col-md-5 mx-auto">
	<button type="button" className="btn btn-secondary">
		Save changes
	</button>
	<button type="button" className="btn btn-outline-secondary">
		Cancel
	</button>
</div>

Create an inline form with .hstack:

Result

Loading...

Live Editor

<div className="hstack gap-3">
	<input
		className="form-control me-auto"
		type="text"
		placeholder="Add your item here..."
		aria-label="Add your item here..."
	/>
	<button type="button" className="btn btn-secondary">
		Submit
	</button>
	<div className="vr"></div>
	<button type="button" className="btn btn-outline-danger">
		Reset
	</button>
</div>