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.
Class | Description |
---|---|
.text-left | Aligns text to the left (default). |
.text-center | Centers the text horizontally. |
.text-right | Aligns 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.
Class | Description |
---|---|
.text-muted | Muted text (light gray). |
.text-primary | Primary theme color (blue). |
.text-success | Success theme color (green). |
.text-info | Informational color (cyan). |
.text-warning | Warning color (orange). |
.text-danger | Danger/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.
Class | Description |
---|---|
.bg-primary | Primary background color. |
.bg-success | Green background. |
.bg-info | Cyan background. |
.bg-warning | Orange background. |
.bg-danger | Red 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.
Class | Description |
---|---|
.hidden-xs | Hides the element on extra small devices. |
.hidden-sm | Hides the element on small devices. |
.hidden-md | Hides the element on medium devices. |
.hidden-lg | Hides the element on large devices. |
.visible-xs | Makes the element visible only on extra small devices. |
.visible-sm | Makes the element visible only on small devices. |
.visible-md | Makes the element visible only on medium devices. |
.visible-lg | Makes 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.
Class | Description |
---|---|
.pull-left | Aligns an element to the left. |
.pull-right | Aligns 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.
Class | Description |
---|---|
.visible-xs-block | Shows content on extra small devices. |
.hidden-xs | Hides content on extra small devices. |
.visible-sm-inline | Shows content as inline on small devices. |
.hidden-sm | Hides 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.
Class | Description |
---|---|
.center-block | Centers a block-level element. |
.text-left | Aligns text to the left. |
.text-center | Centers the text horizontally. |
.text-right | Aligns 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.