Bootstrap 5 : groupes d'entrée

Table des matières

Groupes d'entrée

La classe .input-group est un conteneur permettant d'améliorer une entrée en ajoutant une icône, un texte ou un bouton devant ou derrière le champ de saisie en tant que "texte d'aide".

Pour styliser le texte d'aide spécifié, utilisez la classe .input-group-text :

@example.com

Exemple

<form>
  <div class="input-group">
    <span class="input-group-text">@</span>
    <input type="text" class="form-control" placeholder="Username">
  </div>
  <div class="input-group">
    <input type="text" class="form-control" placeholder="Your Email">
    <span class="input-group-text">@example.com</span>
  </div>
</form>

Essayez-le vous-même →

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h2>Input Group</h2>
  <p>The .input-group class is a container to enhance an input by adding an icon, text or a button in front or behind the input field as a "help text".</p>
  <p>Use the .input-group-text class to style the specified help text.</p>
  
  <form action="/action_page.php">
    <div class="input-group mb-3">
      <span class="input-group-text">@</span>
      <input type="text" class="form-control" placeholder="Username" name="usrname">
    </div>

    <div class="input-group mb-3">
      <input type="text" class="form-control" placeholder="Your Email" name="email">
      <span class="input-group-text">@example.com</span>
    </div>
    
    <button type="submit" class="btn btn-primary">Submit</button>
  </form>
</div>

</body>
</html>

Taille du groupe d'entrée

Utilisez la classe .input-group-sm pour les petits groupes d'entrées et .input-group-lg pour les grands groupes d'entrées :

Small

Default

Large

Exemple

<div class="input-group mb-3 input-group-sm">
   <span class="input-group-text">Small</span>
  <input type="text" class="form-control">
</div>
<div class="input-group mb-3">
  <span class="input-group-text">Default</span>
  <input type="text" class="form-control">
</div>
<div class="input-group mb-3 input-group-lg">
  <span class="input-group-text">Large</span>
  <input type="text" class="form-control">
</div>

Essayez-le vous-même →

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h2>Input Group Size</h2>
  <p>Use the .input-group-sm class for small input groups and .input-group-lg for large inputs groups:</p>
  
  <div class="input-group input-group-sm mb-3">
    <span class="input-group-text">Small</span>
    <input type="text" class="form-control">
  </div>
  <div class="input-group mb-3">
    <span class="input-group-text">Default</span>
    <input type="text" class="form-control">
  </div>
  <div class="input-group input-group-lg mb-3">
    <span class="input-group-text">Large</span>
    <input type="text" class="form-control">
  </div>
</div>

</body>
</html>

Entrées et aides multiples

Ajoutez plusieurs entrées ou modules complémentaires :

Person

One Two Three

Exemple

<!-- Multiple inputs -->
<div class="input-group mb-3">
  <span class="input-group-text">Person</span>
  <input type="text" class="form-control" placeholder="First Name">
  <input type="text" class="form-control" placeholder="Last Name">
</div>
<!-- Multiple addons / help text -->
<div class="input-group mb-3">
  <span class="input-group-text">One</span>
  <span class="input-group-text">Two</span>
  <span class="input-group-text">Three</span>
  <input type="text" class="form-control">
</div>

Essayez-le vous-même →

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h2>Multiple Inputs and Helpers</h2>
  <p>Add multiple inputs or addons:</p>
  
  <!-- Multiple inputs -->
  <div class="input-group mb-3">
    <span class="input-group-text">Person</span>
    <input type="text" class="form-control" placeholder="First Name">
    <input type="text" class="form-control" placeholder="Last Name">
  </div>

  <!-- Multiple addons / help text -->
  <div class="input-group mb-3">
    <span class="input-group-text">One</span>
    <span class="input-group-text">Two</span>
    <span class="input-group-text">Three</span>
    <input type="text" class="form-control">
  </div>
</div>

</body>
</html>

Groupe d'entrée avec cases à cocher et radios

Vous pouvez également utiliser des cases à cocher ou des boutons radio au lieu 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="Some text">
</div>
<div class="input-group mb-3">
  <div class="input-group-text">
    <input type="radio">
  </div>
  <input type="text" class="form-control" placeholder="Some text">
</div>

Essayez-le vous-même →

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h3>Input Group with Checkboxes and Radios</h3>
  <p>You can also use checkboxes or radio buttons instead of text:</p>
  
  <!-- Multiple inputs -->
  <div class="input-group mb-3">
    <div class="input-group-text">
      <input type="checkbox">
    </div>
    <input type="text" class="form-control" placeholder="Some text">
  </div>

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

</body>
</html>

Boutons du groupe d'entrée

Exemple

<div class="input-group mb-3">
  <button class="btn btn-outline-primary" type="button">Basic Button</button>
  <input type="text" class="form-control" placeholder="Some text">
</div>
<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Search">
  <button class="btn btn-success" type="submit">Go</button>
</div>
<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Something clever..">
  <button class="btn btn-primary" type="button">OK</button>
  <button class="btn btn-danger" type="button">Cancel</button>
</div>

Essayez-le vous-même →

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h3>Input Group Buttons</h3>
  
  <div class="input-group mb-3 mt-3">
    <button class="btn btn-outline-primary" type="button">Basic Button</button>
    <input type="text" class="form-control" placeholder="Some text">
  </div>

  <div class="input-group mb-3">
    <input type="text" class="form-control" placeholder="Search">
    <button class="btn btn-success" type="submit">Go</button> 
  </div>

  <div class="input-group mb-3">
    <input type="text" class="form-control" placeholder="Something clever..">
    <button class="btn btn-primary" type="button">OK</button> 
    <button class="btn btn-danger" type="button">Cancel</button> 
  </div>
</div>

</body>
</html>

Groupe d'entrée avec bouton déroulant

Ajoutez un bouton déroulant dans le groupe de saisie. Notez que vous n’avez pas besoin du wrapper .dropdown, comme vous le feriez normalement.

Exemple

<div class="input-group mt-3 mb-3">
  <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
    Dropdown button
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Link 1</a></li>
    <li><a class="dropdown-item" href="#">Link 2</a></li>
    <li><a class="dropdown-item" href="#">Link 3</a></li>
  </ul>
  <input type="text" class="form-control" placeholder="Username">
</div>

Essayez-le vous-même →

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h3>Input Groups with Dropdown Button</h3>
  <p>Add a dropdown button in the input group. Note that you don't need the .dropdown wrapper, as you normally would.</p>
    
  <div class="input-group mt-3 mb-3">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
      Dropdown button
    </button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Link 1</a></li>
      <li><a class="dropdown-item" href="#">Link 2</a></li>
      <li><a class="dropdown-item" href="#">Link 3</a></li>
    </ul>
    <input type="text" class="form-control" placeholder="Username">
  </div>
</div>

</body>
</html>