Bootstrap: Buttons en Tabellen

Om een knop (button) aan te maken kunnen we vertrekken van een button tag, een anchor tag of input tag en hier een bepaalde layout aan toekennen. In Bootstrap volstaat het hierbij om de klasse .btn toe te kennen.

De layout kunnen we aanpassen met extra button gerelateerde klassen:

Klasse Functionaliteit
.btn Iets als button opmaken
.btn-primary Iets als button opmaken met de primary kleur als achtergrond
.btn-outline-primary Iets als button opmaken met de primary kleur als outline
.btn-lg De grootte van de button op large plaatsen (default is medium)
.btn-sm De grootte van de button op small plaatsen (default is medium)
.btn-block De button op de volledige breedte van de pagina instellen (block level)

Voor tabellen kan je een zebrapatroon instellen maar ook hier zijn er kleur-customizations mogelijk en kan je dit ook specifiek toepassen voor bijvoorbeeld de thead (titels van de tabel). Je moet enkel de juiste klassenamen kennen om deze functionaliteiten toe te voegen.

Klasse Functionaliteit
.border Geeft een zwarte omkadering
.table Basis opmaak voor een tabel in bootstrap
.table-striped Geeft een zebra patroon aan je tabel
.table-hover Geeft een hover kleur wijziging effect op je tabel
.table-dark Gebruikt een zwart kleurschema voor je tabel
.thead-dark Gebruikt een zwart kleurschema voor je thead
.table-sm Maakt de tabel kleiner door padding te verminderen tussen de cellen