Bootstrap provides utility classes to manage spacing, alignment, display, and more.
Utilities in Bootstrap are predefined classes that provide a set of styles that you can apply directly to HTML elements. These classes allow you to manage various CSS properties, such as spacing, alignment, display, background colors, borders, and more, without writing custom CSS.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
<title>Utilities Examples</title>
<style>
.custom-border {
border: 2px dashed #000; /* Example dashed border */
}
</style>
</head>
<body>
<div class="container">
<!-- Spacing Utilities -->
<h2>Spacing Utilities</h2>
<p class="mb-3">This paragraph has a bottom margin of <code>.mb-3</code>.</p>
<div class="mb-4 p-3 border bg-light">Padding of <code>.p-3</code> inside this box.</div>
<p class="mt-4 mb-2">Top Margin and Bottom Margin examples:</p>
<div class="mb-3 p-3 border">Margin Bottom</div>
<div class="mt-3 p-3 border">Margin Top</div>
<!-- Text Utilities -->
<h2>Text Utilities</h2>
<p class="text-success">This text is green using the <code>.text-success</code> utility.</p>
<p class="text-danger">This text is red using the <code>.text-danger</code> utility.</p>
<p class="text-muted">This text is muted using the <code>.text-muted</code> utility.</p>
<p class="text-center">This text is centered using <code>.text-center</code>.</p>
<p class="text-uppercase">This text is uppercase using <code>.text-uppercase</code>.</p>
<!-- Display Utilities -->
<h2>Display Utilities</h2>
<div class="d-none d-md-block">
This text is hidden on small screens and visible on medium and larger screens.
</div>
<div class="d-block d-md-none">
This text is visible only on small screens.
</div>
<!-- Flex Utilities -->
<h2>Flex Utilities</h2>
<div class="d-flex justify-content-between bg-light p-3">
<div>Flex item 1</div>
<div>Flex item 2</div>
<div>Flex item 3</div>
</div>
<!-- Background Utilities -->
<h2>Background Utilities</h2>
<div class="bg-primary text-white p-3 mb-3">This has a blue background using <code>.bg-primary</code>.</div>
<div class="bg-warning text-dark p-3">This has a yellow background using <code>.bg-warning</code>.</div>
<!-- Border Utilities -->
<h2>Border Utilities</h2>
<div class="border p-3 mb-3">This box has a default border.</div>
<div class="border border-primary p-3 mb-3">This box has a primary colored border.</div>
<div class="custom-border p-3 mb-3">This box has a custom dashed border.</div>
<!-- Sizing Utilities -->
<h2>Sizing Utilities</h2>
<div class="w-50 bg-light p-3">This box is 50% width of its parent.</div>
<div class="h-25 bg-secondary text-white p-3">This box is 25% height of its parent.</div>
<!-- Positioning Utilities -->
<h2>Positioning Utilities</h2>
<div class="position-relative mb-3">
<div class="position-absolute top-0 start-0">Absolute positioned element</div>
<div class="border p-3">Relative parent element</div>
</div>
<h2>Additional Utilities</h2>
<div class="text-center">
<button class="btn btn-primary me-2">Button 1</button>
<button class="btn btn-secondary">Button 2</button>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
This paragraph has a bottom margin of .mb-3.
.p-3 inside this box.Top Margin and Bottom Margin examples:
This text is green using the .text-success utility.
This text is red using the .text-danger utility.
This text is muted using the .text-muted utility.
This text is centered using .text-center.
This text is uppercase using .text-uppercase.
.bg-primary..bg-warning.