Bootstrap 5 Learning Kit

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

Offcanvas

Trigger

Button trigger

Link trigger

<h4 class="h5 text-muted mt-3">Button trigger</h4>

<h4 class="h5 text-muted mt-3">Link trigger</h4>
<h4 class="h5 text-muted mt-3">Button trigger</h4> <h4 class="h5 text-muted mt-3">Link trigger</h4>

Dark

Responsive

Small

Medium

Large

Extra large

Extra extra large

<h4 class="h5 text-muted mt-3">Small</h4>

<h4 class="h5 text-muted mt-3">Medium</h4>

<h4 class="h5 text-muted mt-3">Large</h4>

<h4 class="h5 text-muted mt-3">Extra large</h4>

<h4 class="h5 text-muted mt-3">Extra extra large</h4>
<h4 class="h5 text-muted mt-3">Small</h4> <h4 class="h5 text-muted mt-3">Medium</h4> <h4 class="h5 text-muted mt-3">Large</h4> <h4 class="h5 text-muted mt-3">Extra large</h4> <h4 class="h5 text-muted mt-3">Extra extra large</h4>

Placement

Start

End

Top

Bottom

<h4 class="h5 text-muted mt-3">Start</h4>

<h4 class="h5 text-muted mt-3">End</h4>

<h4 class="h5 text-muted mt-3">Top</h4>

<h4 class="h5 text-muted mt-3">Bottom</h4>
<h4 class="h5 text-muted mt-3">Start</h4> <h4 class="h5 text-muted mt-3">End</h4> <h4 class="h5 text-muted mt-3">Top</h4> <h4 class="h5 text-muted mt-3">Bottom</h4>

Options

Enable body scrolling

Disable backdrop

Disable keyboard

<h4 class="h5 text-muted mt-3">Enable body scrolling</h4>

<h4 class="h5 text-muted mt-3">Disable backdrop</h4>

<h4 class="h5 text-muted mt-3">Disable keyboard</h4>
<h4 class="h5 text-muted mt-3">Enable body scrolling</h4> <h4 class="h5 text-muted mt-3">Disable backdrop</h4> <h4 class="h5 text-muted mt-3">Disable keyboard</h4>