BootstrapHow-ToBeginner · 3 min read

How to Use Opacity in Bootstrap: Simple Guide

In Bootstrap, you can control opacity by using custom CSS with the opacity property or by applying Bootstrap's bg-opacity-* utility classes for background transparency. These classes range from bg-opacity-10 (10% opacity) to bg-opacity-100 (fully opaque) and work with background colors.

📐

Syntax

Bootstrap provides utility classes to control background opacity and you can also use CSS opacity property for full element transparency.

Background opacity classes: bg-opacity-{value} where {value} is a number like 10, 25, 50, 75, or 100 representing percentage opacity.
CSS opacity property: Use opacity: 0.5; in your CSS to set the transparency of the entire element.

html+css

<!-- Background opacity class -->
<div class="bg-primary bg-opacity-50">Semi-transparent background</div>

/* CSS opacity property */
.transparent-element {
  opacity: 0.5;
}

💻

Example

This example shows how to use Bootstrap's background opacity classes and CSS opacity property to make elements transparent.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Bootstrap Opacity Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
  <style>
    .custom-opacity {
      opacity: 0.6;
      background-color: #198754; /* Bootstrap success green */
      color: white;
      padding: 1rem;
      margin-top: 1rem;
      border-radius: 0.25rem;
    }
  </style>
</head>
<body class="p-3">
  <div class="bg-primary bg-opacity-50 text-white p-3 rounded">
    This box uses <code>bg-opacity-50</code> for 50% background opacity.
  </div>

  <div class="custom-opacity">
    This box uses CSS <code>opacity: 0.6;</code> making the whole element semi-transparent.
  </div>
</body>
</html>

Output

Two boxes: The first has a blue background with 50% opacity but fully opaque text. The second box is green with 60% opacity making both background and text semi-transparent.

⚠️

Common Pitfalls

Many developers confuse bg-opacity-* classes with the CSS opacity property. The bg-opacity-* only changes the background transparency, keeping text fully visible. Using CSS opacity affects the entire element including text and children, which can make text hard to read.

Also, bg-opacity-* classes only work with Bootstrap background color utility classes like bg-primary, bg-success, etc. They do not work on custom colors without additional CSS.

html

<!-- Wrong: Using bg-opacity without bg-color -->
<div class="bg-opacity-50 p-3">
  No background color, so opacity class has no visible effect.
</div>

<!-- Right: Use with bg-color -->
<div class="bg-danger bg-opacity-50 p-3 text-white">
  Red background with 50% opacity.
</div>

Output

First box shows no background color or opacity effect. Second box shows a red background with 50% opacity and white text fully visible.

📊

Quick Reference

Class	Effect
bg-opacity-10	10% background opacity
bg-opacity-25	25% background opacity
bg-opacity-50	50% background opacity
bg-opacity-75	75% background opacity
bg-opacity-100	100% background opacity (fully opaque)
opacity (CSS)	Sets opacity for entire element including text

✅

Key Takeaways

Use Bootstrap's bg-opacity-* classes to change only background transparency without affecting text.

CSS opacity property affects the whole element including text and children, making them semi-transparent.

bg-opacity-* classes require a Bootstrap background color class to work properly.

For custom colors, use CSS opacity or custom RGBA colors with alpha channel.

Test opacity effects on text readability and accessibility.