See the Layout Container page for a basic explanation
of layout attributes.
To make your layout change depending upon the device size, there are
other layout
attributes available:
layout | Sets the default layout on all devices. |
layout-sm | Sets the layout on devices less than 600px wide (phones). |
layout-gt-sm | Sets the layout on devices greater than 600px wide (bigger than phones). |
layout-md | Sets the layout on devices between 600px and 960px wide (tablets in portrait). |
layout-gt-md | Sets the layout on devices greater than 960px wide (bigger than tablets in portrait). |
layout-lg | Sets the layout on devices between 960 and 1200px wide (tablets in landscape). |
layout-gt-lg | Sets the layout on devices greater than 1200px wide (computers and large screens). |
layout-margin
adds margin around each flex
child. It also adds a margin to the layout container itself.
layout-padding
adds padding inside each flex
child. It also adds padding to the layout container itself.
layout-fill
forces the layout element to fill its parent container.
layout-wrap
allows flex
children to wrap within the container if the elements use more than 100%.
See the Layout Grid page for a basic explanation of flex and offset attributes.
flex | Sets flex. |
flex-sm | Sets flex on devices less than 600px wide. |
flex-gt-sm | Sets flex on devices greater than 600px wide. |
flex-md | Sets flex on devices between 600px and 960px wide.. |
flex-gt-md | Sets flex on devices greater than 960px wide. |
flex-lg | Sets flex on devices between 960px and 1200px. |
flex-gt-lg | Sets flex on devices greater than 1200px wide. |
hide | display: none |
hide-sm | display: none on devices less than 600px wide. |
hide-gt-sm | display: none on devices greater than 600px wide. |
hide-md | display: none on devices between 600px and 960px wide. |
hide-gt-md | display: none on devices greater than 960px wide.
|
hide-lg | display: none on devices between 960px and 1200px. |
hide-gt-lg | display: none on devices greater than 1200px wide. |
show | Negates hide. |
show-sm | Negates hide on devices less than 600px wide. |
show-gt-sm | Negates hide on devices greater than 600px wide. |
show-md | Negates hide on devices between 600px and 960px wide.. |
show-gt-md | Negates hide on devices greater than 960px wide. |
show-lg | Negates hide on devices between 960px and 1200px. |
show-gt-lg | Negates hide on devices greater than 1200px wide. |