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.

Gift wrapping

Available

Free shipping

Coming soon

<div class="row g-2">
  <div class="col-sm-6">
    <div class="border rounded-3 p-3">
      <div class="fw-semibold">
        Gift wrapping
      </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">
        Free shipping
      </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-1521335629791-ce4aec67dd15?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-1573612664822-d7d347da7b80?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-1443884590026-2e4d21aee71c?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).

Live order tracking
Free shipping
Secure checkout

<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> Live order tracking</li>
  <li class="opacity-75 text-decoration-line-through"><i class="bi bi-check-square" aria-hidden="true"></i> Free shipping</li>
  <li><i class="bi bi-square" aria-hidden="true"></i> Secure checkout</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).

Good things, made to be used

Thousands of shoppers already trust us, and we work hard to keep it that way.

<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>
    2016
  </div>
  <h3 class="position-relative h5 fw-semibold mb-1">Good things, made to be used</h3>
  <p class="position-relative small mb-0">Thousands of shoppers already trust us, and we work hard to keep it that way.</p>
</div>

8Muted icons

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

329 Cedar Lane, Copenhagen
+1 (555) 930-6673
ava.silva@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>329 Cedar Lane, Copenhagen</li>
  <li><span class="opacity-50 me-2"><i class="bi bi-telephone" aria-hidden="true"></i></span>+1 (555) 930-6673</li>
  <li><span class="opacity-50 me-2"><i class="bi bi-envelope" aria-hidden="true"></i></span>ava.silva@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-1567958451986-2de427a4a0be?auto=format&fit=crop&w=1200&h=800&q=70" alt="Quality goods delivered to your door" 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).

Linen shirt

$54.07

Sold out

Canvas tote

$20.15

<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="Linen shirt" class="w-100 rounded-2">
      <div class="small fw-medium mt-2 text-truncate">
        Linen shirt
      </div>
      <div class="small">
        $54.07
      </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="Canvas tote" 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">
        Canvas tote
      </div>
      <div class="small opacity-75">
        $20.15
      </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.

Everyday essentials, beautifully made
Thoughtful goods for a simpler home
Pieces you will reach for every day
Shop the collection everyone talks about

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">Everyday essentials, beautifully made</li>
      <li class="opacity-75">Thoughtful goods for a simpler home</li>
      <li class="opacity-50">Pieces you will reach for every day</li>
      <li class="opacity-25">Shop the collection everyone talks about</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.

Gifts they will actually keep

Pay securely with card, wallet or in three interest-free instalments.

<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">Gifts they will actually keep</h3>
  <p class="small mb-0 position-relative">Pay securely with card, wallet or in three interest-free instalments.</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.

Not sure about the size? Our fit guide and live chat help you choose. Gift wrapping and a handwritten note are free on every order.

* Order before 2 pm and most items leave our warehouse the same day.

<div>
  <p class="mb-1">Not sure about the size? Our fit guide and live chat help you choose. Gift wrapping and a handwritten note are free on every order.</p>
  <p class="small opacity-75 mb-0">* Order before 2 pm and most items leave our warehouse the same day.</p>
</div>

19Overlay controls

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

<div class="position-relative rounded-4 overflow-hidden" style="max-width:26rem">
  <img src="https://images.unsplash.com/photo-1573612664822-d7d347da7b80?auto=format&fit=crop&w=1600&h=700&q=70" alt="Five pieces for a capsule wardrobe" 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.

Mason Harlow
Arjun Quinn (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>Mason Harlow</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>Arjun Quinn <small>(inactive)</small></span></li>
</ul>