Comment créer une liste déroulante multi-choix avec Bootstrap ?

Tous les composants d'un formulaire peuvent être gérés par Bootstrap grâce à la classe form-control.

Le framework CSS Bootstrap propose des styles pour habiller les composants de son site. Tous les composants d'un formulaire peuvent être modifiés par Bootstrap pour adopter le même style que celui des autres éléments du framework grâce à la classe form-control. Il suffit donc d'ajouter cette classe sur un élément d'un formulaire, comme une liste déroulante :

<select class=form-control>
 <option value=un>Un</option>
 <option value=deux>Deux</option>
 <option value=trois>Trois</option>
</select>

Pour faire une liste de choix multiples, il suffit d'ajouter l'attribut multiple dans la liste déroulante :

<select multiple class=form-control>
 <option value=un>Un</option>
 <option value=deux>Deux</option>
 <option value=trois>Trois</option>
</select>

Une autre solution pour réaliser une liste déroulante avec Bootstrap est d'utiliser le menu déroulant (dropdown-menu) en le modifiant avec du JavaScript et JQuery :

//JavaScript
$(.dropdown-menu li a).click(function(){
var selText = $(this).text();
$(this).parents('.btn-group').find('.dropdown-toggle').html(selText+' <span class=caret></span>');
});
<!-- code HTML -->
<a class=btn btn-primary dropdown-toggle data-toggle=dropdown href=#>Sélectionnez une option :<span class=caret></span></a>
<ul class=dropdown-menu>
<li><a href=#>Choix n°1</a></li>
<li><a href=#>Choix n°2</a></li>
<li><a href=#>Choix n°3</a></li>
</ul>

Bootstrap