Input groups Bootstrap

Les inputs groups permettent d'étendre les possibilités des formulaires en ajoutant à gauche, à droite ou des 2 côtés des éléments textuels qui sont placés sur des balises <span>.

Les balises <select> ne pourront pas être relooké complétement selon le navigateur

Dans certain cas, les attributs rows de la balise <textarea> ne seront pas interprétés correctement.

Exemple basique

      
<div class="input-group">

    <span class="input-group-addon" id="basic-addon1">@</span>

    <input type="text" class="form-control" placeholder="Email" aria-describedby="basic-addon1">

</div>



<div class="input-group">
 
    <input type="text" class="form-control" placeholder="Préfixe de l'email" aria-describedby="basic-addon2">

    <span class="input-group-addon" id="basic-addon2">@example.com</span>

</div>


   
<div class="input-group">

    <span class="input-group-addon"> €</span>

    <input type="text" class="form-control" aria-label="Quantité">

    <span class="input-group-addon">.00</span>

</div>


   
<label for="basic-url">Compléter le reste de l'url</label>

<div class="input-group">

    <span class="input-group-addon" id="basic-addon3">https://www.mondomaine.com/utilisateur/</span>

    <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">

</div>

Exemple

@example.com

€ .00

Compléter le reste de l'url

https://www.mondomaine.com/utilisateur/

Taille

Vous pouvez agir sur la taille avec les classes .input-group-lg et .input-group-sm.

    
<div class="input-group input-group-lg">

    <span class="input-group-addon" id="sizing-addon1">@</span>

    <input type="text" class="form-control" placeholder="Email" aria-describedby="sizing-addon1">

</div>



<div class="input-group input-group-sm">

    <span class="input-group-addon" id="sizing-addon1">@</span>

  <input type="text" class="form-control" placeholder="Email" aria-describedby="sizing-addon1">

</div>

Exemple

Case à cocher et boutons radio

    
<div class="row">

  

   <div class="col-lg-6">

      <div class="input-group">

          <span class="input-group-addon">

              <input type="checkbox" aria-label="...">

          </span>

          <input type="text" class="form-control" aria-label="...">

      </div>

   </div>

  
 
   <div class="col-lg-6">

      <div class="input-group">

          <span class="input-group-addon">

              <input type="radio" aria-label="...">

          </span>

          <input type="text" class="form-control" aria-label="...">

      </div>

   </div>

  
   
</div>

Exemple

Avec un bouton

Les boutons dans les classes .input-group réagissent différemment et nécessitent un peu d'adaptation. Au lieu d'utiliser la classe .input-groupe-addon, vous utiliserez la classe .input-group-btn pour envelopper les boutons.

    
<div class="row">

   

     <!-- Avec un bouton à gauche -->

      <div class="col-lg-6">

        <div class="input-group">

            <span class="input-group-btn">

                <button class="btn btn-default" type="button">Allez</button>

            </span>

          <input type="text" class="form-control" placeholder="Rechercher">

        </div>

   </div>

  



    <!-- Avec un bouton à droite -->

    <div class="col-lg-6">

          <div class="input-group">

               <input type="text" class="form-control" placeholder="Rechercher">

               <span class="input-group-btn">

                    <button class="btn btn-primary" type="button">Allez</button>

               </span>

         </div>

    </div>

  
  
</div>

Exemple

bouton avec menu déroulant

    
<div class="input-group">

    <div class="input-group-btn">

        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>

        <ul class="dropdown-menu">

          <li><a href="#" title="Lien 1">Lien 1</a></li>

          <li><a href="#" title="Lien 2">Lien 2</a></li>

          <li><a href="#" title="Lien 3">Lien 3</a></li>

          <li role="separator" class="divider"></li>

          <li><a href="#" title="Lien 4">Lien 4</a></li>

       </ul>

    </div>

    <input type="text" class="form-control" aria-label="...">

</div>

Exemple

Bouton divisé

   
<div class="input-group">

  <div class="input-group-btn">

      <button type="button" class="btn btn-default">Menu déroulant</button>

      <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">    <span class="caret"></span>

       <span class="sr-only">Toggle Dropdown</span>

      </button>

      <ul class="dropdown-menu">

         <li><a href="#" title="Lien 1">Lien 1</a></li>

         <li><a href="#" title="Lien 2">Lien 2</a></li>

         <li><a href="#" title="Lien 3">Lien 3</a></li>

         <li role="separator" class="divider"</li>

         <li><a href="#" title="Lien 4">Lien 4</a></li>

      </ul>

  </div>

  <input type="text" class="form-control" aria-label="...">

</div>

Exemple

Bouton multiple

    
<div class="input-group">

  <div class="input-group-btn">

    <button type="button" class="btn btn-default"><i class="fa fa-bold"></i></button>

    <button type="button" class="btn btn-default"><i class="fa fa-italic"></i></button>

  </div>

  <input type="text" class="form-control" aria-label="...">

</div>

Exemple