Opacity

Opacity utilities set the transparency of a whole element, content included: opacity-100, -75, -50, -25 and -0. Use them for disabled looks, faded thumbnails or decoration; when only a background or border should fade, use bg-opacity-* or border-opacity-* instead.

1Opacity scale

opacity-100, -75, -50, -25 and -0 make the whole element, content included, more transparent - keep text out of strongly faded elements.

100

<div class="d-flex flex-wrap gap-3 small text-center">
  <div>
    <div class="bg-primary rounded-3 opacity-100 mb-1" style="width:4rem;height:3rem">
    </div>
    100
  </div>
  <div>
    <div class="bg-primary rounded-3 opacity-75 mb-1" style="width:4rem;height:3rem">
    </div>
    75
  </div>
  <div>
    <div class="bg-primary rounded-3 opacity-50 mb-1" style="width:4rem;height:3rem">
    </div>
    50
  </div>
  <div>
    <div class="bg-primary rounded-3 opacity-25 mb-1" style="width:4rem;height:3rem">
    </div>
    25
  </div>
  <div>
    <div class="bg-primary rounded-3 opacity-0 border mb-1" style="width:4rem;height:3rem">
    </div>
    0
  </div>
</div>

2Opacity versus bg-opacity

opacity-50 fades the text too, bg-opacity-50 fades only the background.

opacity-50

The text fades too - here below 4.5:1.

bg-opacity-50

<div class="row g-2">
  <div class="col-sm-6">
    <figure class="mb-0">
      <div inert>
        <div class="bg-success text-white rounded-3 p-3 opacity-50 fw-semibold">
          opacity-50
        </div>
      </div>
      <figcaption class="small text-body-secondary mt-2 mb-0">The text fades too - here below 4.5:1.</figcaption>
    </figure>
  </div>
  <div class="col-sm-6">
    <div class="bg-success bg-opacity-50 rounded-3 p-3 fw-semibold">
      bg-opacity-50
    </div>
  </div>
</div>

3Disabled looking card

opacity-50 with pe-none shows an option that is not available yet.

Live workshops

Available

Live workshops

Coming soon

<div class="row g-2">
  <div class="col-sm-6">
    <div class="border rounded-3 p-3">
      <div class="fw-semibold">
        Live workshops
      </div>
      <div class="small text-body-secondary">
        Available
      </div>
    </div>
  </div>
  <div class="col-sm-6">
    <div class="border rounded-3 p-3 opacity-50 pe-none" role="group" aria-disabled="true">
      <div class="fw-semibold">
        Live workshops
      </div>
      <div class="small text-body-secondary">
        Coming soon
      </div>
    </div>
  </div>
</div>

4Faded image gallery

Non-selected thumbnails at opacity-50, the active one at full opacity.

<div class="d-flex gap-2">
  <img src="https://images.unsplash.com/photo-1565598611425-45b0878bdd0b?auto=format&fit=crop&w=800&h=800&q=70" alt="Thumbnail 1" width="80" height="80" class="rounded-3 object-fit-cover border border-2 border-primary"> <img src="https://images.unsplash.com/photo-1596247290824-e9f12b8c574f?auto=format&fit=crop&w=800&h=800&q=70" alt="Thumbnail 2" width="80" height="80" class="rounded-3 object-fit-cover opacity-50"> <img src="https://images.unsplash.com/photo-1525130413817-d45c1d127c42?auto=format&fit=crop&w=800&h=800&q=70" alt="Thumbnail 3" width="80" height="80" class="rounded-3 object-fit-cover opacity-50"> 
</div>

5Logo wall

Partner logos at opacity-50 look calm and uniform.

<div class="d-flex flex-wrap justify-content-center align-items-center gap-4">
  <img src="../assets/img/logo-1.svg" alt="Partner logo" width="120" class="opacity-50"> <img src="../assets/img/logo-2.svg" alt="Partner logo" width="120" class="opacity-50"> <img src="../assets/img/logo-3.svg" alt="Partner logo" width="120" class="opacity-50"> <img src="../assets/img/logo-4.svg" alt="Partner logo" width="120" class="opacity-50"> 
</div>

6Completed tasks

Done items drop to opacity-75 and get a line through - still readable (opacity-50 text is below 4.5:1).

Online courses
Online courses
Online courses

<ul class="list-unstyled mb-0 d-grid gap-2">
  <li class="opacity-75 text-decoration-line-through"><i class="bi bi-check-square" aria-hidden="true"></i> Online courses</li>
  <li class="opacity-75 text-decoration-line-through"><i class="bi bi-check-square" aria-hidden="true"></i> Online courses</li>
  <li><i class="bi bi-square" aria-hidden="true"></i> Online courses</li>
</ul>

7Watermark text

Huge text at opacity-25 behind a heading as a decorative watermark (inert and aria-hidden: decoration has no contrast requirement).

Your next career starts here

Learn on your schedule, with lessons that fit into a lunch break.

<div class="position-relative overflow-hidden rounded-4 bg-body-tertiary p-4">
  <div class="position-absolute top-50 start-50 translate-middle display-1 fw-bold text-primary opacity-25 text-nowrap pe-none" aria-hidden="true" inert>
    2024
  </div>
  <h3 class="position-relative h5 fw-semibold mb-1">Your next career starts here</h3>
  <p class="position-relative small mb-0">Learn on your schedule, with lessons that fit into a lunch break.</p>
</div>

8Muted icons

Decorative icons at opacity-75 or -50 next to labels.

295 Willow Way, Austin
+1 (555) 304-8311
freya.nguyen@example.com

<ul class="list-unstyled mb-0 d-grid gap-2">
  <li><span class="opacity-50 me-2"><i class="bi bi-geo-alt" aria-hidden="true"></i></span>295 Willow Way, Austin</li>
  <li><span class="opacity-50 me-2"><i class="bi bi-telephone" aria-hidden="true"></i></span>+1 (555) 304-8311</li>
  <li><span class="opacity-50 me-2"><i class="bi bi-envelope" aria-hidden="true"></i></span>freya.nguyen@example.com</li>
</ul>

9Inactive steps

Future steps of a progress indicator at opacity-50, marked aria-disabled until they can be reached.

1 Cart 2 Shipping 3 Payment 4 Review

<div class="d-flex flex-wrap gap-3 small fw-medium">
  <span class="d-flex align-items-center gap-1"><span class="badge rounded-pill text-bg-success">1</span> Cart</span> <span class="d-flex align-items-center gap-1"><span class="badge rounded-pill text-bg-primary">2</span> Shipping</span> <span class="d-flex align-items-center gap-1 opacity-50" role="group" aria-disabled="true"><span class="badge rounded-pill text-bg-secondary">3</span> Payment</span> <span class="d-flex align-items-center gap-1 opacity-50" role="group" aria-disabled="true"><span class="badge rounded-pill text-bg-secondary">4</span> Review</span> 
</div>

10Hidden but taking space

opacity-0 keeps the layout slot, so neighbours do not move.

A

B

C

<div class="d-flex gap-2">
  <div class="bg-info-subtle rounded-3 p-3">
    <code class="small">A</code>
  </div>
  <div class="bg-info-subtle rounded-3 p-3 opacity-0">
    <code class="small">B</code>
  </div>
  <div class="bg-info-subtle rounded-3 p-3">
    <code class="small">C</code>
  </div>
</div>

11Image tint over colour

An image at opacity-75 on a bg-primary parent picks up a brand tint.

<div class="bg-primary rounded-4 overflow-hidden" style="max-width:24rem">
  <img src="https://images.unsplash.com/photo-1758270705290-62b6294dd044?auto=format&fit=crop&w=1200&h=800&q=70" alt="Master a new skill this season" class="w-100 d-block opacity-75"> 
</div>

12Secondary actions

Quiet actions next to the main one: a link-style button, and opacity-50 on an action that is not available (a disabled button).

<div class="d-flex flex-wrap gap-2">
  <button type="button" class="btn btn-primary">Save</button>
  <button type="button" class="btn btn-link link-secondary">Duplicate</button>
  <button type="button" class="btn btn-outline-secondary opacity-50" disabled>Archive</button>
</div>

13Out of stock products

The sold out item has its picture at opacity-50, a label and its text at opacity-75 (still readable).

UX fundamentals

$63.78

Sold out

Data analysis

$68.50

<div class="row g-3">
  <div class="col-6 col-md-4">
    <div class="border rounded-3 p-2">
      <img src="../assets/img/product-1.svg" alt="UX fundamentals" class="w-100 rounded-2">
      <div class="small fw-medium mt-2 text-truncate">
        UX fundamentals
      </div>
      <div class="small">
        $63.78
      </div>
    </div>
  </div>
  <div class="col-6 col-md-4">
    <div class="border rounded-3 p-2 position-relative">
      <img src="../assets/img/product-2.svg" alt="Data analysis" class="w-100 rounded-2 opacity-50"><span class="badge text-bg-dark position-absolute top-0 start-0 m-3">Sold out</span>
      <div class="small fw-medium mt-2 text-truncate opacity-75">
        Data analysis
      </div>
      <div class="small opacity-75">
        $68.50
      </div>
    </div>
  </div>
</div>

14Placeholder skeleton

Rows of bg-body-secondary at opacity-75 sketch content while it loads.

<div class="d-flex gap-3 align-items-center" aria-hidden="true">
  <div class="bg-body-secondary rounded-circle opacity-75" style="width:48px;height:48px">
  </div>
  <div class="flex-grow-1">
    <div class="bg-body-secondary rounded-pill mb-2 w-50 opacity-75" style="height:10px">
    </div>
    <div class="bg-body-secondary rounded-pill w-75 opacity-50" style="height:10px">
    </div>
  </div>
</div>

15Fading list

Older entries step down in opacity to suggest age.

Short courses, real results
Knowledge that moves you forward
Skills employers are looking for
Learn from people who do the job

From opacity-50 down the entries are decoration - below 4.5:1, so link to the full history instead of fading what people must read.

<figure class="mb-0">
  <div inert>
    <ol class="list-unstyled mb-0 d-grid gap-1">
      <li class="opacity-100">Short courses, real results</li>
      <li class="opacity-75">Knowledge that moves you forward</li>
      <li class="opacity-50">Skills employers are looking for</li>
      <li class="opacity-25">Learn from people who do the job</li>
    </ol>
  </div>
  <figcaption class="small text-body-secondary mt-2 mb-0">From opacity-50 down the entries are decoration - below 4.5:1, so link to the full history instead of fading what people must read.</figcaption>
</figure>

16Background pattern dots

Large icons at opacity-25 placed in a corner decorate a banner.

Learn new skills at your own pace

Guided learning paths take you from beginner to job-ready step by step.

<div class="position-relative overflow-hidden text-bg-primary rounded-4 p-4">
  <span class="position-absolute top-0 end-0 display-1 opacity-25 me-3" aria-hidden="true"><i class="bi bi-stars" aria-hidden="true"></i></span> 
  <h3 class="h5 fw-semibold position-relative">Learn new skills at your own pace</h3>
  <p class="small mb-0 position-relative">Guided learning paths take you from beginner to job-ready step by step.</p>
</div>

17Unavailable time slots

Booked slots are disabled buttons at opacity-25 among the free slots.

<div class="d-flex flex-wrap gap-2" role="group" aria-label="Time slots">
  <button type="button" class="btn btn-sm btn-outline-secondary">09:00</button>
  <button type="button" class="btn btn-sm btn-outline-secondary opacity-25" disabled>09:30</button>
  <button type="button" class="btn btn-sm btn-outline-secondary">10:00</button>
  <button type="button" class="btn btn-sm btn-outline-secondary opacity-25" disabled>10:30</button>
  <button type="button" class="btn btn-sm btn-primary" aria-pressed="true">11:00</button>
  <button type="button" class="btn btn-sm btn-outline-secondary">11:30</button>
</div>

18Subdued footnote

A small footnote at opacity-75 below the main content.

Try the first lesson of any course for free before you decide. Our team has done this many times, so you never have to guess.

* We measure success by how many students come back and tell their friends.

<div>
  <p class="mb-1">Try the first lesson of any course for free before you decide. Our team has done this many times, so you never have to guess.</p>
  <p class="small opacity-75 mb-0">* We measure success by how many students come back and tell their friends.</p>
</div>

19Overlay controls

Controls on top of an image sit on a dark pill at reduced background opacity.

The small habits that make a big difference

<div class="position-relative rounded-4 overflow-hidden" style="max-width:26rem">
  <img src="https://images.unsplash.com/photo-1596247290824-e9f12b8c574f?auto=format&fit=crop&w=1600&h=700&q=70" alt="The small habits that make a big difference" class="w-100 d-block"> 
  <div class="position-absolute bottom-0 start-50 translate-middle-x mb-3 bg-dark bg-opacity-50 rounded-pill px-3 py-1 d-flex gap-3 text-white">
    <span><i class="bi bi-skip-backward-fill" aria-hidden="true"></i></span><span><i class="bi bi-play-fill" aria-hidden="true"></i></span><span><i class="bi bi-skip-forward-fill" aria-hidden="true"></i></span> 
  </div>
</div>

20Avatar of inactive member

Members who left the team are shown at opacity-75 - quieter, still readable.

Samir Tanaka
Omar Ibrahim (inactive)

<ul class="list-unstyled mb-0 d-grid gap-2">
  <li class="d-flex align-items-center gap-2"><img src="../assets/img/avatar-4.svg" alt="" width="32" height="32" class="rounded-circle"><span>Samir Tanaka</span></li>
  <li class="d-flex align-items-center gap-2 opacity-75"><img src="../assets/img/avatar-5.svg" alt="" width="32" height="32" class="rounded-circle"><span>Omar Ibrahim <small>(inactive)</small></span></li>
</ul>