Cases à cocher et boutons radio Bootstrap 5

Menu de sélection

Menu de sélection (sélectionnez une option) :

Menu de sélection multiple (maintenez Ctrl ou Shift (ou glissez avec la souris) pour sélectionner plusieurs éléments) :

Si vous souhaitez permettre aux utilisateurs de choisir plusieurs options, utilisez le menu de sélection.

Pour définir le style du menu de sélection dans Bootstrap 5, veuillez utiliser .form-select Ajouter la classe à l'élément <select> :

Exemple

<select class="form-select">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
</select>

Essayez-le vous-même

Taille du menu de sélection

Veuillez utiliser .form-select-lg ou .form-select-sm Ajouter des classes pour modifier la taille du menu de sélection :

Exemple

<select class="form-select form-select-lg">
<select class="form-select">
<select class="form-select form-select-sm">

Essayez-le vous-même

Désactiver le menu de sélection

Veuillez utiliser désactivé Propriété désactivant le menu de sélection :

Exemple

<select class="form-select" disabled>
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
</select>

Essayez-le vous-même

Liste de données

Bootstrap peut également définir le style des listes de données, qui est une liste d'options prédéfinies pour l'élément <input> :

Veuillez choisir votre navigateur dans la liste :

Exemple

<label for="browser" class="form-label">Veuillez choisir votre navigateur dans la liste :</label>
<input class="form-control" list="browsers" name="browser" id="browser">
<datalist id="browsers">
  <option value="Edge">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

Essayez-le vous-même