Bootstrap auxiliary class
This chapter discusses some of the Bootstrap might come in handy helper classes.
text
The following different classes show different text colors. If the text is a link to move the mouse over the text will be dimmed:
| class | description | Examples |
|---|---|---|
| .text-muted | Text Style "text-muted" category | try it |
| .text-primary | Text Style "text-primary" category | try it |
| .text-success | Text Style "text-success" category | try it |
| .text-info | Text Style "text-info" category | try it |
| .text-warning | Text Style "text-warning" category | try it |
| .text-danger | Text Style "text-danger" category | try it |
background
The following different classes shows different background colors. If the text is a link to move the mouse over the text will be dimmed:
| class | description | Examples |
|---|---|---|
| .bg-primary | Table cell using the "bg-primary" category | try it |
| .bg-success | Table cell using the "bg-success" category | try it |
| .bg-info | Table cell using the "bg-info" category | try it |
| .bg-warning | Table cell using the "bg-warning" category | try it |
| .bg-danger | Table cell using the "bg-danger" category | try it |
other
| class | description | Examples |
|---|---|---|
| .pull-left | Elements float to the left | try it |
| .pull-right | Elements float to the right | try it |
| .center-block | Element is set display: block and centered | try it |
| .clearfix | Clear float | try it |
| .show | Mandatory elements are displayed | try it |
| .hidden | Compulsory element hiding | try it |
| .sr-only | In addition to the screen reader, the hidden element on other devices | try it |
| .sr-only-focusable | In conjunction with .sr-only class, displayed when the element gets focus (such as: user's keyboard operation) | try it |
| .text-hide | The text page elements contained replace background | try it |
| .close | Display Off button | try it |
| .caret | Display drop-down menu | try it |
More examples
Close icon
Use common Close icon to close the modal box and the alert box. Useclass close to get close icon.
Examples
try it"
The results are as follows:
Caret
Use caret to pull down the function and direction. Use <span> element withclass caret to get this feature.
The results are as follows:
Fast floating
You can use eachclass pull-left pull-rightor to the left or right-floating elements. The following example illustrates this point.
Examples
try it"
The results are as follows:
To align the components of the navigation bar, use.navbar-left or .navbar-rightinstead. See the Bootstrap navigation bar .
Centered content
Useclass center-block to center elements.
Examples
try it"
The results are as follows:
Clear float
To clear the floating element, use.clearfix class.
Examples
try it"
The results are as follows:
Show and hide content
You can force the element to display or hide (including screen readers) through the use ofclass .show and .hiddencome.
Examples
try it"
The results are as follows:
Screen reader
You can put all the elements on the device by using a hiddenclass .sr-only, in addition to a screen reader.
Examples
try it"
The results are as follows:
Here we see two types of label input tags withclass sr-only, so the label will only be visible to screen readers.