Bootstrap 5 Input Groups

Invoergroep

.input-group Een klasse is een container die inputvelden versterkt door iconen, tekst of knoppen als "hulp tekst" toe te voegen aan het begin of einde van het inputveld.

Gebruik een klasse om de stijl van een specifieke hulp tekst in te stellen. .input-group-text Soort:

Voorbeeld

<form>
  <div class="input-group">
    <span class="input-group-text">@</span>
    <input type="text" class="form-control" placeholder="Gebruikersnaam">
  </div>
  <div class="input-group">
    <input type="text" class="form-control" placeholder="Uw e-mail">
    <span class="input-group-text">@example.com</span>
  </div>
</form>

Probeer het zelf

Grootte van de invoergroep

plaats .input-group-sm Klasse voor kleine invoergroepen, zet .input-group-lg Gebruikt voor grote invoergroepen:

Voorbeeld

<div class="input-group mb-3 input-group-sm">
   <span class="input-group-text">Klein</span>
  <input type="text" class="form-control">
</div>
<div class="input-group mb-3">
  <span class="input-group-text">Standaard</span>
  <input type="text" class="form-control">>
</div>
<div class="input-group mb-3 input-group-lg">
  <span class="input-group-text">Groot</span>
  <input type="text" class="form-control">
</div>

Probeer het zelf

Meerdere invoer en assistenten

Voeg meerdere invoercontrolelelementen of plugins toe:

Voorbeeld

<!-- Meerdere invoercontrolelelementen -->
<div class="input-group mb-3">
  <span class="input-group-text">Naam</span>
  <input type="text" class="form-control" placeholder="Achternaam">
  <input type="text" class="form-control" placeholder="Naam">
</div>
<!-- Meerdere plugins/tekst voor hulp -->
<div class="input-group mb-3">
  <span class="input-group-text">Eén</span>
  <span class="input-group-text">Twee</span>
  <span class="input-group-text">Drie</span>
  <input type="text" class="form-control">
</div>

Probeer het zelf

Invoergroep met keuzevakken en keuzerondjes

U kunt ook keuzevakken of keuzerondjes gebruiken in plaats van tekst:

Voorbeeld

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

Probeer het zelf

Invoergroep knop

Voorbeeld

<div class="input-group mb-3">
  <button class="btn btn-outline-primary" type="button">Basis knop</button>
  <input type="text" class="form-control" placeholder="Enkele tekst">
</div>
<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Zoek">
  <button class="btn btn-success" type="submit">Ga</button>
</div>
<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Enkele tekst">
  <button class="btn btn-primary" type="button">OK</button>
  <button class="btn btn-danger" type="button">Annuleer</button>
</div>

Probeer het zelf

Inputgroep met dropdown knop

Voeg een dropdown knop toe aan de inputgroep. Let op, je hebt geen .dropdown wrapper container nodig zoals gebruikelijk.

Voorbeeld

<div class="input-group mt-3 mb-3">
  <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
    Dropdown knop
  </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="Gebruikersnaam">
</div>

Probeer het zelf