Bootstrap 5 Tutorial
v5.3.0Bootstrap 5 Tutorial
Opacity Utilities in Bootstrap 5
Opacity Utilities: Control the opacity of elements with utility classes for background and text opacity.
Background Opacity
Control the opacity of background colors with the .bg-opacity-* classes.
Background Opacity Levels
No opacity (100%)
Default background
.bg-opacity-75
75% opacity
.bg-opacity-50
50% opacity
.bg-opacity-25
25% opacity
.bg-opacity-10
10% opacity
.bg-opacity-0
0% opacity (transparent)
All Theme Colors with Opacity
100%
75%
50%
25%
10%
100%
75%
50%
25%
10%
100%
75%
50%
25%
10%
<!-- Background opacity utilities -->
<div class="bg-primary bg-opacity-100 text-white p-3">
100% opacity (default)
</div>
<div class="bg-primary bg-opacity-75 text-white p-3">
75% opacity
</div>
<div class="bg-primary bg-opacity-50 text-white p-3">
50% opacity
</div>
<div class="bg-primary bg-opacity-25 text-white p-3">
25% opacity
</div>
<div class="bg-primary bg-opacity-10 text-dark p-3">
10% opacity
</div>
<div class="bg-primary bg-opacity-0 p-3">
0% opacity (transparent)
</div>Text Opacity
Text Opacity Utilities
Normal text (100%)
.text-opacity-75 (75%)
.text-opacity-50 (50%)
.text-opacity-25 (25%)
Normal text (100%)
.text-opacity-75 (75%)
.text-opacity-50 (50%)
.text-opacity-25 (25%)
Text Opacity with Colors
Primary text (100%)
Primary with 75% opacity
Primary with 50% opacity
Primary with 25% opacity
Success text (100%)
Success with 75% opacity
Success with 50% opacity
Success with 25% opacity
Danger text (100%)
Danger with 75% opacity
Danger with 50% opacity
Danger with 25% opacity
Opacity with .text-black-50 and .text-white-50
.text-black-50
Normal black text
.text-black-50 (black with 50% opacity)
Useful for subtle text on light backgrounds
<!-- Black text with 50% opacity -->
<p class="text-black-50">
This text has 50% opacity
</p>
<!-- Compared to regular opacity -->
<p class="text-dark text-opacity-50">
Same effect different method
</p>.text-white-50
Normal white text
.text-white-50 (white with 50% opacity)
Useful for subtle text on dark backgrounds
<!-- White text with 50% opacity -->
<div class="bg-dark p-3">
<p class="text-white-50">
Subtle text on dark background
</p>
</div>
<!-- Alternative method -->
<div class="bg-dark p-3">
<p class="text-white text-opacity-50">
Same effect
</p>
</div>Practical Applications
Image Overlays
Image Overlay
Using opacity for better readability
<!-- Image with overlay -->
<div class="position-relative">
<img src="image.jpg" class="img-fluid">
<!-- Overlay with opacity -->
<div class="position-absolute top-0 start-0 w-100 h-100
bg-dark bg-opacity-50
d-flex align-items-center justify-content-center">
<div class="text-center text-white">
<h3>Image Overlay</h3>
<p>Using opacity for better readability</p>
</div>
</div>
</div>Disabled States
Buttons with Opacity
Cards with Opacity
75% Opacity Card
Partially transparent card
Alerts with Opacity
This alert has 50% opacity
Opacity with Hover Effects
Interactive Opacity
Hover over me
Opacity changes on hover
Hover effect
Smooth transition
Button becomes fully opaque on hover
/* CSS for hover effects */
/* Simple opacity hover */
.opacity-hover {
opacity: 0.75;
transition: opacity 0.3s ease;
}
.opacity-hover:hover {
opacity: 1;
}
/* Background opacity hover */
.opacity-hover-2 {
background-color: rgba(25, 135, 84, 0.75);
transition: background-color 0.3s ease;
}
.opacity-hover-2:hover {
background-color: rgba(25, 135, 84, 1);
}
/* Button hover with opacity */
.opacity-hover-3 {
opacity: 0.8;
transition: all 0.3s ease;
}
.opacity-hover-3:hover {
opacity: 1;
transform: translateY(-2px);
}Opacity for Loading States
Loading Overlay
Content Area
This is your main content that might need a loading overlay.
Loading...
<!-- Loading overlay -->
<div class="position-relative">
<!-- Main content -->
<div class="p-4 border rounded">
Your content here
</div>
<!-- Loading overlay -->
<div class="position-absolute top-0 start-0 w-100 h-100
bg-white bg-opacity-75
d-flex align-items-center justify-content-center">
<div class="text-center">
<div class="spinner-border text-primary mb-2"></div>
<p class="mb-0">Loading...</p>
</div>
</div>
</div>Disabled Forms
<!-- Form with opacity -->
<form>
<!-- Disabled field group -->
<div class="mb-3 opacity-50">
<label class="form-label">Disabled Field</label>
<input type="text" class="form-control" disabled>
<div class="form-text">This field group has 50% opacity</div>
</div>
<!-- Read-only field group -->
<div class="mb-3 opacity-75">
<label class="form-label">Read-only Field</label>
<input type="text" class="form-control" readonly>
<div class="form-text">This field group has 75% opacity</div>
</div>
</form>Opacity with CSS Variables
Custom Opacity with CSS Variables
Create custom opacity levels using CSS variables:
10%
Custom opacity
30%
Custom opacity
60%
Custom opacity
90%
Custom opacity
/* Custom opacity with CSS variables */
/* Define custom opacity levels */
:root {
--opacity-10: 0.1;
--opacity-30: 0.3;
--opacity-60: 0.6;
--opacity-90: 0.9;
}
/* Create custom opacity classes */
.custom-opacity-10 {
opacity: var(--opacity-10);
}
.custom-opacity-30 {
opacity: var(--opacity-30);
}
.custom-opacity-60 {
opacity: var(--opacity-60);
}
.custom-opacity-90 {
opacity: var(--opacity-90);
}
/* Background opacity with CSS variables */
.custom-bg-opacity-10 {
--bg-opacity: 0.1;
}
.custom-bg-opacity-30 {
--bg-opacity: 0.3;
}
.custom-bg-opacity-60 {
--bg-opacity: 0.6;
}
.bg-primary.custom-bg-opacity-10 {
background-color: rgba(var(--bs-primary-rgb), var(--bg-opacity)) !important;
}Accessibility Considerations
Opacity and Accessibility
- Contrast ratio: Reduced opacity can decrease contrast below accessibility standards
- Readability: Ensure text remains readable even with background opacity
- Interactive elements: Don't use low opacity for critical interactive elements
- Color blindness: Opacity combined with color can create accessibility issues
- Testing: Always test opacity effects with accessibility tools
- Alternative indicators: Don't rely solely on opacity to indicate state changes
Performance Considerations
Performance Tips
- GPU acceleration: Opacity changes are GPU accelerated and perform well
- Transitions: Smooth opacity transitions are performant
- Layering: Multiple semi-transparent layers can impact performance
- Background vs opacity:
background-color: rgba()vsopacityhave different performance characteristics - Browser differences: Test opacity effects across different browsers
- Mobile performance: Opacity effects may perform differently on mobile devices
Opacity vs RGBA
Using .opacity-50
Affects entire element including children
Using .bg-opacity-50
Only affects background, text remains opaque
<!-- Difference between opacity and background-opacity -->
<!-- opacity-50 affects entire element -->
<div class="bg-primary opacity-50">
<p class="text-white">Both background and text have 50% opacity</p>
</div>
<!-- bg-opacity-50 affects only background -->
<div class="bg-primary bg-opacity-50">
<p class="text-white">Background has 50% opacity, text is 100%</p>
</div>