Bootstrap - Helper Classes


This chapter discusses some of the helper classes in Bootstrap that might come in handy.

Close icon

Use the generic close icon for dismissing content like modals and alerts. Use the class close to get the close icon.

<p>Close Icon Example
   <button type = "button" class = "close" aria-hidden = "true">


Use carets to indicate dropdown functionality and direction. To get this functionality use the class caret with a <span> element.

<p>Caret Example<span class = "caret"></span></p>

Quick Floats

You can float an element to the left or right with class pull-left or pull-right respectively the following example demonstrates this.

<div class = "pull-left">Quick Float to left</div>
<div class = "pull-right">Quick Float to right</div>
To align components in navbars with utility classes, use .navbar-left or .navbar-right instead. See the navbar chapter for details.

Center Content Blocks

Use class center-block to set an element to center.

<div class = "row">
   <div class = "center-block" style = "width:200px; background-color:#ccc;">
      This is an example for center-block


To clear the float of any element, use the .clearfix class.

<div class = "clearfix" style = "background: #D8D8D8;border: 1px solid #000; padding: 10px;">
   <div class = "pull-left" style = "background:#58D3F7;">
      Quick Float to left
   <div class = "pull-right" style = "background: #DA81F5;">
      Quick Float to right

Showing and Hiding Content

You can force an element to be shown or hidden (including for screen readers) with the use of classes .show and .hidden.

<div class = "row" style = "padding: 91px 100px 19px 50px;">
   <div class = "show" style = "left-margin:10px; width:300px; background-color:#ccc;">
      This is an example for show class
   <div class = "hidden" style = "width:200px; background-color:#ccc;">
      This is an example for hide class

Screen Reader Content

You can hide an element to all devices except screen readers with the class .sr-only.

<div class = "row" style = "padding: 91px 100px 19px 50px;">
   <form class = "form-inline" role = "form">
      <div class = "form-group">
         <label class = "sr-only" for = "email">Email address</label>
         <input type = "email" class = "form-control" placeholder = "Enter email">
      <div class = "form-group">
         <label class = "sr-only" for = "pass">Password</label>
         <input type = "password" class = "form-control" placeholder = "Password">

Here we can see that the label of both the input types is assigned the class sr-only, hence labels will be visible to only screen readers.

Useful Video Courses


Bootstrap Online Training

26 Lectures 2 hours

Anadi Sharma


Bootstrap 4 Responsive Web Development

54 Lectures 4.5 hours

Frahaan Hussain


Bootstrap By Building Projects - Includes Bootstrap 4


161 Lectures 14.5 hours

Eduonix Learning Solutions


Responsive E Commerce Website Designing Without Bootstrap

20 Lectures 4 hours

Azaz Patel


Bootstrap 4 for Tutorials

15 Lectures 1.5 hours

Muhammad Ismail


Complete Bootstrap 5 Course From Scratch With 3 Projects

62 Lectures 8 hours

Yossef Ayman Zedan