Bootstrap 5 Learning Kit

XSXSSMSMMDMDLGLGXLXLXXLXXL
Extra small: <576pxSmall: ≥576pxMedium: ≥768pxLarge: ≥992pxExtra large: ≥1200pxExtra extra large: ≥1400px
Page Navigation:
TextOther form controlsLabelSizingChecksMultiple inputsMultiple textButtonDropdownDropdown split button

Input group

Text

Before

After

Before and after

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

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

<h4 class="h5 text-muted mt-3">Before and after</h4>
<h4 class="h5 text-muted mt-3">Before</h4> <h4 class="h5 text-muted mt-3">After</h4> <h4 class="h5 text-muted mt-3">Before and after</h4>

Other form controls

Textarea

Select

File

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

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

<h4 class="h5 text-muted mt-3">File</h4>
<h4 class="h5 text-muted mt-3">Textarea</h4> <h4 class="h5 text-muted mt-3">Select</h4> <h4 class="h5 text-muted mt-3">File</h4>

Label

Sizing

Small

Default

Large

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

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

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

Checks

Check

Radio

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

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

Multiple inputs

Multiple text

Before

After

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

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

Button

Before

After

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

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

Dropdown

Dropdown split button