The last group of utilities covers the finishing touches: elevation with shadows, transparency, scroll behavior, stacking order and how users can interact with an element. They are small classes, but they replace exactly the kind of one-off CSS rules that pile up in a stylesheet. After this lesson you will know each one and the situations where it is the right tool.
| Class | Effect |
|---|---|
| shadow-none | Removes any shadow |
| shadow-sm | Small, subtle shadow |
| shadow | Regular shadow |
| shadow-lg | Large, soft shadow |
<div class="p-3 mb-3 bg-body rounded shadow-sm">Card-like surface</div>
<div class="p-3 mb-3 bg-body rounded shadow">Raised panel</div>
<div class="p-3 bg-body rounded shadow-lg">Modal-like elevation</div>Shadows are disabled by default on components ($enable-shadows: false), so these utilities are how you add depth deliberately. Use bg-body rather than bg-white so the surface still works in dark mode.
opacity-0, opacity-25, opacity-50, opacity-75 and opacity-100 set the CSS opacity property on the whole element, including its children:
<button class="btn btn-primary opacity-50" disabled>Processing</button>
<p class="opacity-75">Slightly muted paragraph</p>For coloring text or backgrounds with transparency, prefer the color-specific helpers from the colors lesson (text-opacity-*, bg-opacity-*), which affect only the color, not child elements.
Overflow utilities set both axes unless you use the axis-specific versions:
overflow-auto: scrollbars appear only when needed.overflow-hidden: clip content.overflow-visible: default browser behavior.overflow-scroll: always show scrollbars.overflow-x-* and overflow-y-*: one axis only.<div class="overflow-y-auto border rounded" style="max-height: 200px">
<ul class="list-unstyled mb-0 p-3">
<li>Long list item 1</li>
<li>Long list item 2</li>
<li>...</li>
</ul>
</div>
<div class="overflow-x-auto">
<table class="table mb-0" style="min-width: 800px">...</table>
</div>The second example is exactly what .table-responsive does internally. Remember that overflow-hidden on an ancestor breaks position: sticky and clips dropdown menus, so avoid it on layout wrappers.
Bootstrap 5.3 added z-n1, z-0, z-1, z-2 and z-3. They are intended for local stacking within your own components, not for competing with Bootstrap's component layers (dropdowns 1000, sticky 1020, fixed 1030, offcanvas backdrop 1040, modal 1055, popover 1070, tooltip 1080, toast 1090):
<div class="position-relative">
<img src="cover.jpg" class="w-100 z-0" alt="">
<div class="position-absolute bottom-0 start-0 p-3 z-1 text-white">Caption over image</div>
</div>If you need something above a modal, override the $zindex-* Sass variables rather than reaching for z-index: 9999.
User select controls text selection:
user-select-all: one click selects the whole element, handy for command snippets.user-select-auto: browser default.user-select-none: the text cannot be selected, useful on drag handles and icon labels.Pointer events turn interaction on or off:
pe-none: the element ignores clicks and hover; add aria-disabled="true" and tabindex="-1" on links so keyboard users get the same experience.pe-auto: restores interaction, for example on a child inside a pe-none overlay.<a href="#" class="pe-none text-secondary" tabindex="-1" aria-disabled="true">Disabled link</a>
<div class="position-absolute top-0 start-0 w-100 h-100 pe-none">
<button class="btn btn-light pe-auto">Only this button is clickable</button>
</div>.stretched-link expands a link's clickable area to cover its nearest ancestor with position: relative. Cards already set position: relative on the .card element, so a stretched link makes the whole card clickable while keeping a single, accessible <a> in the DOM:
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<a href="/details" class="btn btn-primary stretched-link">Details</a>
</div>
</div>Only one stretched link per containing block, or they overlap. If the card contains other interactive elements, give them position: relative and a higher z-index so they remain clickable.
.text-truncate cuts a single line with an ellipsis (needs a width or d-inline-block)..vr renders a vertical rule inside flex rows; <hr> is styled automatically..clearfix clears floats on a container..icon-link aligns an inline SVG with link text and animates it with .icon-link-hover.Which utility gives one-click selection of a code snippet?
shadow-sm, shadow and shadow-lg add elevation; shadow-none removes it.opacity-{0..100} fades the whole element; use color opacity helpers when only the color should change.overflow-*, overflow-x-* and overflow-y-* control scrolling; hidden overflow on ancestors breaks sticky and dropdowns.z-n1 to z-3 handle local stacking; component layers are controlled by $zindex-* variables.user-select-*, pe-none/pe-auto and .stretched-link shape interaction without JavaScript.Next lesson: Buttons and Button Groups - button variants, sizes, states and how to group them into toolbars.