Article Categories

Selected Reading

Bootstrap Helper Classes

Bootstrap HTML jQuery Web Development

Bootstrap helper classes are utility classes that provide quick styling solutions for common layout and formatting needs. These classes include .pull-left, .pull-right, .center-block, .clearfix, and others that help developers apply styles without writing custom CSS.

Common Bootstrap Helper Classes

Following are the most commonly used Bootstrap helper classes −

.pull-left − Floats an element to the left
.pull-right − Floats an element to the right
.center-block − Centers a block-level element horizontally
.clearfix − Clears floated elements within a container
.text-left, .text-center, .text-right − Text alignment utilities
.show, .hidden − Show or hide elements

Syntax

Following is the syntax for using Bootstrap helper classes −

<div class="helper-class-name">Content</div>

Multiple helper classes can be combined on the same element −

<div class="pull-left text-center">Content</div>

Using the Clearfix Class

The .clearfix class is essential when working with floated elements. It ensures that the parent container properly wraps around its floated children, preventing layout issues.

Example

Following example demonstrates the .clearfix class with floated elements −

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap Clearfix Example</title>
   <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
   <div class="clearfix" style="background: orange; border: 1px solid #000; padding: 10px;">
      <div class="pull-left" style="background: #58D3F7; padding: 10px;">
         Quick Float to left
      </div>
      <div class="pull-right" style="background: #DA81F5; padding: 10px;">
         Quick Float to right
      </div>
   </div>
</body>
</html>

The output shows floated elements properly contained within the orange parent container −

[Orange container with "Quick Float to left" on left side (light blue background) and "Quick Float to right" on right side (purple background)]

Pull Left and Pull Right Classes

The .pull-left and .pull-right classes are equivalent to float: left and float: right in CSS. They are commonly used for positioning elements like images, buttons, or text blocks.

Example

Following example shows different uses of pull classes −

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap Pull Classes</title>
   <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body style="padding: 20px;">
   <div class="clearfix" style="border: 1px solid #ccc; padding: 15px; margin-bottom: 20px;">
      <img src="/html/images/test.png" class="pull-left" style="width: 50px; height: 50px; background: #ddd; margin-right: 10px;" alt="Left Image">
      <p>This text flows around the left-floated image. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
   </div>

   <div class="clearfix" style="border: 1px solid #ccc; padding: 15px;">
      <button class="btn btn-primary pull-right">Right Button</button>
      <button class="btn btn-default pull-left">Left Button</button>
      <h4 style="margin: 0; padding-top: 7px;">Header with Buttons</h4>
   </div>
</body>
</html>

The output displays images and buttons positioned using pull classes −

[Container with small gray image on left, text flowing beside it]
[Container with "Left Button" on left side, "Right Button" on right side, "Header with Buttons" in center]

Center Block Class

The .center-block class centers block-level elements horizontally by setting left and right margins to auto. It only works on elements that have a defined width.

Example

Following example demonstrates the .center-block class −

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap Center Block</title>
   <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body style="padding: 20px;">
   <div class="center-block" style="width: 300px; background: #f0f0f0; padding: 20px; border: 2px solid #333;">
      <h4>Centered Block</h4>
      <p>This div is centered horizontally using the .center-block class.</p>
   </div>

   <div style="margin-top: 20px; width: 200px; background: #e6f3ff; padding: 15px; border: 1px solid #0066cc;" class="center-block">
      <p style="margin: 0;">Another centered element with different styling.</p>
   </div>
</body>
</html>

The output shows both containers centered horizontally on the page −

        [Centered gray container with "Centered Block" title and description text]
             [Centered blue container with smaller text]

Text Alignment Helper Classes

Bootstrap provides text alignment classes for quick text positioning without custom CSS.

Example

Following example shows various text alignment classes −

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap Text Alignment</title>
   <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body style="padding: 20px;">
   <div style="border: 1px solid #ddd; padding: 15px; margin-bottom: 10px;">
      <p class="text-left">This text is aligned to the left.</p>
   </div>
   
   <div style="border: 1px solid #ddd; padding: 15px; margin-bottom: 10px;">
      <p class="text-center">This text is centered.</p>
   </div>
   
   <div style="border: 1px solid #ddd; padding: 15px; margin-bottom: 10px;">
      <p class="text-right">This text is aligned to the right.</p>
   </div>
   
   <div style="border: 1px solid #ddd; padding: 15px;">
      <p class="text-justify">This text is justified. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
   </div>
</body>
</html>

The output displays text aligned in different directions within bordered containers −

This text is aligned to the left.
                    This text is centered.
                                           This text is aligned to the right.
This text is justified. Lorem ipsum dolor sit amet, consectetur
adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua.