Bootstrap 4 knopgroepen
Knop groepen
Met Bootstrap 4 kunt u een reeks knoppen groeperen (op een enkele regel) in een knopgroep:
Gebruik een <div>element met klasse .btn-groupom een knopgroep te maken:
Voorbeeld
<div class="btn-group">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<button type="button" class="btn btn-primary">Sony</button>
</div>
Tip: in plaats van knopgroottes toe te passen op elke knop in een groep, gebruik je class .btn-group-lgvoor een grote knopgroep of de .btn-group-smvoor een kleine knopgroep:
Grote Knoppen:
Standaard knoppen:
kleine knopen:
Voorbeeld
<div class="btn-group btn-group-lg">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<button type="button" class="btn btn-primary">Sony</button>
</div>
Verticale knopgroepen
Bootstrap 4 ondersteunt ook verticale knopgroepen:
Gebruik de klasse .btn-group-verticalom een verticale knopgroep te maken:
Voorbeeld
<div class="btn-group-vertical">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<button type="button" class="btn btn-primary">Sony</button>
</div>
Knopgroepen en vervolgkeuzemenu's nesten
Nest-knopgroepen om vervolgkeuzemenu's te maken (in een later hoofdstuk kom je meer te weten over vervolgkeuzemenu's):
Voorbeeld
<div class="btn-group">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<div class="btn-group">
<button type="button" class="btn
btn-primary dropdown-toggle" data-toggle="dropdown">
Sony
</button>
<div
class="dropdown-menu">
<a
class="dropdown-item" href="#">Tablet</a>
<a
class="dropdown-item" href="#">Smartphone</a>
</div>
</div>
</div>
Vervolgkeuzemenu's voor splitsen
Voorbeeld
<div class="btn-group">
<button type="button" class="btn btn-primary">Sony</button>
<button type="button" class="btn btn-primary dropdown-toggle
dropdown-toggle-split"
data-toggle="dropdown">
<span class="caret"></span>
</button>
<div class="dropdown-menu">
<a
class="dropdown-item" href="#">Tablet</a>
<a
class="dropdown-item" href="#">Smartphone</a>
</div>
</div>
Verticale knopgroep met dropdown
Voorbeeld
<div class="btn-group-vertical">
<button type="button" class="btn
btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<div class="btn-group">
<button type="button" class="btn
btn-primary dropdown-toggle" data-toggle="dropdown">
Sony
</button>
<div
class="dropdown-menu">
<a
class="dropdown-item" href="#">Tablet</a>
<a
class="dropdown-item" href="#">Smartphone</a>
</div>
</div>
</div>
Knopgroepen naast elkaar
Knopgroepen zijn standaard "inline", waardoor ze naast elkaar verschijnen als je meerdere groepen hebt:
Voorbeeld
<div class="btn-group">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<button type="button" class="btn btn-primary">Sony</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary">BMW</button>
<button type="button" class="btn btn-primary">Mercedes</button>
<button type="button" class="btn btn-primary">Volvo</button>
</div>