Bootstrap biedt een verscheidenheid aan knopstijlen en -formaten die gebruikt kunnen worden voor verschillende ontwerpbehoeften en situaties.

Algemene knopklassen

Basis knop

De btn-klasse dient als de fundamentele klasse voor het stijlen van knoppen. Deze biedt essentiële knopopmaak, zoals opvulling, rand en hover-effecten.

Knopstijlen

Bootstrap biedt verschillende vooraf gedefinieerde knopstijlen die kunnen worden toegepast met specifieke klassen. Deze stijlen omvatten:

• btn-primary: Past een primaire kleur toe op de knop, meestal gebruikt voor primaire acties;
• btn-secondary: Past een secundaire kleur toe op de knop, vaak gebruikt voor secundaire acties;
• btn-success: Geeft de knop een kleur die succes aanduidt, vaak gebruikt voor positieve acties;
• btn-danger: Voorziet de knop van een kleur die gevaar of kritieke acties aangeeft;
• btn-warning: Past een kleur toe die waarschuwing of voorzichtigheid vertegenwoordigt;
• btn-info: Geeft de knop een kleur om informatieve berichten over te brengen;
• btn-light: Past een licht kleurenschema toe op de knop, geschikt voor lichtere achtergronden;
• btn-dark: Past een donker kleurenschema toe op de knop, geschikt voor donkere achtergronden;
• btn-link: Geeft de knop weer als een eenvoudige link zonder extra opmaak, vaak gebruikt voor inline acties.

Knopgroottes

De grootte van knoppen kan worden aangepast met specifieke klassen.

• btn-lg: Deze klasse vergroot de knop, waardoor deze groter wordt dan de standaardgrootte. Wordt meestal gebruikt voor primaire of opvallende knoppen die meer aandacht vereisen;
• btn-sm: Deze klasse verkleint de knop, waardoor deze kleiner wordt dan de standaardgrootte. Wordt vaak gebruikt voor secundaire of aanvullende knoppen die minder nadruk nodig hebben.

Uitgeschakelde status

Het toevoegen van het disabled booleaanse attribuut aan een <button>-element maakt deze inactief. Uitgeschakelde knoppen hebben pointer-events: none toegepast, waardoor hover- en actieve statussen niet worden geactiveerd.