Bootstrap CSS Helper Classes Reference

Bootstrap 3 includes a powerful collection of helper classes—predefined CSS classes that add functionality to your designs with minimal effort. These utility classes streamline tasks like alignment, visibility control, spacing, and more, making web development quicker and more efficient.

This guide explores the most commonly used helper classes in Bootstrap 3. For a detailed breakdown of Bootstrap components and tips, check out TheCodingCollege.com.

1. Text Alignment

Helper classes for text alignment allow you to align text with ease.

ClassDescription
.text-leftAligns text to the left (default).
.text-centerCenters the text horizontally.
.text-rightAligns text to the right.

Example:

<p class="text-left">This text is left-aligned.</p>
<p class="text-center">This text is center-aligned.</p>
<p class="text-right">This text is right-aligned.</p>

2. Contextual Colors

Apply color classes to text for context-aware styling.

ClassDescription
.text-mutedMuted text (light gray).
.text-primaryPrimary theme color (blue).
.text-successSuccess theme color (green).
.text-infoInformational color (cyan).
.text-warningWarning color (orange).
.text-dangerDanger/error color (red).

Example:

<p class="text-muted">Muted text for subtle emphasis.</p>
<p class="text-primary">This is a primary-colored text.</p>
<p class="text-success">Success! Operation completed.</p>
<p class="text-warning">Warning! Check your input.</p>
<p class="text-danger">Error! Something went wrong.</p>

3. Background Colors

Add background color to elements using these classes.

ClassDescription
.bg-primaryPrimary background color.
.bg-successGreen background.
.bg-infoCyan background.
.bg-warningOrange background.
.bg-dangerRed background.

Example:

<div class="bg-primary text-white">Primary background</div>
<div class="bg-success text-white">Success background</div>
<div class="bg-warning text-dark">Warning background</div>
<div class="bg-danger text-white">Danger background</div>

4. Visibility Helper Classes

Control the visibility of elements on specific devices with these classes.

ClassDescription
.hidden-xsHides the element on extra small devices.
.hidden-smHides the element on small devices.
.hidden-mdHides the element on medium devices.
.hidden-lgHides the element on large devices.
.visible-xsMakes the element visible only on extra small devices.
.visible-smMakes the element visible only on small devices.
.visible-mdMakes the element visible only on medium devices.
.visible-lgMakes the element visible only on large devices.

Example:

<div class="visible-xs">Visible only on extra small devices.</div>
<div class="hidden-sm">Hidden on small devices.</div>

5. Clearfix Helper

The .clearfix class is used to clear floats within a container.

Example:

<div class="clearfix">
  <div class="pull-left">Left content</div>
  <div class="pull-right">Right content</div>
</div>

6. Close Icon

The .close class adds a styled close icon, often used in alerts or modals.

Example:

<button type="button" class="close" aria-label="Close">
  <span aria-hidden="true">×</span>
</button>

7. Pulling Content

Use these classes to align elements.

ClassDescription
.pull-leftAligns an element to the left.
.pull-rightAligns an element to the right.

Example:

<div class="pull-left">This is on the left.</div>
<div class="pull-right">This is on the right.</div>

8. Responsive Utilities

Control the visibility of content based on screen size.

ClassDescription
.visible-xs-blockShows content on extra small devices.
.hidden-xsHides content on extra small devices.
.visible-sm-inlineShows content as inline on small devices.
.hidden-smHides content on small devices.

Example:

<div class="hidden-xs">This is hidden on extra small screens.</div>
<div class="visible-lg-block">This is visible on large screens.</div>

9. Spacing Classes

Bootstrap does not include spacing utilities in version 3. However, you can easily add margin or padding using custom CSS or inline styles.

Custom Example:

<div style="margin: 20px;">Custom margin spacing</div>
<div style="padding: 10px;">Custom padding spacing</div>

10. Alignment Helpers

Align content vertically or horizontally with these helper classes.

ClassDescription
.center-blockCenters a block-level element.
.text-leftAligns text to the left.
.text-centerCenters the text horizontally.
.text-rightAligns text to the right.

Example:

<img src="example.jpg" class="center-block" alt="Centered Image">

Conclusion

Bootstrap CSS helper classes enhance the functionality and responsiveness of your designs, offering developers a range of tools to build intuitive user interfaces. By incorporating these helper classes, you can focus more on functionality while ensuring consistent, visually appealing results.

Leave a Comment