Groupes d'entrées Bootstrap 5

Groupe d'entrée

.input-group La classe est un conteneur qui ajoute des icônes, du texte ou des boutons avant ou après le champ d'entrée pour renforcer le texte d'aide.

Pour définir le style du texte d'aide spécifique, utilisez .input-group-text Type :

Exemple

<form>
  <div class="input-group">
    <span class="input-group-text">@</span>
    <input type="text" class="form-control" placeholder="Nom d'utilisateur">
  </div>
  <div class="input-group">
    <input type="text" class="form-control" placeholder="Votre email">
    <span class="input-group-text">@example.com</span>
  </div>
</form>

Essayer par vous-même

taille du groupe d'entrée

Veuillez définir .input-group-sm La classe est utilisée pour les groupes d'entrée petits, en ajoutant : .input-group-lg Utilisé pour les groupes d'entrée grands :

Exemple

<div class="input-group mb-3 input-group-sm">
   <span class="input-group-text">petit</span>
  <input type="text" class="form-control">
</div>
<div class="input-group mb-3">
  <span class="input-group-text">par défaut</span>
  <input type="text" class="form-control">>
</div>
<div class="input-group mb-3 input-group-lg">
  <span class="input-group-text">grand</span>
  <input type="text" class="form-control">
</div>

Essayer par vous-même

Plusieurs entrées et assistants

Ajoutez plusieurs contrôles d'entrée ou plugins :

Exemple

<!-- Plusieurs contrôles d'entrée -->
<div class="input-group mb-3">
  <span class="input-group-text">nom</span>
  <input type="text" class="form-control" placeholder="prénom">
  <input type="text" class="form-control" placeholder="nom">
</div>
<!-- Plusieurs plugins / textes d'aide -->
<div class="input-group mb-3">
  <span class="input-group-text">un</span>
  <span class="input-group-text">deux</span>
  <span class="input-group-text">trois</span>
  <input type="text" class="form-control">
</div>

Essayer par vous-même

groupe d'entrée avec des cases à cocher et des boutons radio

Vous pouvez également utiliser des cases à cocher ou des boutons radio à la place du texte :

Exemple

<div class="input-group mb-3">
  <div class="input-group-text">
    <input type="checkbox">
  </div>
  <input type="text" class="form-control" placeholder="Quelque texte">
</div>
<div class="input-group mb-3">
  <div class="input-group-text">
    <input type="radio">
  </div>
  <input type="text" class="form-control" placeholder="Quelque texte">
</div>

Essayer par vous-même

bouton de groupe d'entrée

Exemple

<div class="input-group mb-3">
  <button class="btn btn-outline-primary" type="button">bouton de base</button>
  <input type="text" class="form-control" placeholder="Quelque texte">
</div>
<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Recherche">
  <button class="btn btn-success" type="submit">Aller</button>
</div>
<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Quelque texte">
  <button class="btn btn-primary" type="button">OK</button>
  <button class="btn btn-danger" type="button">Annuler</button>
</div>

Essayer par vous-même

Groupe d'entrée avec bouton déroulant

Ajoutez un bouton déroulant dans le groupe d'entrée. Notez que vous n'avez pas besoin de la boîte de conteneur .dropdown comme d'habitude.

Exemple

<div class="input-group mt-3 mb-3">
  <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
    Bouton déroulant
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Lien 1</a></li>
    <li><a class="dropdown-item" href="#">Lien 2</a></li>
    <li><a class="dropdown-item" href="#">Lien 3</a></li>
  </ul>
  <input type="text" class="form-control" placeholder="Nom d'utilisateur">
</div>

Essayer par vous-même