Bootstrap provides several helper classes to “help” you display information to your viewers. As you would assume, you can apply these helpers by adding the class(es) to your given tags.
Colors
You can apply different colors to your text, based upon the colors defined for primary, success, info, etc. This is via a class with the text- prefix. Bootstrap will use the colors associated with the contextual values.
One additional class that we’ve not seen so far is the muted color. This provides a light to medium grey color.
These can also be applied to links as well as regular text.
For example:
text-muted
text-primary
text-success
text-info
text-warning - as a link text-danger - as a link
If you run into a problem getting the text color to display, you may have a specificity issue. In that case, wrap your text in a span, and apply the class to the span, like you see below:
text-primary within a span
You can also use the colors as background colors. However, instead of a text- prefix, you use a bg- prefix. Like below:
Just a normal primary background.
Way to go!
This can really help draw attention to a topic. Just make sure that the colors of the foreground and background don’t make it hard to read.
Floating an Element
Often web designers will need to float an element. You can use the pull-left and pull-right classes for this. While this will set the float value, it is up to you to define the size of the element, if it is not already set, like for an image.
Content that is floated to the left.Float this info to the right.
Of course, using the clearfix class will clear your floating elements.
While you can’t float something in the center of the screen, you can define a width, then set the margins to auto. If you use the center-block class, you get this. You just need to define the width of your element, as this is not done in Bootstrap.
Helper Classes in Bootstrap was originally found on Access 2 Learn
