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-xs-left
|
Float the element to the left. |
.pull-xs-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-xs-left
|
Left aligned text. |
.text-xs-center
|
Center aligned text. |
.text-xs-right
|
Right aligned text. |
.text-justify
|
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 |
---|---|
.p-5 |
padding: 5px |
.p-y-5 |
padding-top: 5px padding-bottom: 5px |
.p-x-5 |
padding-left: 5px padding-right: 5px |
.p-t-5 |
padding-top: 5px |
.p-r-5 |
padding-right: 5px |
.p-b-5 |
padding-bottom: 5px |
.p-l-5 |
padding-left: 5px |
Quick Margin
All size: 0, 3, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50.
CLASS | DESCRIPTION |
---|---|
.m-5 |
margin: 5px |
.m-y-5 |
margin-top: 5px margin-bottom: 5px |
.m-x-5 |
margin-left: 5px margin-right: 5px |
.m-t-5 |
margin-top: 5px |
.m-r-5 |
margin-right: 5px |
.m-b-5 |
margin-bottom: 5px |
.m-l-5 |
margin-left: 5px |
Quick Height
All size: 50, 100, 150, 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: 50, 100, 150, 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
Extra small devices Phones (<480px) | Extra small devices Phones (≥480px) | Small devices Tablets (≥768px) | Medium devices Desktops (≥992px) | Large devices Desktops (≥1200px) | |
---|---|---|---|---|---|
50px | .h-xs-50 |
.h-sm-50 |
.h-md-50 |
.h-lg-50 |
.h-xl-50 |
100px | .h-xs-100 |
.h-sm-100 |
.h-md-100 |
.h-lg-100 |
.h-xl-100 |
150px | .h-xs-150 |
.h-sm-150 |
.h-md-150 |
.h-lg-150 |
.h-xl-150 |
200px | .h-xs-200 |
.h-sm-200 |
.h-md-200 |
.h-lg-200 |
.h-xl-200 |
250px | .h-xs-250 |
.h-sm-250 |
.h-md-250 |
.h-lg-250 |
.h-xl-250 |
300px | .h-xs-300 |
.h-sm-300 |
.h-md-300 |
.h-lg-300 |
.h-xl-300 |
350px | .h-xs-350 |
.h-sm-350 |
.h-md-350 |
.h-lg-350 |
.h-xl-350 |
400px | .h-xs-400 |
.h-sm-400 |
.h-md-400 |
.h-lg-400 |
.h-xl-400 |
450px | .h-xs-450 |
.h-sm-450 |
.h-md-450 |
.h-lg-450 |
.h-xl-450 |
500px | .h-xs-500 |
.h-sm-500 |
.h-md-500 |
.h-lg-500 |
.h-xl-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.
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 |
Hidden | Visible | Visible | Visible | Visible | Visible |
.hidden-sm-down |
Hidden | Hidden | Visible | Visible | Visible | Visible |
.hidden-md-down |
Hidden | Hidden | Hidden | Visible | Visible | Visible |
.hidden-lg-down |
Hidden | Hidden | Hidden | Hidden | Visible | Visible |
.hidden-xl-down |
Hidden | Hidden | Hidden | Hidden | Hidden | Visible |
.hidden-xxl-down |
Hidden | Hidden | Hidden | Hidden | Hidden | Hidden |
.hidden-xs-up |
Hidden | Hidden | Hidden | Hidden | Hidden | Hidden |
.hidden-sm-up |
Visible | Hidden | Hidden | Hidden | Hidden | Hidden |
.hidden-md-up |
Visible | Visible | Hidden | Hidden | Hidden | Hidden |
.hidden-lg-up |
Visible | Visible | Visible | Hidden | Hidden | Hidden |
.hidden-xl-up |
Visible | Visible | Visible | Visible | Hidden | Hidden |
.hidden-xxl-up |
Visible | Visible | Visible | Visible | Visible | Hidden |