YouTip

This chapter will discuss some of the helper classes in Bootstrap that can be useful. ## Text The following different classes display different text colors. If the text is a link, it will darken when the mouse hovers over it: | Class | Description | Example | | --- | --- | --- | | .text-muted | Text style for the "text-muted" class | (#) | | .text-primary | Text style for the "text-primary" class | (#) | | .text-success | Text style for the "text-success" class | (#) | | .text-info | Text style for the "text-info" class | (#) | | .text-warning | Text style for the "text-warning" class | (#) | | .text-danger | Text style for the "text-danger" class | (#) | ## Background The following different classes display different background colors. If the text is a link, it will darken when the mouse hovers over it: | Class | Description | Example | | --- | --- | --- | | .bg-primary | Table cell uses the "bg-primary" class | (#) | | .bg-success | Table cell uses the "bg-success" class | (#) | | .bg-info | Table cell uses the "bg-info" class | (#) | | .bg-warning | Table cell uses the "bg-warning" class | (#) | | .bg-danger | Table cell uses the "bg-danger" class | (#) | ## Others | Class | Description | Example | | --- | --- | --- | | .pull-left | Float an element to the left | (#) | | .pull-right | Float an element to the right | (#) | | .center-block | Set an element to display:block and center it | (#) | | .clearfix | Clear the float | (#) | | .show | Force an element to be shown | (#) | | .hidden | Force an element to be hidden | (#) | | .sr-only | Hide an element on all devices except screen readers | (#) | | .sr-only-focusable | Use in combination with the .sr-only class to show the element when it's focused (e.g., by keyboard-only users) | (#) | | .text-hide | Replace the text content of a page element with a background image | (#) | | .close | Display a close button | (#) | | .caret | Display a dropdown indicator | (#) | * * * ## More Examples ### Close Icon Use the universal close icon to close modals and alerts. Use the class **close** to get the close icon. ## Example

Close icon example ×

[Try it »](#) The result is as follows:  > aria-hidden="true" mainly helps people with disabilities (e.g., blindness) who use screen readers (which automatically read and play content). When it encounters content with this attribute, it will automatically skip it to avoid confusing people with disabilities! ### Caret Use the caret to indicate a dropdown functionality and direction. Use the element with the class **caret** to get this functionality. ## Example

Caret example

[Try it »](#) The result is as follows:  ### Quick Float You can use the class **pull-left** or **pull-right** to float an element to the left or right, respectively. The following example demonstrates this. ## Example

Quick float left

Quick float right

[Try it »](#) The result is as follows:  To align components in a navbar, use **.navbar-left** or **.navbar-right** instead. See (#). ### Center Content Use the class **center-block** to center an element. ## Example

This is a center-block example

[Try it »](#) The result is as follows:  ### Clearfix To clear the float of an element, use the **.clearfix** class. ## Example

Quick float left

Quick float right

[Try it »](#) The result is as follows:  ### Show and Hide Content You can force an element to be shown or hidden (including screen readers) by using the classes **.show** and **.hidden**. ## Example

This is a show class example

This is a hide class example

[Try it »](#) The result is as follows:  ### Screen Reader You can hide an element on all devices except screen readers by using the class **.sr-only**. ## Example

Email address

Password

[Try it »](#) The result is as follows:  Here, we see that both input type labels have the class **sr-only**, so the labels will only be visible to screen readers.