Helper class for text
Text emphasis
This class can be used for this purpose such as showing success message in green color, warning or error message in red color etc.
| Class | Description |
|---|---|
.text-muted
|
Text styled with class |
.text-primary
|
Text styled with class |
.text-info
|
Text styled with class |
.text-success
|
Text styled with class |
.text-danger
|
Text styled with class |
.text-warning
|
Text styled with class |
Formatting of text
You are free to use text formatting to make your text bold, italic, small and so on, in the same way you do in simple HTML.
| Tag | Description |
|---|---|
<b>
|
This is bold text. |
<big>
|
This is big text |
<code>
|
|
<em>
|
This is emphasized text |
<small>
|
This is small text |
<mark>
|
This is highlighted text |
<strong>
|
This is strongly emphasized text |
<ins>
|
This text is inserted to the document |
<del>
|
|
Alignment of text
To align text anywhere like left, right, center or justify, these classes are very useful:
| Class | Description |
|---|---|
.text-left
|
Left aligned text. |
.text-center
|
Center aligned text. |
.text-right
|
Right aligned text. |
.text-justify
|
Text is justify..Text is justify..Text is justify.. |
Transformation of text
You can also transform the text to lowercase, uppercase or make them capitalize.
| Class | Description |
|---|---|
.text-lowercase
|
Text transform in lowercase:
Lowercase text |
.text-uppercase
|
Text transform in uppercase:
Uppercase text |
.text-capitalize
|
Text transform in capital:
Capitalize text |
Text wrapping
Add one of these classes to hiding text, truncating, break strings, prevent wrapping the text.
| Class | Description |
|---|---|
.text-hide
|
Helps to replace an element's text content with a background image |
.truncate-text
|
Prevents text from wrapping into multiple lines, truncating it instead. |
.break-text
|
Breaks strings if their length exceeds the width of their container. |
.text-nowrap
|
Prevents text from wrapping into multiple lines. |
Alignments of elements
Center block
| Class | Description |
|---|---|
.center-block
|
Sets an element to display:block with margin-right:auto and margin-left:auto |
Quick float and clearing
Float an element to the left or right with a class. but floats need to be cleared sometime,for that add .clearfix to the parent element.
| 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. |
Box modal
Padding classes
The classes are named using the format: {property}-{sides}-{size}.like that:
| Class | Description |
|---|---|
.padding-5 |
padding: 5px |
.padding-vertical-10 |
padding-top: 10px padding-bottom: 10px |
.padding-horizontal-10 |
padding-left: 10px padding-right: 10px |
.padding-top-20 |
padding-top: 20px |
.padding-right-20 |
padding-right: 20px |
.padding-bottom-20 |
padding-bottom: 20px |
.padding-left-20 |
padding-left: 20px |
Margin classes
Same as padding, margin classes also define. here are some representative examples of padding classes.
| Class | Description |
|---|---|
.margin-5 |
margin: 5px |
.margin-vertical-10 |
margin-top: 10px margin-bottom: 10px |
.margin-horizontal-10 |
margin-left: 10px margin-right: 10px |
.margin-top-20 |
margin-top: 20px |
.margin-right-20 |
margin-right: 20px |
.margin-bottom-20 |
margin-bottom: 20px |
.margin-left-20 |
margin-left: 20px |
Miscellaneous
Display utilities
The .visible-*-* classes for each breakpoint come in three variations, one for each CSS display property value listed below.
| Group Of class | Css |
|---|---|
.visible-*-block |
display:block; |
.visible-*-inline |
display:inline; |
.visible-*-inline-block |
display:inline-block; |
Print classes
Similar to the regular responsive classes, use these for toggling content for print.
| Classes | Browser | |
|---|---|---|
.visible-print-block.visible-print-inline.visible-print-inline-block |
Hidden | Visible |
.hidden-print |
Visible | Hidden |
Quick grid with no space
.row with .no-space to set the columns
which directly under no space.
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 |