Ready
Layout
Use layout to organize visual elements and to help guide users’ attention through a user experience.
Ready
Layout
Use layout to organize visual elements and to help guide users’ attention through a user experience.
Ready
Layout
Use layout to organize visual elements and to help guide users’ attention through a user experience.
Styles
Styles
Styles
.
layout-vertical
Stack items vertically
.
layout-vertical
Stack items vertically
.
layout-vertical
Stack items vertically
.
layout-horizontal
Stack items horizontally
.
layout-horizontal
Stack items horizontally
.
layout-horizontal
Stack items horizontally
.
layout-horizontal-wrap
Stack items horizontally. Item overflow wraps
.
layout-horizontal-wrap
Stack items horizontally. Item overflow wraps
.
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--md
Forces a layout-horizontal container to stack vertically at the small and medium breakpoints
.
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-vertical--sm
Forces a layout-horizontal container to stack vertically at the small breakpoint
.
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-horizontal--xl
Forces a layout-vertical container to stack horizontally at the XL 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--full
Expands to fill available page width
.
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--xl
Expands to fill available page width with a 1200px max 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--lg
Expands to fill available page width with a 900px 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--md
Expands to fill available page width with a 600px 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-width--sm
Expands to fill available page width a 300px max width
.
layout-width--sm
Expands to fill available page width a 300px max width
.
layout-gap--1
--
core-1
.
layout-gap--1
--
core-1
.
layout-gap--1
--
core-1
.
layout-gap--2
--
core-2
.
layout-gap--2
--
core-2
.
layout-gap--2
--
core-2
.
layout-gap--3
--
core-3
.
layout-gap--3
--
core-3
.
layout-gap--3
--
core-3
.
layout-gap--4
--
core-4
.
layout-gap--4
--
core-4
.
layout-gap--4
--
core-4
.
layout-gap--5
--
core-5
.
layout-gap--5
--
core-5
.
layout-gap--5
--
core-5
.
layout-gap--6
--
core-6
.
layout-gap--6
--
core-6
.
layout-gap--6
--
core-6
.
layout-gap--7
--
core-7
.
layout-gap--7
--
core-7
.
layout-gap--7
--
core-7
.
layout-gap--8
--
core-8
.
layout-gap--8
--
core-8
.
layout-gap--8
--
core-8
.
layout-gap--9
--
core-9
.
layout-gap--9
--
core-9
.
layout-gap--9
--
core-9
.
layout-gap--10
--
core-10
.
layout-gap--10
--
core-10
.
layout-gap--10
--
core-10
.
layout-align--top
vertical start
.
layout-align--top
vertical start
.
layout-align--top
vertical start
.
layout-align--center-y
Aligns items in the vertical center of the container.
.
layout-align--center-y
Aligns items in the vertical center of the container.
.
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--bottom
Aligns items to the bottom 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--left
Aligns items to the left side 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--center-x
Aligns items to the horizontal center 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--right
Aligns items to the right side 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-y
Stretch the items to fill the vertical space 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--stretch-x
Stretch the items to fill the horizontal 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.
.
layout-align--space-between
Evenly distribute the items within the container.
.
layout-align--space-between
Evenly distribute the items within the container.
Best Practices
Best Practices
Best Practices
1
.
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. ¹
1
.
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. ¹
1
.
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. ¹
2
.
Gaps
Use the layout-gap classes to create clear separation between different pieces of content on the page. ¹
2
.
Gaps
Use the layout-gap classes to create clear separation between different pieces of content on the page. ¹
2
.
Gaps
Use the layout-gap classes to create clear separation between different pieces of content on the page. ¹
3
.
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.
3
.
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.
3
.
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.
4
.
Optimize for screen size
Use the breakpoint specific stacking methods to optimize your layouts for different screen sizes.
Do
Use layout classes to force a different layout for a specific breakpoint'
Don't
Use the default stacking methods for extra small or extra large content areas
More
More
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