Bootstrap Helper Classes

This chapter will discuss some helper classes in Bootstrap that may come in handy.

Text

The following different classes show different text colors. If the text is a link, it will darken when you hover over it.

Class	Description	Example
.text-muted	The text style of the "text-muted" class	Try it
.text-primary	The text style of the "text-primary" class	Try it
.text-success	The text style of the "text-success" class	Try it
.text-info	The text style of the "text-info" class	Try it
.text-warning	The text style of the "text-warning" class	Try it
.text-danger	The text style of the "text-danger" class	Try it

Background

The following different classes show different background colors. If the text is a link, it will darken when you hover over it.

Class	Description	Example
.bg-primary	Table cells use the "bg-primary" class	Try it
.bg-success	Table cells use the "bg-success" class	Try it
.bg-info	Table cells use the "bg-info" class	Try it
.bg-warning	Table cells use the "bg-warning" class	Try it
.bg-danger	Table cells use the "bg-danger" class	Try it

Other

Class	Description	Example
.pull-left	Float an element to the left	Try it
.pull-right	Float an element to the right	Try it
.center-block	Set element to display:block and center it	Try it
.clearfix	Clear floats	Try it
.show	Force element to show	Try it
.hidden	Force element to hide	Try it
.sr-only	Hide elements on all devices except screen readers	Try it
.sr-only-focusable	Used in combination with the .sr-only class, shows when the element gets focus (e.g., keyboard-only users)	Try it
.text-hide	Replace the text content contained in the page element with a background image	Try it
.close	Show close button	Try it
.caret	Show dropdown functionality	Try it

---

More Examples

Close Icon

Use the generic close icon to close modal boxes and alert boxes. Use the classcloseto get the close icon.

The result is as follows:

aria-hidden="true"This is mainly to help disabled people (such as blind people) use screen reading devices (which automatically read content and play it aloud). When the device plays content with this attribute, it will automatically skip it, to avoid confusion for disabled people!

Caret

Use the caret to indicate dropdown functionality and direction. Use a <span> element with the classcaretto get this functionality.

The result is as follows:

Quick Floats

You can use the classpull-leftorpull-rightto float an element to the left or right. The example below demonstrates this.

The result is as follows:

To align components in the navbar, use.navbar-leftor.navbar-rightinstead. SeeBootstrap Navbar。

Center Content

Use the classcenter-blockto center elements.

The result is as follows:

Clear Floats

To clear floats of an element, use.clearfix class。

The result is as follows:

Show and Hide Content

You can use the class.showand.hiddento force an element to show or hide (including screen readers).

The result is as follows:

Screen Reader

You can use the class.sr-onlyto hide an element from all devices except screen readers.

The result is as follows:

Here, we see that the label tags for the two input fields both have the classsr-only, so the labels will only be visible to screen readers.

Other extensions