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 |
|---|---|
.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. |
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. |
Center Block
| Class | Description |
|---|---|
.center-block
|
Use the class to center the element. |
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: 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
All size: 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
All size: 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
All size: 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 |
Responsive Height
| Extra small devices Phones (<768px) | Small devices Tablets (≥768px) | Medium devices Desktops (≥992px) | Large devices Desktops (≥1200px) | |
|---|---|---|---|---|
| 50px | .height-xs-50 |
.height-sm-50 |
.height-md-50 |
.height-lg-50 |
| 100px | .height-xs-100 |
.height-sm-100 |
.height-md-100 |
.height-lg-100 |
| 150px | .height-xs-150 |
.height-sm-150 |
.height-md-150 |
.height-lg-150 |
| 200px | .height-xs-200 |
.height-sm-200 |
.height-md-200 |
.height-lg-200 |
| 250px | .height-xs-250 |
.height-sm-250 |
.height-md-250 |
.height-lg-250 |
| 300px | .height-xs-300 |
.height-sm-300 |
.height-md-300 |
.height-lg-300 |
| 350px | .height-xs-350 |
.height-sm-350 |
.height-md-350 |
.height-lg-350 |
| 400px | .height-xs-400 |
.height-sm-400 |
.height-md-400 |
.height-lg-400 |
| 450px | .height-xs-450 |
.height-sm-450 |
.height-md-450 |
.height-lg-450 |
| 500px | .height-xs-500 |
.height-sm-500 |
.height-md-500 |
.height-lg-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.
Carets
Use carets to indicate dropdown functionality and direction. Note that the default caret will reverse automatically in dropup menus.
Visibility
| Extra small devices Phones (<768px) | Small devices Tablets (≥768px) | Medium devices Desktops (≥992px) | Large devices Desktops (≥1200px) | |
|---|---|---|---|---|
.show |
Visible | Visible | Visible | Visible |
.hide |
Hidden | Hidden | Hidden | Hidden |
.visible-xs-* |
Visible | Hidden | Hidden | Hidden |
.visible-sm-* |
Hidden | Visible | Hidden | Hidden |
.visible-md-* |
Hidden | Hidden | Visible | Hidden |
.visible-lg-* |
Hidden | Hidden | Hidden | Visible |
.hidden-xs |
Hidden | Visible | Visible | Visible |
.hidden-sm |
Visible | Hidden | Visible | Visible |
.hidden-md |
Visible | Visible | Hidden | Visible |
.hidden-lg |
Visible | Visible | Visible | Hidden |