Bootstrap 5 Learning Kit

XSXSSMSMMDMDLGLGXLXLXXLXXL
Extra small: <576pxSmall: ≥576pxMedium: ≥768pxLarge: ≥992pxExtra large: ≥1200pxExtra extra large: ≥1400px
Page Navigation:
LinkButtonTitleCustom HTMLPositionAnimationDelayTrigger typeDismissibleDisabled elements

Popovers

Link

Popover for link 
<a href="#">Popover for link</a>
<a href="#">Popover for link</a>

Button

<button type="button" class="btn btn-secondary">Popover for button</button>
<button type="button" class="btn btn-secondary">Popover for button</button>

Title

<button type="button" class="btn btn-secondary">Popover with title</button>
<button type="button" class="btn btn-secondary">Popover with title</button>

Custom HTML

<button type="button" class="btn btn-secondary">Popover with custom HTML</button>
<button type="button" class="btn btn-secondary">Popover with custom HTML</button>

Position

<button type="button" class="btn btn-secondary">Popover on top</button>
<button type="button" class="btn btn-secondary">Popover on right</button>
<button type="button" class="btn btn-secondary">Popover on bottom</button>
<button type="button" class="btn btn-secondary">Popover on left</button>
<button type="button" class="btn btn-secondary">Popover on top</button> <button type="button" class="btn btn-secondary">Popover on right</button> <button type="button" class="btn btn-secondary">Popover on bottom</button> <button type="button" class="btn btn-secondary">Popover on left</button>

Animation

<button type="button" class="btn btn-secondary">Popover without animation</button>
<button type="button" class="btn btn-secondary">Popover without animation</button>

Delay

Popover with delay in ms for showing and hiding

<button type="button" class="btn btn-secondary">Popover with delay</button>
<button type="button" class="btn btn-secondary">Popover with delay</button>

Trigger type

Popover triggered by click and hover

<button type="button" class="btn btn-secondary">Trigger by click and hover</button>
<button type="button" class="btn btn-secondary">Trigger by click and hover</button>

Dismissible

Dismiss on next click outside of element

Dismiss on next click 
<a href="#!" class="btn btn-secondary">Dismiss on next click</a>
<a href="#!" class="btn btn-secondary">Dismiss on next click</a>

Disabled elements

<span>
  <button type="button" class="btn btn-secondary">Popover for disabled element</button>
</span>
<span> <button type="button" class="btn btn-secondary">Popover for disabled element</button> </span>