Prev Next

BS5 Utilities

Bootstrap 5 Utilities are CSS helper classes that make styling elements quicker and more flexible without writing custom CSS. They include spacing, colors, typography, and more.

Key Topics

Spacing Utilities

Use spacing utilities to add margin or padding to elements. Examples:

  • .m-3: Adds a margin of 1rem on all sides.
  • .p-2: Adds a padding of 0.5rem on all sides.
  • .mt-4: Adds a margin of 1.5rem on the top.
<div class="p-3 mb-2 bg-primary text-white">Padded Box</div>
<div class="mt-4">Top Margin Applied</div>

Color Utilities

Change text and background colors using color utilities. Examples:

  • .text-primary: Sets text color to primary.
  • .bg-warning: Sets background color to warning.
  • .text-light: Sets text color to light.
<p class="text-primary">Primary Text</p>
<div class="bg-warning text-dark p-3">Warning Background</div>

Text Utilities

Control text alignment, wrapping, and transformation with text utilities. Examples:

  • .text-center: Centers text.
  • .text-uppercase: Transforms text to uppercase.
  • .text-nowrap: Prevents text from wrapping.
<p class="text-center">Centered Text</p>
<p class="text-uppercase">Uppercase Text</p>

Complete Utilities Example

Below is a complete example combining various utilities for spacing, color, and text alignment.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap 5 Utilities Demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container my-4">
        <h2 class="text-center text-primary">Bootstrap Utilities</h2>
        <div class="p-3 mb-2 bg-success text-light text-uppercase">Success Background with Uppercase Text</div>
        <p class="text-warning mt-4">Warning Text with Top Margin</p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Explanation: This example demonstrates various utility classes, including spacing, colors, and text alignment, applied in a real-world layout.

Key Takeaways

  • Use spacing utilities like .m-* and .p-* for margin and padding.
  • Apply text and background colors with classes like .text-* and .bg-*.
  • Control text alignment and transformation using .text-center, .text-uppercase, etc.
Prev Next