Bootstrap 4 Utilities

Welcome to The Coding College! Bootstrap 4 Utilities are a set of predefined classes that allow you to style and manipulate elements quickly without writing custom CSS. From spacing and positioning to text alignment and visibility, utilities streamline your development process.

In this guide, we’ll explore the key Bootstrap 4 Utility classes and demonstrate their practical applications.

What Are Bootstrap 4 Utilities?

Bootstrap 4 Utilities are simple, CSS-based classes designed to perform common styling and layout tasks. These include adjusting spacing, borders, backgrounds, text, and more, saving you from writing custom CSS for basic tasks.

Categories of Utilities

Bootstrap 4 Utilities are grouped into several categories:

  1. Spacing
  2. Colors and Backgrounds
  3. Borders
  4. Flexbox
  5. Text
  6. Positioning
  7. Visibility

1. Spacing Utilities

Spacing utilities control the margin and padding of elements. They use a consistent naming convention:

  • m for margin
  • p for padding
  • Direction:
    • t (top)
    • b (bottom)
    • l (left)
    • r (right)
    • x (horizontal: left + right)
    • y (vertical: top + bottom)
    • No direction applies to all sides

Syntax:

{property}{sides}-{size}

  • size values:0, 1, 2, 3, 4, 5, and auto
    • 0: 0 spacing
    • 1: $spacer * .25 (default 4px)
    • 2: $spacer * .5 (default 8px)
    • 3: $spacer * 1 (default 16px)
    • 4: $spacer * 1.5 (default 24px)
    • 5: $spacer * 3 (default 48px)

Example: Spacing

<div class="mt-3 mb-5 p-4 bg-light">  
  This div has a top margin of 3, bottom margin of 5, and padding of 4.  
</div>

2. Color and Background Utilities

Color utilities let you apply Bootstrap’s predefined color palette to text, backgrounds, and borders.

Text Colors

<p class="text-primary">This text is primary colored.</p>  
<p class="text-success">This text is success colored.</p>  
<p class="text-danger">This text is danger colored.</p>

Background Colors

<div class="bg-warning text-white p-3">  
  This div has a warning background and white text.  
</div>

3. Border Utilities

Border utilities allow you to add or remove borders, change their colors, and round their corners.

Example: Borders

<div class="border border-primary p-3">Primary border</div>  
<div class="border-top border-danger p-3">Top border only</div>  
<div class="rounded-circle border p-3">Circle border</div>

4. Flexbox Utilities

Bootstrap 4 offers a wide range of Flexbox utilities to align and position elements.

Key Flexbox Utilities

  • d-flex: Makes an element a flex container
  • justify-content-*: Aligns items horizontally (start, center, end, around, between)
  • align-items-*: Aligns items vertically (start, center, end, baseline, stretch)
  • flex-grow-*, flex-shrink-*: Controls how items grow or shrink

Example: Flexbox

<div class="d-flex justify-content-between align-items-center bg-light p-3">  
  <span>Item 1</span>  
  <span>Item 2</span>  
  <span>Item 3</span>  
</div>

5. Text Utilities

Text utilities allow you to control alignment, wrapping, transformation, and weight.

Text Alignment

<p class="text-left">Left aligned text.</p>  
<p class="text-center">Center aligned text.</p>  
<p class="text-right">Right aligned text.</p>

Text Transform and Weight

<p class="text-uppercase font-weight-bold">Uppercase bold text.</p>  
<p class="text-lowercase font-weight-light">Lowercase light text.</p>

Text Truncation

<div class="text-truncate" style="width: 200px;">  
  This is a long text that will be truncated.  
</div>

6. Positioning Utilities

Positioning utilities let you control the placement of elements using relative, absolute, or fixed positioning.

Example: Fixed Position

<div class="position-fixed bg-warning text-white p-3" style="top: 0; left: 0;">  
  Fixed positioned element.  
</div>

Example: Sticky Position

<div class="position-sticky bg-light p-3" style="top: 10px;">  
  Sticky positioned element.  
</div>

7. Visibility Utilities

Control the visibility of elements with the following utilities:

  • .d-none: Hides an element
  • .d-block: Displays as block
  • .d-inline: Displays as inline
  • .d-sm-*, .d-md-*, .d-lg-*, .d-xl-*: Controls visibility based on screen size

Example: Responsive Visibility

<div class="d-none d-md-block">  
  Visible on medium screens and larger.  
</div>

Combining Utilities

You can combine multiple utilities to create dynamic, responsive designs without writing custom CSS.

Example: Custom Card

<div class="bg-info text-white p-4 border border-light rounded d-flex justify-content-between">  
  <h4>Utility Card</h4>  
  <button class="btn btn-light">Click Me</button>  
</div>

Conclusion

Bootstrap 4 Utilities offer a quick and efficient way to style elements without custom CSS. By mastering these utility classes, you can create responsive, user-friendly designs faster and with fewer lines of code.

Leave a Comment