Ready
Layout
Use layout to organize visual elements and to help guide users’ attention through a user experience.
Styles
.
layout-vertical
Stack items vertically
.
layout-horizontal
Stack items horizontally
.
layout-horizontal-wrap
Stack items horizontally. Item overflow wraps
.
layout-vertical--md
Forces a layout-horizontal container to stack vertically at the small and medium breakpoints
.
layout-vertical--sm
Forces a layout-horizontal container to stack vertically at the small breakpoint
.
layout-horizontal--xl
Forces a layout-vertical container to stack horizontally at the XL breakpoint
.
layout-width--full
Expands to fill available page width
.
layout-width--xl
Expands to fill available page width with a 1200px max width
.
layout-width--lg
Expands to fill available page width with a 900px max width
.
layout-width--md
Expands to fill available page width with a 600px max width
.
layout-width--sm
Expands to fill available page width a 300px max width
.
layout-gap--1
--
core-1
.
layout-gap--2
--
core-2
.
layout-gap--3
--
core-3
.
layout-gap--4
--
core-4
.
layout-gap--5
--
core-5
.
layout-gap--6
--
core-6
.
layout-gap--7
--
core-7
.
layout-gap--8
--
core-8
.
layout-gap--9
--
core-9
.
layout-gap--10
--
core-10
.
layout-align--top
vertical start
.
layout-align--center-y
Aligns items in the vertical center of the container.
.
layout-align--bottom
Aligns items to the bottom of the container.
.
layout-align--left
Aligns items to the left side of the container.
.
layout-align--center-x
Aligns items to the horizontal center of the container.
.
layout-align--right
Aligns items to the right side of the container.
.
layout-align--stretch-y
Stretch the items to fill the vertical space of the container.
.
layout-align--stretch-x
Stretch the items to fill the horizontal space of the container.
.
layout-align--space-between
Evenly distribute the items within the container.
Best Practices
Structure
Use layout classes to provide a clear structure to a UI design. This will improve the page readability and allow users to easily find what they’re looking for. ¹
Gaps
Use the layout-gap classes to create clear separation between different pieces of content on the page. ¹
White Space
Use white space to give breathing room around your page elements and to help users focus on what’s most important. ² This can be done using the layout-width classes to give a content container a max-width and add white space around around it.
Optimize for screen size
Use the breakpoint specific stacking methods to optimize your layouts for different screen sizes.
Do
Don't
More
Additional Reading
Using Grids in Interface Designs https://www.nngroup.com/articles/using-grids-in-interface-designs/
Understand Layout in App Design…in 10 minutes https://uxplanet.org/layout-in-app-design-in-10-minutes-f05ed6a32c44