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.

100

75

50

25

0

<div class="d-flex flex-wrap gap-2">
  <div class="bg-primary text-white rounded-3 p-3 opacity-100">
    <code class="small">100</code>
  </div>
  <div class="bg-primary text-white rounded-3 p-3 opacity-75">
    <code class="small">75</code>
  </div>
  <div class="bg-primary text-white rounded-3 p-3 opacity-50">
    <code class="small">50</code>
  </div>
  <div class="bg-primary text-white rounded-3 p-3 opacity-25">
    <code class="small">25</code>
  </div>
  <div class="bg-primary text-white rounded-3 p-3 opacity-0 border">
    <code class="small">0</code>
  </div>
</div>

2Opacity versus bg-opacity

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

opacity-50

bg-opacity-50

<div class="row g-2">
  <div class="col-sm-6">
    <div class="bg-success text-white rounded-3 p-3 opacity-50 fw-semibold">
      opacity-50
    </div>
  </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 order tracking

Available

30-day returns

Coming soon

<div class="row g-2">
  <div class="col-sm-6">
    <div class="border rounded-3 p-3">
      <div class="fw-semibold">
        Live order tracking
      </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" aria-disabled="true">
      <div class="fw-semibold">
        30-day returns
      </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="../assets/img/square-1.svg" alt="Thumbnail 1" width="80" height="80" class="rounded-3 object-fit-cover border border-2 border-primary"> <img src="../assets/img/square-2.svg" alt="Thumbnail 2" width="80" height="80" class="rounded-3 object-fit-cover opacity-50"> <img src="../assets/img/square-3.svg" 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-50 and get a line through.

30-day returns
Live order tracking
Free shipping

<ul class="list-unstyled mb-0 d-grid gap-2">
  <li class="opacity-50 text-decoration-line-through"><i class="bi bi-check-square-fill" aria-hidden="true"></i> 30-day returns</li>
  <li class="opacity-50 text-decoration-line-through"><i class="bi bi-check-square-fill" aria-hidden="true"></i> Live order tracking</li>
  <li><i class="bi bi-square-fill" aria-hidden="true"></i> Free shipping</li>
</ul>

7Watermark text

Huge text at opacity-25 behind a heading as a decorative watermark.

New season, new favourites

A focused launch helps projects moving forward without the usual hassle.

<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">
    2025
  </div>
  <h3 class="position-relative h5 fw-semibold mb-1">New season, new favourites</h3>
  <p class="position-relative small mb-0">A focused launch helps projects moving forward without the usual hassle.</p>
</div>

8Muted icons

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

429 Harbour Road, Vancouver
+1 (555) 128-4994
nora.rossi@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-fill" aria-hidden="true"></i></span>429 Harbour Road, Vancouver</li>
  <li><span class="opacity-50 me-2"><i class="bi bi-telephone-fill" aria-hidden="true"></i></span>+1 (555) 128-4994</li>
  <li><span class="opacity-50 me-2"><i class="bi bi-envelope-fill" aria-hidden="true"></i></span>nora.rossi@example.com</li>
</ul>

9Inactive steps

Future steps of a progress indicator at opacity-50.

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"><span class="badge rounded-pill text-bg-secondary">3</span> Payment</span> <span class="d-flex align-items-center gap-1 opacity-50"><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="../assets/img/photo-10.svg" alt="Quality goods delivered to your door" class="w-100 d-block opacity-75"> 
</div>

12Secondary actions

A low opacity button group for actions that should not compete with the main one.

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

13Out of stock products

The sold out item is shown at opacity-50 with a label.

Leather wallet

$28.91

Sold out

Ceramic mug

$40.63

<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="Desk lamp" class="w-100 rounded-2">
      <div class="small fw-medium mt-2 text-truncate">
        Leather wallet
      </div>
      <div class="small">
        $28.91
      </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="Linen shirt" 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-50">
        Ceramic mug
      </div>
      <div class="small opacity-50">
        $40.63
      </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.

Shop the collection everyone talks about
Quality goods delivered to your door
Designed to last, priced to love
Designed to last, priced to love

<ol class="list-unstyled mb-0 d-grid gap-1">
  <li class="opacity-100">Shop the collection everyone talks about</li>
  <li class="opacity-75">Quality goods delivered to your door</li>
  <li class="opacity-50">Designed to last, priced to love</li>
  <li class="opacity-25">Designed to last, priced to love</li>
</ol>

16Background pattern dots

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

Everyday essentials, beautifully made

The new carbon-neutral delivery makes time back in your day with friendly support.

<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">Everyday essentials, beautifully made</h3>
  <p class="small mb-0 position-relative">The new carbon-neutral delivery makes time back in your day with friendly support.</p>
</div>

17Unavailable time slots

Booked slots at opacity-25 among free slots.

09:0009:30 10:0010:30 11:0011:30

<div class="d-flex flex-wrap gap-2">
  <span class="border rounded-2 px-3 py-1 small">09:00</span><span class="border rounded-2 px-3 py-1 small opacity-25">09:30</span> <span class="border rounded-2 px-3 py-1 small">10:00</span><span class="border rounded-2 px-3 py-1 small opacity-25">10:30</span> <span class="border border-primary bg-primary-subtle rounded-2 px-3 py-1 small">11:00</span><span class="border rounded-2 px-3 py-1 small">11:30</span> 
</div>

18Subdued footnote

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

A simple idea shows every detail in view in just a few clicks. The new hand-checked quality gives your work organised all year round.

* This elegant team lets every detail in view at a fair price.

<div>
  <p class="mb-1">A simple idea shows every detail in view in just a few clicks. The new hand-checked quality gives your work organised all year round.</p>
  <p class="small opacity-75 mb-0">* This elegant team lets every detail in view at a fair price.</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="../assets/img/wide-4.svg" alt="The calm community checklist" 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-50.

Mia Varga
Ivy Silva (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>Mia Varga</span></li>
  <li class="d-flex align-items-center gap-2 opacity-50"><img src="../assets/img/avatar-5.svg" alt="" width="32" height="32" class="rounded-circle"><span>Ivy Silva <small>(inactive)</small></span></li>
</ul>