Components

New Components

Most components have been updated and polished. Here are some noticeable highlights:

• Accordion works exactly like a Collapse but its elements are cascaded on top of each other.
• Alerts can now have icons.
• Buttons can be toggles.
• Offcanvas got a face lift.
• Tooltips can now have simple HTML in them.

Media

Media component is now depricated, but can be recreated easily with flexbox.

<div class="d-flex">
  <div class="flex-shrink-0">
    <img src="..." alt="...">
  </div>
  <div class="flex-grow-1 ms-3">
    This is some content from a media component. You can replace this with any content and adjust it as needed.
  </div>
</div>

Helpers

Colored Links

<a href=”#” class=“link-[primary, secondary, success, danger, warning, info, light, dark]”>
Primary link
</a>

Ratio

Classes placed on parent element to affect child element:
ratio ratio-[1x1, 4x3, 16x9, 21x9]

Example

<div class="ratio ratio-16x9">
  <iframe src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" title="YouTube video" allowfullscreen></iframe>
</div>

Custom ratio example

<div class="ratio" style="--bs-aspect-ratio: 50%;">
  <div>2x1</div>
</div>

Position

.fixed-[top,bottom]
.sticky-[sm,md,lg,xl]-top

Visually Hidden

.visually-hidden
Exposes element only to assistive technologies (e.g. screen readers).

.visually-hidden-focusable
Display element only it when it’s focused (e.g. by a keyboard-only user).

Stretched Links

Make a link’s containing block clickable using .stretched-link class.
Cards have position: relative by default in Bootstrap, but most Bootstrap 5 custom components do not have that by default.

Example

div`.position-relative`
  div
    h5
    p
    a`.stretched-link`