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 |
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 |
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 |