Bootstrap tilbyr et utvalg av knappestiler og størrelser som kan brukes for ulike designbehov og situasjoner.

Vanlige knappklasser

Grunnleggende knapp

Klassen btn fungerer som grunnklassen for å style knapper. Den gir essensiell knappestil, som polstring, kantlinje og hover-effekter.

Knappestiler

Bootstrap tilbyr et utvalg forhåndsdefinerte knappestiler som kan brukes med spesifikke klasser. Disse stilene inkluderer:

• btn-primary: Bruker en primærfarge på knappen, vanligvis brukt for primære handlinger;
• btn-secondary: Bruker en sekundærfarge på knappen, ofte brukt for sekundære handlinger;
• btn-success: Gir knappen en farge som indikerer suksess, ofte brukt for positive handlinger;
• btn-danger: Gir en farge som signaliserer fare eller kritiske handlinger;
• btn-warning: Bruker en farge som representerer advarsel eller forsiktighet;
• btn-info: Gir knappen en farge for å formidle informasjonsmeldinger;
• btn-light: Bruker et lyst fargetema på knappen, egnet for lyse bakgrunner;
• btn-dark: Bruker et mørkt fargetema på knappen, egnet for mørke bakgrunner;
• btn-link: Gjør knappen til en enkel lenke uten ekstra stil, ofte brukt for inline-handlinger.

Knappestørrelser

Vi kan justere størrelsen på knapper ved å bruke spesifikke klasser.

• btn-lg: Denne klassen øker størrelsen på knappen, slik at den blir større enn standardstørrelsen. Den brukes vanligvis for primære eller fremtredende knapper som krever mer oppmerksomhet;
• btn-sm: Denne klassen reduserer størrelsen på knappen, slik at den blir mindre enn standardstørrelsen. Den brukes ofte for sekundære eller hjelpeknotter som trenger mindre vektlegging.

Deaktivert tilstand

Ved å legge til det boolske attributtet disabled på et hvilket som helst <button>-element, blir det inaktivt. Deaktiverte knapper har pointer-events: none brukt, noe som forhindrer at hover- og aktive tilstander utløses.