Bootstrap Helper Classes

Bootstrap helper class described the text color classes, background color classes , the floating , visibility in print , in only web , cloase button , dropdown icon , Center content blocks, clearfix etc.

1. text color or Contextual colors:

We can make the text color using the clas name .text-muted for deep gray text, .text-primary for blue, .text-success for green, .text-info for deep blue, .text-warning for deep yellow and .text-danger for red.

Ex.

.text-muted for deep gray text

.text-primary for blue

.text-success for green

.text-info for deep blue

.text-warning for deep yellow

.text-danger for red

2. Background color or Contextual backgrounds:

we can give any background color of a html tag bu using the bootstrap provided class name and they are: .bg-primary for deep blue background color , .bg-success for light green background color, .bg-info for sky blue background color , .bg-warning for yellow background color and .bg-danger for red background color of a tag.

Ex.

.bg-primary for deep blue background color

.bg-success for light green background color

.bg-info for sky blue background color

.bg-warning for yellow background color

.bg-danger for red background color

3. cloase icon for modals and alert of bootstrap:

In bootstrap many time we have to use a modal or alert window and a cloase button with that. So bootstrap is providing us a code to make a cloase icon and that is <button type=”button” class=”close” aria-label=”Close”><span aria-hidden=”true”>& times;</span></button>

Ex.

4. Dropdown Icon or Carets:

In a html page many time we have to use a dropdown icon in menu or dropdown listind or so many placess and to create a dropdown icon bootstrap is providing a class to make a dropdown icon and the class name is .caret

Ex.

5. Float left and float right:

In bootstrap there is quick float classes to make a tag float feft or float right and we have to use the class name .pull-left for float left and have to use .pull-right for float right

Ex.

.pull-left class to make the tag float left

.pull-right class to make the tag float right

6. make a blog center or Center content blocks:

in bootstrap we can use .center-block classname to make a block or tag center.

Ex.

.center-block classname to make a block or tag center

7. Clearfix or make horizontaly clear

To clearfix of floating bootstrap providing us a class name .clearfix

Ex.

.clearfix class to make clear floating

8. Showing and hiding and makeing invisible:

By using the class .show to make a tag visible, .hidden to make a tag hide and .invisible to make display none.

Ex.

.show to make a tag visible

.hidden to make a tag hide

.invisible to make display none

9. Screen reader and keyboard navigation content

Hide an element to all devices except screen readers with .sr-only. Combine .sr-only with .sr-only-focusable to show the element again when it’s focused

10. Replace an element’s text content with a background image.

by using the class name .text-hide  we can replace an element’s text content with a background image.