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.
This is text hide.
This is text truncate.This is text truncate.This is text truncate.
This-is-text-break.This-is-text-break.This-is-text-break.This-is-text-break.
This is text nowrap.This is text nowrap.This is text nowrap.

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.
Relevant textual alternative to the image Aligns text to the top.
Relevant textual alternative to the image Aligns text to the middle.
Relevant textual alternative to the image 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.

col-3
col-3
col-3
col-3
col-6
col-6

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 Visible Visible Visible Visible Visible
.hidden-sm-down Visible Visible Visible Visible
.hidden-md-down Visible Visible Visible
.hidden-lg-down Visible Visible
.hidden-xl-down Visible
.hidden-xxl-down
.hidden-xs-up
.hidden-sm-up Visible
.hidden-md-up Visible Visible
.hidden-lg-up Visible Visible Visible
.hidden-xl-up Visible Visible Visible Visible
.hidden-xxl-up Visible Visible Visible Visible Visible