Text Related

Text Transformation


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


Class Description
.text-truncate Truncating and prevents text from wrapping into multiple lines
.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 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

Text Alignment

 


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
Alternative text to the image Aligns text to the top
Alternative text to the image Aligns text to the middle
Alternative text to the image Aligns text to the bottom

Left aligned text

Center aligned text

Right aligned text

Justified text: Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book

Quick Font Size

Available values: 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

Available values: unset, 100, 200, 300, 400, 500, 600, 700, 800, 900


Class Description
.font-weight-unset font-weight: unset
.font-weight-100 font-weight: 100
.font-weight-600 font-weight: 600

Alignments

Clearing And Floating


Class Description
.pull-left Float the element to the left
.pull-right Float the element to the right
.clearfix Add this class to a parent container to clear floats

Center Block


Class Description
.center-block Use the class to center the element

Vertical Aligns


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

Box Modal

Quick Padding

Available values: 0, 3, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50


CLASS Description
.padding-5 padding: 5px
.padding-vertical-5 padding-top: 5px; padding-bottom: 5px
.padding-horizontal-5 padding-left: 5px; padding-right: 5px
.padding-top-5 padding-top: 5px
.padding-right-5 padding-right: 5px
.padding-bottom-5 padding-bottom: 5px
.padding-left-5 padding-left: 5px

Quick Margin

Available values: 0, 3, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50


CLASS Description
.margin-5 margin: 5px
.margin-vertical-5 margin-top: 5px; margin-bottom: 5px
.margin-horizontal-5 margin-left: 5px; margin-right: 5px
.margin-top-5 margin-top: 5px
.margin-right-5 margin-right: 5px
.margin-bottom-5 margin-bottom: 5px
.margin-left-5 margin-left: 5px

Quick Height

Available values: 50, 100, 150, 200, 250, 300, 350, 400, 450, 500


Class Description
.height-50 height: 50px
.height-100 height: 100px
.height-150 height: 150px
.height-200 height: 200px
.height-250 height: 250px
.height-300 height: 300px
.height-350 height: 350px
.height-400 height: 400px
.height-450 height: 450px
.height-500 height: 500px

Quick Width

Available values: 50, 100, 150, 200, 250, 300, 350, 400, 450, 500


Class Description
.width-50 width: 50px
.width-100 width: 100px
.width-150 width: 150px
.width-200 width: 200px
.width-250 width: 250px
.width-300 width: 300px
.width-350 width: 350px
.width-400 width: 400px
.width-450 width: 450px
.width-500 width: 500px

Miscellaneous

Color Utilities


Class Description
.color-default Set Default color to element
.color-primary Set Primary color to element
.color-secondary Set Secondary color to element
.color-success Set Success color to element
.color-info Set Info color to element
.color-warning Set Warning color to element
.color-danger Set Danger color to element

Display Utilities


Class Description
.display-inline Forces the element to behave like an inline element
.display-inline-block Forces the element to behave like an inline-block element
.display-block Forces the element to behave like a block element
.display-none Forces the element to behave like a hidden element

Underlined Links

Modifier: .underlined-link, .blue-link


Class Description
.link-underlined Underlined Link
.link-blue Blue Link
.link-underlined.link-blue Underlined and Blue Link