Bootstrap 5 Tutorial
v5.3.0Bootstrap 5 Tutorial
Bootstrap 5 Utilities
Utilities: Single-purpose helper classes to quickly style elements without writing custom CSS.
What are Bootstrap Utilities?
Utilities are single-purpose CSS classes that help you quickly style elements. They follow a consistent naming convention and are designed to be combined for complex layouts.
Utility Categories
📐 Spacing
.m-*- Margin.p-*- Padding.gap-*- Gaps- Example:
.mt-3 .pb-4
🎨 Colors
.text-*- Text colors.bg-*- Background colors.border-*- Border colors- Example:
.text-white .bg-primary
📱 Display
.d-*- Display properties.flex-*- Flex utilities.position-*- Positioning- Example:
.d-flex .justify-content-center
📏 Sizing
.w-*- Width utilities.h-*- Height utilities.mw-*- Max width- Example:
.w-50 .h-100
🎯 Borders
.border- Add borders.rounded-*- Border radius.border-*- Border sides- Example:
.border .rounded-3
✨ Effects
.shadow-*- Box shadows.opacity-*- Opacity.overflow-*- Overflow- Example:
.shadow-lg .opacity-75
Utility Naming Convention
How Utility Classes Work
| Pattern | Meaning | Examples | CSS Equivalent |
|---|---|---|---|
{property}{sides}-{size} | Spacing utilities | .mt-3 .pb-4 .mx-auto | margin-top: 1rem |
{property}-{breakpoint}-{size} | Responsive utilities | .mt-md-4 .d-lg-none | @media (min-width: 768px) |
{property}-{value} | Single property | .text-center .fw-bold | text-align: center |
{property}{side}-{value} | Border utilities | .border-top .border-primary | border-top: 1px solid |
Responsive Utilities
Breakpoint Prefixes
| Breakpoint | Class Prefix | Dimensions |
|---|---|---|
| Extra small | (none) | <576px |
| Small | sm- | ≥576px |
| Medium | md- | ≥768px |
| Large | lg- | ≥992px |
| Extra large | xl- | ≥1200px |
| Extra extra large | xxl- | ≥1400px |
Responsive Examples
Visible on medium screens and up
Visible on small screens only
Responsive text alignment
<!-- Responsive display --> <div class="d-none d-md-block"> Hidden on mobile, visible on tablet+ </div> <!-- Responsive text alignment --> <p class="text-center text-md-start text-lg-end"> Centered on mobile, left on tablet, right on desktop </p> <!-- Responsive spacing --> <div class="mt-2 mt-md-4 mt-lg-5"> Different margins at different breakpoints </div>
Common Utility Patterns
Centering Elements
Centered with Flex
<!-- Horizontal center --> <div class="text-center"> <p>Centered text</p> </div> <!-- Flex center --> <div class="d-flex justify-content-center"> <button class="btn btn-primary">Centered button</button> </div> <!-- Complete center --> <div class="d-flex justify-content-center align-items-center" style="height: 100px;"> <div>Centered content</div> </div> <!-- Auto margins --> <div class="mx-auto" style="width: 200px;"> Centered with auto margins </div>
Spacing Between Elements
Margin right
Margin left
<!-- Gap utility --> <div class="d-flex gap-3"> <button>Button 1</button> <button>Button 2</button> </div> <!-- Individual spacing --> <div class="d-flex"> <div class="me-3">Margin right 1rem</div> <div class="ms-2">Margin left 0.5rem</div> </div> <!-- Vertical spacing --> <div class="mt-4 mb-3"> <p>Margin top and bottom</p> </div> <!-- All sides --> <div class="m-3 p-3"> Margin and padding on all sides </div>
Combining Utilities
Utility Combination Example
Multiple utilities working together
Premium Feature
Beautiful card combining multiple utilities
<!-- Complex utility combination -->
<div class="card shadow-lg border-primary">
<div class="card-body text-center">
<h5 class="card-title text-primary fw-bold mb-3">
Title with multiple classes
</h5>
<p class="card-text text-muted mb-4">
Text styling combination
</p>
<button class="btn btn-primary px-4 py-2 rounded-pill">
Combined button utilities
</button>
</div>
</div>
<!-- Gradient with utilities -->
<div class="bg-gradient-primary text-white p-4 rounded-3 shadow">
<h4 class="fw-light mb-3">
<i class="bi bi-stars me-2"></i>
Icon with margin
</h4>
<p class="mb-0 opacity-75">
Text with opacity
</p>
</div>Customizing Utilities
SCSS Customization
// Customize spacing scale
$spacer: 1rem;
$spacers: (
0: 0,
1: $spacer * .25,
2: $spacer * .5,
3: $spacer,
4: $spacer * 1.5,
5: $spacer * 3,
6: $spacer * 4,
7: $spacer * 5,
8: $spacer * 6
);
// Custom colors
$custom-colors: (
"custom": #ff6b6b,
"custom-dark": #ee5a52
);
// Merge with theme colors
$theme-colors: map-merge($theme-colors, $custom-colors);
// Add custom utility
.bg-gradient-custom {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
// Responsive font sizes
$font-sizes: (
1: 3rem,
2: 2.5rem,
3: 2rem,
4: 1.5rem,
5: 1.25rem,
6: 1rem,
7: 0.875rem
);
// Import Bootstrap
@import "bootstrap/scss/bootstrap";Tip: You can extend, modify, or disable utilities in your SCSS to match your design system.
Best Practices
When to Use Utilities
- ✅ Quick prototyping and mockups
- ✅ One-off styling adjustments
- ✅ Responsive behavior
- ✅ Consistent spacing system
- ✅ Avoiding CSS bloat
When to Use Custom CSS
- ❌ Complex component styling
- ❌ Repeated patterns (create component instead)
- ❌ Animations and transitions
- ❌ Custom layouts not covered by utilities
- ❌ Project-specific design systems
Utility First vs Component First
Utility-First Approach
Advantages
- Faster development
- Consistent spacing
- Smaller CSS bundle
- Easy responsive design
- No naming conflicts
Example
<div class="p-4 border rounded shadow">
<h2 class="text-primary mb-3">
Utility-First Card
</h2>
<p class="text-muted">
Built with utility classes
</p>
</div>Component-First Approach
Advantages
- Better abstraction
- Easier maintenance
- Semantic class names
- Design system consistency
- Team collaboration
Example
<!-- Custom component -->
<div class="custom-card">
<h2 class="custom-card__title">
Component Card
</h2>
<p class="custom-card__content">
Built with custom CSS
</p>
</div>
/* Custom CSS */
.custom-card {
padding: 1.5rem;
border: 1px solid #dee2e6;
border-radius: 0.375rem;
box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15);
}Recommendation
Use a hybrid approach: Start with utilities for quick styling, then extract repeated patterns into components. This gives you the speed of utilities with the maintainability of components.
