Bootstrap - Opacity

Bootstrap's Opacity Classes

Bootstrap has opacity classes that let you control the transparency of elements on your web page. These classes are used on HTML elements, letting you adjust the opacity without custom CSS. With Bootstrap's opacity classes, you can create effects like semi-transparent overlays, faded images, or subtle text transitions.

The opacity classes in Bootstrap use this naming format: .opacity-*, where * is the opacity value. These classes go from .opacity-100 (fully opaque) to .opacity-25 (very transparent), with some values in between. Here are the opacity values Bootstrap has:

Class Opacity Description
.opacity-100 1 The element is fully opaque and completely visible.
.opacity-75 0.75 The element is slightly transparent. Some of the background shows through.
.opacity-50 0.5 The element is half transparent. It blends equally with the background.
.opacity-25 0.25 The element is very transparent, with only a faint presence of its content.

Example

<div class="opacity-100">
  This div is fully opaque.
</div>
<div class="opacity-75">
  This div is slightly transparent.
</div>
<div class="opacity-50">
  This div is half transparent.
</div>
<div class="opacity-25">
  This div is very transparent.
</div>

Keep in mind that opacity affects the element and its child elements. When an element's opacity is reduced, all of its child elements inherit that opacity, unless they have their own opacity values set.

Tip

To create a semi-transparent overlay, you can apply an opacity class to a <div> that covers other content. Adjust the opacity to control how much of the underlying content shows through.

Applying Opacity Classes

Opacity classes in Bootstrap are applied to HTML elements using the class attribute, like any other Bootstrap class. You can add the opacity classes to elements such as images, backgrounds, and text to control their transparency.

Example: Opacity on Images

<img src="image.jpg" alt="Transparent image" class="opacity-75">

Tip: Combining Opacity with Other Classes

Combining opacity with classes like .rounded, .img-thumbnail, or .shadow can create visual effects. For instance, you can make a rounded, transparent image with a shadow using classes like <img src="image.jpg" alt="Rounded, transparent image with shadow" class="rounded opacity-50 shadow">.

Example: Opacity on Backgrounds

<div class="bg-primary opacity-50 p-3">
  This div has a transparent blue background.
</div>
<div class="bg-dark opacity-75 text-white p-5">
  <h1>Welcome to my website!</h1>
  <p>This is a transparent hero section with white text.</p>
</div>

Example: Opacity on Text

<p class="opacity-75">This text is transparent.</p>

To maintain readability, it's best to use higher opacity values (e.g., .opacity-75 or .opacity-100) on text elements. If you need to make text more transparent, consider using lighter or darker text colors instead of lowering the opacity too much.

Combining Opacity with Other Classes

Bootstrap's opacity classes can be used with other Bootstrap classes to create advanced and appealing designs. By combining opacity with classes for background colors, text colors, or box shadows, you can achieve unique effects on your web page.

One way to use opacity is with background color classes (.bg-*). You can apply an opacity class to an element that also has a background color class to create a semi-transparent colored background. This is useful for creating overlays or sections with a subtle color tint.

Example: Semi-transparent background

<div class="bg-primary opacity-75 p-3">
  This div has a semi-transparent blue background.
</div>

You can also combine opacity classes with text color classes (.text-*) to create text with different levels of transparency. This can be used for style or to de-emphasize certain parts of the text.

Example: Transparent text

<p class="text-muted opacity-50">This muted text is also 50% transparent.</p>

Opacity classes also work with Bootstrap's box shadow classes (.shadow-*). By applying an opacity class to an element with a box shadow, you can create softer shadows that blend better with the background.

Example: Semi-transparent box shadow

<div class="shadow-lg opacity-75 p-3">
  This div has a large, semi-transparent box shadow.
</div>

Try different combinations of opacity and other Bootstrap classes to create unique and interesting designs.

Customizing Opacity

Bootstrap has opacity classes, but you can also change the opacity values to match your design needs. To do this, you need to modify Bootstrap's Sass variables in the _variables.scss file.

$opacity-values: (
  0: 0,
  25: .25,
  50: .5,
  75: .75,
  100: 1
);

To create custom opacity values, you can change the numbers in this Sass map. The keys (0, 25, 50, 75, 100) represent the class names (.opacity-0, .opacity-25, etc.), and the values (0, .25, .5, .75, 1) represent the opacity values.

$opacity-values: (
  0: 0,
  25: .25,
  50: .5,
  60: .6,
  75: .75,
  100: 1
);

After making changes to the _variables.scss file, you need to recompile Bootstrap's Sass files to generate the updated CSS with your custom opacity values.

Tip: Using Sass

If you're not familiar with Sass, it's a CSS preprocessor that lets you use variables, nested rules, mixins, and more. Bootstrap is built with Sass, so learning Sass can help you customize Bootstrap more efficiently.

By customizing Bootstrap's opacity values, you have more control over the transparency levels in your design. This can be useful when the default opacity values don't quite fit your needs, or when you want to maintain a consistent opacity across your website.