Alignments
Clearing And Floating
Floating is fundamental for creating all kinds of layouts. But floats need to be cleared or in the worst case, you might end up with a scrambled site. The following classes will help you to setup basic layouts.
| Class | Description |
|---|---|
.float-left
|
Float the element to the left. |
.float-right
|
Float the element to the right. |
.clearfix
|
Add this class to a parent container to clear floats. |
Vertical Aligns
Add one of these classes to change the display properties of an element.
| Class | Description |
|---|---|
.vertical-align
|
Add this class to the parent container. This container needs a specific height. |
.vertical-align-middle
|
Add this class to the child element to center your content. |
.vertical-align-bottom
|
Add this class to the child element to align your content to the bottom. |
Text Related
Text Transformation
Transform text in components with text capitalization classes.
| Class | Description |
|---|---|
.text-lowercase
|
Transform text to lowercase. |
.text-uppercase
|
Transform text to uppercase. |
.text-capitalize
|
Transform text to capitalize. |
Lowercased text.
Uppercased text.
Capitalized text.
Text Wrapping
Add one of these classes to wrap the text.
| Class | Description |
|---|---|
.text-hide
|
Replace an element's text content with a background image. |
.text-truncate
|
Prevents text from wrapping into multiple lines, truncating it instead. |
.text-break
|
Breaks strings if their length exceeds the width of their container. |
.text-nowrap
|
Prevents text from wrapping into multiple lines. |
Text Alignment
Add one of these useful classes to align your text.
| Class | Description |
|---|---|
.text-top
|
Aligns text to the top. |
.text-middle
|
Aligns text to the middle. |
.text-bottom
|
Aligns text to the bottom. |
.text-left
|
Left aligned text. |
.text-center
|
Center aligned text. |
.text-right
|
Right aligned text. |
.text-justify
|
Justified text. |
Aligns text to the top.
Aligns text to the middle.
Aligns text to the bottom.
Left aligned text.
Center aligned text.
Right aligned text.
Justified text.Justified text.Justified text.
Quick Font Size
Add one of these classes to set the font size.
All size: 0, 10, 12, 14, 16, 18, 20, 24, 26, 30, 40, 50, 60, 70 , 80.
| Class | Description |
|---|---|
.font-size-0 |
font-size: 0px |
.font-size-10 |
font-size: 10px |
.font-size-12 |
font-size: 12px |
.font-size-14 |
font-size: 14px |
.font-size-16 |
font-size: 16px |
.font-size-18 |
font-size: 18px |
.font-size-20 |
font-size: 20px |
Quick Font Weight
Add one of these classes to set the font weight.
All size: unset, 100, 200, 300, 400, 500, 600, 700, 800, 900.
| Class | Description |
|---|---|
.font-weight-unset |
font-weight: unset |
.font-weight-100 |
font-weight: 100 |
Box Modal
Quick Padding
All size: auto, 0, 3, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 60, 70, 80 100.
| CLASS | DESCRIPTION |
|---|---|
.p-5 |
padding: 5px |
.py-5 |
padding-top: 5px padding-bottom: 5px |
.px-5 |
padding-left: 5px padding-right: 5px |
.pt-5 |
padding-top: 5px |
.pr-5 |
padding-right: 5px |
.pb-5 |
padding-bottom: 5px |
.pl-5 |
padding-left: 5px |
Quick Margin
All size: auto, 0, 3, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 60, 70, 80 100.
| CLASS | DESCRIPTION |
|---|---|
.m-5 |
margin: 5px |
.my-5 |
margin-top: 5px margin-bottom: 5px |
.mx-5 |
margin-left: 5px margin-right: 5px |
.mt-5 |
margin-top: 5px |
.mr-5 |
margin-right: 5px |
.mb-5 |
margin-bottom: 5px |
.ml-5 |
margin-left: 5px |
Resposive Margin&Padding
| small devices Tablets (≥480px) | Small devices extra Tablets (≥768px) | Medium devices Desktops (≥992px) | Large devices Desktops (≥1200px) | Large devices extra Desktops (<1600px) | |
|---|---|---|---|---|---|
| margin: 5px | .m-sm-5 |
.m-md-5 |
.m-lg-5 |
.m-xl-5 |
.m-xxl-5 |
| margin-right: 5px | .mr-sm-5 |
.mr-md-5 |
.mr-lg-5 |
.mr-xl-5 |
.mr-xxl-5 |
| margin-left: auto | .ml-sm-auto |
.ml-md-auto |
.ml-lg-auto |
.ml-xl-auto |
.ml-xxl-auto |
| margin-top: -5px | .mt-sm--5 |
.mt-md--5 |
.mt-lg--5 |
.mt-xl--5 |
.mt-xxl--5 |
| margin-bottom: 5px | .mb-sm-5 |
.mb-md-5 |
.mb-lg-5 |
.mb-xl-5 |
.mb-xxl-5 |
|
margin-right: 5px; margin-left: 5px |
.mx-sm-5 |
.mx-md-5 |
.mx-lg-5 |
.mx-xl-5 |
.mx-xxl-5 |
|
margin-top: 5px; margin-bottom: 5px |
.my-sm-5 |
.my-md-5 |
.my-lg-5 |
.my-xl-5 |
.my-xxl-5 |
Negative Margin
All size: -30, -25, -20, -15, -10, -5, -3, -1. You can define
the infix of negative value by editing $negative-infix in utilities/_spacing.scss.
| CLASS | DESCRIPTION |
|---|---|
.m--5 |
margin: -5px |
.my--5 |
margin-top: -5px margin-bottom: -5px |
.mx--5 |
margin-left: -5px margin-right: -5px |
.mt--5 |
margin-top: -5px |
.mr--5 |
margin-right: -5px |
.mb--5 |
margin-bottom: -5px |
.ml--5 |
margin-left: -5px |
Quick Percentage Height
All size: 5%, 10%, 15%, 20%, 25%, 30%, 33.3333%, 50%, 75%, 100%.
| Class | DESCRIPTION |
|---|---|
.h-p5 |
height: 5% |
.h-p10 |
height: 10% |
.h-p15 |
height: 15% |
.h-p20 |
height: 20% |
.h-p25 |
height: 25% |
.h-p30 |
height: 30% |
.h-p33 |
height: 33.3333% |
.h-p75 |
height: 75% |
.h-p100 or .h-full |
height: 100% |
Quick Percentage Width
All size: 5%, 10%, 15%, 20%, 25%, 30%, 33.3333%, 50%, 75%, 100%.
| Class | DESCRIPTION |
|---|---|
.w-p5 |
width: 5% |
.w-p10 |
width: 10% |
.w-p15 |
width: 15% |
.w-p20 |
width: 20% |
.w-p25 |
width: 25% |
.w-p30 |
width: 30% |
.w-p33 |
width: 33.3333% |
.w-p75 |
width: 75% |
.w-p100 or .w-full |
width: 100% |
Quick Height
All size: 20, 30, 40, 50, 60, 80, 100, 120, 150, 160, 200, 250, 300, 350, 400, 450, 500.
| Class | DESCRIPTION |
|---|---|
.h-50 |
height: 50px |
.h-100 |
height: 100px |
.h-150 |
height: 150px |
.h-200 |
height: 200px |
.h-250 |
height: 250px |
.h-300 |
height: 300px |
.h-350 |
height: 350px |
.h-400 |
height: 400px |
.h-450 |
height: 450px |
.h-500 |
height: 500px |
Quick Width
All size: 20, 30, 40, 50, 60, 80, 100, 120, 150, 160, 200, 250, 300, 350, 400, 450, 500.
| Class | DESCRIPTION |
|---|---|
.w-50 |
width: 50px |
.w-100 |
width: 100px |
.w-150 |
width: 150px |
.w-200 |
width: 200px |
.w-250 |
width: 250px |
.w-300 |
width: 300px |
.w-350 |
width: 350px |
.w-400 |
width: 400px |
.w-450 |
width: 450px |
.w-500 |
width: 500px |
Responsive Height&Width
| small devices Tablets (≥480px) | Small devices extra Tablets (≥768px) | Medium devices Desktops (≥992px) | Large devices Desktops (≥1200px) | Extra Large devices Desktops (<1600px) | |
|---|---|---|---|---|---|
| 50px | .h-sm-50 |
.h-md-50 |
.h-lg-50 |
.h-xl-50 |
.h-xxl-50 |
| 100px | .h-sm-100 |
.h-md-100 |
.h-lg-100 |
.h-xl-100 |
.h-xxl-100 |
| 150px | .h-sm-150 |
.h-md-150 |
.h-lg-150 |
.h-xl-150 |
.h-xxl-150 |
| 200px | .h-sm-200 |
.h-md-200 |
.h-lg-200 |
.h-xl-200 |
.h-xxl-200 |
| 250px | .h-sm-250 |
.h-md-250 |
.h-lg-250 |
.h-xl-250 |
.h-xxl-250 |
| 300px | .h-sm-300 |
.h-md-300 |
.h-lg-300 |
.h-xl-300 |
.h-xxl-300 |
| 350px | .h-sm-350 |
.h-md-350 |
.h-lg-350 |
.h-xl-350 |
.h-xxl-350 |
| 400px | .h-sm-400 |
.h-md-400 |
.h-lg-400 |
.h-xl-400 |
.h-xxl-400 |
| 450px | .h-sm-450 |
.h-md-450 |
.h-lg-450 |
.h-xl-450 |
.h-xxl-450 |
| 500px | .h-sm-500 |
.h-md-500 |
.h-lg-500 |
.h-xl-500 |
.h-xxl-500 |
| Only Phones Phones (<480px) | Only Tablets Phones (≥480px && <768px) | Only Tablets extra Tablets (≥768px && <992px) | Only Desktops Desktops (≥992px && <1200px) | Only Desktops extra Desktops (≥1200px && <1600px) | |
|---|---|---|---|---|---|
| 50px | .h-only-xs-50 |
.h-only-sm-50 |
.h-only-md-50 |
.h-only-lg-50 |
.h-only-xl-50 |
| 100px | .h-only-xs-100 |
.h-only-sm-100 |
.h-only-md-100 |
.h-only-lg-100 |
.h-only-xl-100 |
| 150px | .h-only-xs-150 |
.h-only-sm-150 |
.h-only-md-150 |
.h-only-lg-150 |
.h-only-xl-150 |
| 200px | .h-only-xs-200 |
.h-only-sm-200 |
.h-only-md-200 |
.h-only-lg-200 |
.h-only-xl-200 |
| 250px | .h-only-xs-250 |
.h-only-sm-250 |
.h-only-md-250 |
.h-only-lg-250 |
.h-only-xl-250 |
| 300px | .h-only-xs-300 |
.h-only-sm-300 |
.h-only-md-300 |
.h-only-lg-300 |
.h-only-xl-300 |
| 350px | .h-only-xs-350 |
.h-only-sm-350 |
.h-only-md-350 |
.h-only-lg-350 |
.h-only-xl-350 |
| 400px | .h-only-xs-400 |
.h-only-sm-400 |
.h-only-md-400 |
.h-only-lg-400 |
.h-only-xl-400 |
| 450px | .h-only-xs-450 |
.h-only-sm-450 |
.h-only-md-450 |
.h-only-lg-450 |
.h-only-xl-450 |
| 500px | .h-only-xs-500 |
.h-only-only-sm-500 |
.h-only-md-500 |
.h-only-lg-500 |
.h-only-xl-500 |
Miscellaneous
Quick Grid With No Space
.row with .no-space to set the
columns which directly under no space.
Display Utilities
Add one of these classes to change the display properties of an element.
| Class | Description |
|---|---|
.inline |
Forces the element to behave like an inline element. |
.inline-block |
Forces the element to behave like an inline-block element. |
.block |
Forces the element to behave like a block element. |
Screen Reader And Keyboard Navigation Content
Hide an element to all devices
except screen readers with .sr-only.
Combine .sr-only with .sr-only-focusable to show the element again when it's focused (e.g. by a keyboard-only
user). Can also be used as mixins.
Visibility
| Extra small devices Portrait phones (<480px) | Small devices Landscape phones (≥480px) | Medium devices Tablets (≥768px) | Large devices Desktops (≥992px) | Extra large devices Desktops (≥1200px) | Extra Max large devices Desktops (≥1600px) | |
|---|---|---|---|---|---|---|
.hidden-xs-down |
Hidden | Visible | Visible | Visible | Visible | Visible |
.hidden-sm-down |
Hidden | Hidden | Visible | Visible | Visible | Visible |
.hidden-md-down |
Hidden | Hidden | Hidden | Visible | Visible | Visible |
.hidden-lg-down |
Hidden | Hidden | Hidden | Hidden | Visible | Visible |
.hidden-xl-down |
Hidden | Hidden | Hidden | Hidden | Hidden | Visible |
.hidden-xxl-down |
Hidden | Hidden | Hidden | Hidden | Hidden | Hidden |
.hidden-xs-up |
Hidden | Hidden | Hidden | Hidden | Hidden | Hidden |
.hidden-sm-up |
Visible | Hidden | Hidden | Hidden | Hidden | Hidden |
.hidden-md-up |
Visible | Visible | Hidden | Hidden | Hidden | Hidden |
.hidden-lg-up |
Visible | Visible | Visible | Hidden | Hidden | Hidden |
.hidden-xl-up |
Visible | Visible | Visible | Visible | Hidden | Hidden |
.hidden-xxl-up |
Visible | Visible | Visible | Visible | Visible | Hidden |