Utilities
These utility classes float an element to the left or right, or disable floating, based on the current viewport size. Responsive variations also exist for each float value.
| Class | Description |
|---|---|
.float-left
|
Float left on all viewport sizes. |
.float-right
|
Float right on all viewport sizes. |
.float-none
|
Don't float on all viewport sizes |
.float-sm-left
|
Float left on viewports sized SM (small) or wider |
.float-sm-right
|
Float right on viewports sized SM (small) or wider |
.float-sm-none
|
Don't float on viewports sized SM (small) or wider |
.float-md-left
|
Float left on viewports sized MD (medium) or wider |
.float-md-right
|
Float right on viewports sized MD (medium) or wider |
.float-md-none
|
Don't float on viewports sized MD (medium) or wider |
.float-lg-left
|
Float left on viewports sized LG (large) or wider |
.float-lg-right
|
Float right on viewports sized LG (large) or wider |
.float-lg-none
|
Don't float on viewports sized LG (large) or wider |
.float-xl-left
|
Float left on viewports sized XL (extra-large) or wider |
.float-xl-right
|
Float right on viewports sized XL (extra-large) or wider |
.float-xl-none
|
Don't float on viewports sized XL (extra-large) or wider |
Change the alignment of elements with the vertical-alignment utilities. Please note that vertical-align only affects inline, inline-block, inline-table, and table cell elements.
| Class | Description |
|---|---|
.align-baseline |
Align element to the baseline |
.align-top |
Align element to the top |
.align-middle |
Align element to the middle |
.align-bottom |
Align element to the bottom |
.align-text-top |
Align element to text top |
.align-text-bottom |
Align element to text bottom |
All size : 0, 1, 2, 3, 4, 5 for classes that set the margin to 0, $spacer * .25, $spacer * .5, $spacer, $spacer * 1.5, $spacer * .3
| Class | Description |
|---|---|
.m-1 |
margin : 0.25rem |
.mt-1 |
margin-top : 0.25rem |
.mb-1 |
margin-bottom : 0.25rem |
.ml-1 |
margin-left : 0.25rem |
.mr-1 |
margin-right : 0.25rem |
.mx-1 |
margin-right : 0.25rem margin-left : 0.25rem |
my-1 |
margin-top : 0.25rem margin-bottom : 0.25rem |
All Sizes : 30, 40, 50 ,60, 70, 80, 90, 100, 125, 135, 150, 160, 200, 240
| Class | Description |
|---|---|
.w-25 |
width : 25% |
.w-50 |
width : 50% |
.w-75 |
width : 75% |
.w-100 |
width : 100% |
.w-30 |
width : 30px |
.w-40 |
width : 40px |
.w-50 |
width : 50px |
.w-100 |
width : 100px |
.w-200 |
width : 200px |
.w-lg |
width : 280px |
.w-xl |
width : 320px |
.w-xxl |
width : 360px |
.w-wide |
width : 100% |
.mw-100 |
max-width : 100% |
.w-auto |
width : auto |
.w-zero |
width : 0px |
| Class | Description |
|---|---|
.fh / .fw |
Width : 100% Height : 100% |
.fh-sm / .fw-sm |
Width : 100% above 768px Height : 100% above 768px |
.fh-md / .fw-md |
Width : 100% above 992px Height : 100% above 992px |
.fh-lg / .fw-lg |
Width : 100% above 1200px Height : 100% above 1200px |
.thumb8 |
Width : 8px Height : 8px |
.thumb16 |
Width : 16px Height : 16px |
.thumb24 |
Width : 24px Height : 24px |
.thumb32 |
Width : 32px Height : 32px |
.thumb40 |
Width : 40px Height : 40px |
.thumb48 |
Width : 48px Height : 48px |
.thumb64 |
Width : 64px Height : 64px |
.thumb80 |
Width : 80px Height : 80px |
.thumb96 |
Width : 96px Height : 96px |
.thumb128 |
Width : 128px Height : 128px |
Helper classes for common text utilities to control alignment, wrapping, weight, and more.
| Class | Description |
|---|---|
.text-left |
Align text to the left |
.text-right |
Align text to the right |
.text-center |
Align text to the center |
.text-sm |
For smaller text size |
.text-md |
For medium text size |
.text-lg |
For larger text size/td> |
.text-lowercase |
Transform text to lowercase |
.text-uppercase |
Transform text to uppercase |
.text-capitalize |
Transform text to capitalize |
.text-nowrap |
Prevents text from wrapping into multiple lines. |
.text-hide |
Replace an element's text content with a background image. |
.text-truncate |
For longer Content. Truncate the text with an ellipsis |
.text-break |
Breaks strings if their length exceeds the width of their container. |
.text-white |
To make text color white |
.text-inherit |
To inherit the text color |
.text-soft |
To make text color light black |
.text-light |
To make text color lighter white |
.font-weight-thin |
Change the weight of text to font weight 100 |
.font-weight-bold |
Change the weight of text to font weight 100 bold |
.font-weight-normal |
Change the weight of text to font weight 100 normal |
Add one of these classes to set the font size. Available size: 0, 6, 8, 10, 12, 14, 16, 18, 20, 24, 26, 30, 40, 50.
| Class | Description |
|---|---|
.font0 |
Font Size 0px |
.font6 |
Font Size 6px |
.font8 |
Font Size 8px |
.font10 |
Font Size 10px |
.font12 |
Font Size 12px |
.font14 |
Font Size 14px |
All size : 0, 1, 2, 3, 4, 5 for classes that set the padding to 0, $spacer * .25, $spacer * .5, $spacer, $spacer * 1.5, $spacer * .3
| Class | Description |
|---|---|
.p-1 |
padding : 0.25rem |
.pt-1 |
padding-top : 0.25rem |
.pb-1 |
padding-bottom : 0.25rem |
.pl-1 |
padding-left : 0.25rem |
.pr-1 |
padding-right : 0.25rem |
.px-1 |
padding-right : 0.25rem padding-left : 0.25rem |
.py-1 |
padding-top : 0.25rem padding-bottom : 0.25rem |
All Sizes : 30, 40, 50 ,60, 70, 80, 90, 100
| Class | Description |
|---|---|
.h-25 |
height : 25% |
.h-50 |
height : 50% |
.h-75 |
height : 75% |
.h-100 |
height : 100% |
.h-30 |
height : 30px |
.h-40 |
height : 40px |
.h-50 |
height : 50px |
.h-100 |
height : 100px |
.h-200 |
height : 200px |
.h-lg |
height : 150px |
.h-xl |
height : 200px |
.h-xxl |
height : 300px |
.h-wide |
height : 100% |
.hw-100 |
max-height : 100% |
Quickly change the icon font sizes or color.
| Class | Description |
|---|---|
.icon-18 |
Make icon at font size 18px |
.icon-24 |
Make icon at font size 24px |
.icon-36 |
Make icon at font size 36px |
.icon-48 |
Make icon at font size 48px |
.icon-2x |
Make icon 2x bigger |
.icon-3x |
Make icon 3x bigger |
.icon-4x |
Make icon 4x bigger |
.icon-5x |
Make icon 5x bigger |
.icon-lg |
Make icon 33% bigger |
.icon-fw |
Make icon fixed width |
.icon-dark |
Make icon dark for light backgrounds |
.icon-light |
Make icon light for dark backgrounds |
Add one of these classes to set the circle of different sizes
| Class | Description |
|---|---|
.circle8 |
Circle with size 8px |
.circle16 |
Circle with size 16px |
.circle24 |
Circle with size 24px |
.circle32 |
Circle with size 32px |
.circle40 |
Circle with size 40px |
.circle48 |
Circle with size 48px |
.circle64 |
Circle with size 64px |
.circle80 |
Circle with size 80px |
.circle96 |
Circle with size 96px |
.circle128 |
Circle with size 128px |