Bootstrap 5 Learning Kit

XSXSSMSMMDMDLGLGXLXLXXLXXL
Extra small: <576pxSmall: ≥576pxMedium: ≥768pxLarge: ≥992pxExtra large: ≥1200pxExtra extra large: ≥1400px
Page Navigation:
DefaultLink styleButton classOutline styleSizingBlockStatesButton plugin

Buttons

Default

<button>Primary</button>
<button>Secondary</button>
<button>Success</button>
<button>Danger</button>
<button>Warning</button>
<button>Info</button>
<button>Light</button>
<button>Dark</button>
<button>Primary</button> <button>Secondary</button> <button>Success</button> <button>Danger</button> <button>Warning</button> <button>Info</button> <button>Light</button> <button>Dark</button>

Link style

<button>Link</button>
<button>Link</button>

Button class

Default button styles applied to <a> and <input> elements

Link 
<a href="#">Link</a>
<input type="button">
<input type="submit">
<input type="reset">
<a href="#">Link</a> <input type="button"> <input type="submit"> <input type="reset">

Outline style

<button>Primary</button>
<button>Secondary</button>
<button>Success</button>
<button>Danger</button>
<button>Warning</button>
<button>Info</button>
<button>Light</button>
<button>Dark</button>
<button>Primary</button> <button>Secondary</button> <button>Success</button> <button>Danger</button> <button>Warning</button> <button>Info</button> <button>Light</button> <button>Dark</button>

Sizing

<button>Small</button>
<button>Default</button>
<button>Large</button>
<button>Small</button> <button>Default</button> <button>Large</button>

Block

Full width using sizing utility

Full width using display utility

Column width

Multiple block buttons

Responsive

<h4 class="h5 text-muted mt-3">Full width using sizing utility</h4>
<button>Block button</button>
<h4 class="h5 text-muted mt-3">Full width using display utility</h4>
<div>
  <button>Block button</button>
</div>
<h4 class="h5 text-muted mt-3">Column width</h4>
<div>
  <button>Block button</button>
</div>
<h4 class="h5 text-muted mt-3">Multiple block buttons</h4>
<div>
  <button>Block button</button>
  <button>Block button</button>
</div>
<h4 class="h5 text-muted mt-3">Responsive</h4>
<div>
  <button>Block button</button>
  <button>Block button</button>
</div>
<h4 class="h5 text-muted mt-3">Full width using sizing utility</h4> <button>Block button</button> <h4 class="h5 text-muted mt-3">Full width using display utility</h4> <div> <button>Block button</button> </div> <h4 class="h5 text-muted mt-3">Column width</h4> <div> <button>Block button</button> </div> <h4 class="h5 text-muted mt-3">Multiple block buttons</h4> <div> <button>Block button</button> <button>Block button</button> </div> <h4 class="h5 text-muted mt-3">Responsive</h4> <div> <button>Block button</button> <button>Block button</button> </div>

States

Active

Disabled

Disabled link 
<h4 class="h5 text-muted mt-3">Active</h4>
<button>Not active</button>
<button>Active</button>
<h4 class="h5 text-muted mt-3">Disabled</h4>
<button>Disabled button</button>
<a>Disabled link</a>
<h4 class="h5 text-muted mt-3">Active</h4> <button>Not active</button> <button>Active</button> <h4 class="h5 text-muted mt-3">Disabled</h4> <button>Disabled button</button> <a>Disabled link</a>

Button plugin

Toggle buttons

Toggle links

Not active Active Disabled 
<h4 class="h5 text-muted mt-3">Toggle buttons</h4>
<button>Not active</button>
<button>Active</button>
<button>Disabled</button>
<h4 class="h5 text-muted mt-3">Toggle links</h4>
<a href="#">Not active</a>
<a href="#">Active</a>
<a href="#">Disabled</a>
<h4 class="h5 text-muted mt-3">Toggle buttons</h4> <button>Not active</button> <button>Active</button> <button>Disabled</button> <h4 class="h5 text-muted mt-3">Toggle links</h4> <a href="#">Not active</a> <a href="#">Active</a> <a href="#">Disabled</a>