Bootstrap 5 Learning Kit

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

Select

Default

<label for="inputSelect" class="form-label">Default select</label>
<select class="form-select" aria-label="Default select" id="inputSelect">
  <option selected="">Select option</option>
  <option value="1">Option one</option>
  <option value="2">Option two</option>
  <option value="3">Option three</option>
  <option value="4">Option four</option>
  <option value="5">Option five</option>
</select>
<label for="inputSelect" class="form-label">Default select</label> <select class="form-select" aria-label="Default select" id="inputSelect"> <option selected="">Select option</option> <option value="1">Option one</option> <option value="2">Option two</option> <option value="3">Option three</option> <option value="4">Option four</option> <option value="5">Option five</option> </select>

Sizing

Small

Large

<h4 class="h5 text-muted mt-3">Small</h4>
<label for="inputSelectSmall" class="form-label">Small select</label>
<select class="form-select form-select-sm" aria-label="Small select" id="inputSelectSmall">
  <option selected="">Select option</option>
  <option value="1">Option one</option>
  <option value="2">Option two</option>
  <option value="3">Option three</option>
  <option value="4">Option four</option>
  <option value="5">Option five</option>
</select>
<h4 class="h5 text-muted mt-3">Large</h4>
<label for="inputSelectLarge" class="form-label">Large select</label>
<select class="form-select form-select-lg" aria-label="Large select" id="inputSelectLarge">
  <option selected="">Select option</option>
  <option value="1">Option one</option>
  <option value="2">Option two</option>
  <option value="3">Option three</option>
  <option value="4">Option four</option>
  <option value="5">Option five</option>
</select>
<h4 class="h5 text-muted mt-3">Small</h4> <label for="inputSelectSmall" class="form-label">Small select</label> <select class="form-select form-select-sm" aria-label="Small select" id="inputSelectSmall"> <option selected="">Select option</option> <option value="1">Option one</option> <option value="2">Option two</option> <option value="3">Option three</option> <option value="4">Option four</option> <option value="5">Option five</option> </select> <h4 class="h5 text-muted mt-3">Large</h4> <label for="inputSelectLarge" class="form-label">Large select</label> <select class="form-select form-select-lg" aria-label="Large select" id="inputSelectLarge"> <option selected="">Select option</option> <option value="1">Option one</option> <option value="2">Option two</option> <option value="3">Option three</option> <option value="4">Option four</option> <option value="5">Option five</option> </select>

Multiple

<label for="inputSelectMultiple" class="form-label">Multiple select</label>
<select class="form-select" multiple="" aria-label="Multiple select" id="inputSelectMultiple">
  <option value="1">Option one</option>
  <option value="2">Option two</option>
  <option value="3">Option three</option>
  <option value="4">Option four</option>
  <option value="5">Option five</option>
</select>
<label for="inputSelectMultiple" class="form-label">Multiple select</label> <select class="form-select" multiple="" aria-label="Multiple select" id="inputSelectMultiple"> <option value="1">Option one</option> <option value="2">Option two</option> <option value="3">Option three</option> <option value="4">Option four</option> <option value="5">Option five</option> </select>

Visible options

<label for="inputSelectSize" class="form-label">Select with size</label>
<select class="form-select" size="3" aria-label="Select with size" id="inputSelectSize">
  <option value="1">Option one</option>
  <option value="2">Option two</option>
  <option value="3">Option three</option>
  <option value="4">Option four</option>
  <option value="5">Option five</option>
</select>
<label for="inputSelectSize" class="form-label">Select with size</label> <select class="form-select" size="3" aria-label="Select with size" id="inputSelectSize"> <option value="1">Option one</option> <option value="2">Option two</option> <option value="3">Option three</option> <option value="4">Option four</option> <option value="5">Option five</option> </select>