Bootstrap 5 Learning Kit

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

Select

Default

<label>Default select</label>
<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>Default select</label> <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>Small select</label>
<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>Large select</label>
<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>Small select</label> <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>Large select</label> <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>Multiple select</label>
<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>Multiple select</label> <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>Select with size</label>
<select 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>Select with size</label> <select 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>