Select
Il classico “menu a tendina”.
Esempio
Per le select, viene aggiunta la classe .form-group-select al consueto .form-group
Al suo interno, la select è composta dal un wrapper esterno .select-wrapper contenente la label e l’elemento <select>.
Come per altri elementi, è possibile utilizzre sul tag select le classi .form-control-lg e .form-control-sm per controllare la dimensione dei campi
<div class="form-group form-group-select">
<div class="select-wrapper">
<label for="defaultSelect">Etichetta</label>
<select id="defaultSelect">
<option selected="" value="">Scegli un'opzione</option>
<option value="Value 1">Opzione 1</option>
<option value="Value 2">Opzione 2</option>
<option value="Value 3">Opzione 3</option>
<option value="Value 4">Opzione 4</option>
<option value="Value 5">Opzione 5</option>
</select>
</div>
</div>Select con gruppi
Per ottenere select con raggruppamenti, utilizzare il tag HTML <optgroup> per raggruppare le <option> al suo interno.
<div class="form-group form-group-select">
<div class="select-wrapper">
<label for="defaultSelectGroup">Etichetta</label>
<select id="defaultSelectGroup">
<option selected="" value="">Scegli un'opzione</option>
<optgroup label="Gruppo 1">
<option value="1">Opzione 1</option>
<option value="2">Opzione 2</option>
</optgroup>
<optgroup label="Gruppo 2">
<option value="3">Opzione 3</option>
<option value="4">Opzione 4</option>
</optgroup>
</select>
</div>
</div>