Bootstrap tilbyder en række forskellige knapstilarter og -størrelser, der kan anvendes til forskellige designbehov og situationer.

Almindelige knapklasser

Grundlæggende knap

btn-klassen fungerer som den grundlæggende klasse til at style knapper. Den giver essentiel knap-styling såsom polstring, kant og hover-effekter.

Knapstilarter

Bootstrap tilbyder en række foruddefinerede knapstilarter, der kan anvendes ved hjælp af specifikke klasser. Disse stilarter inkluderer:

• btn-primary: Anvender en primær farve til knappen, typisk brugt til primære handlinger;
• btn-secondary: Anvender en sekundær farve til knappen, ofte brugt til sekundære handlinger;
• btn-success: Giver knappen en farve, der indikerer succes, ofte brugt til positive handlinger;
• btn-danger: Giver en farve, der signalerer fare eller kritiske handlinger;
• btn-warning: Anvender en farve, der repræsenterer advarsel eller forsigtighed;
• btn-info: Giver knappen en farve til at formidle informationsbeskeder;
• btn-light: Anvender et lyst farveskema til knappen, velegnet til lyse baggrunde;
• btn-dark: Anvender et mørkt farveskema til knappen, velegnet til mørke baggrunde;
• btn-link: Viser knappen som et simpelt link uden yderligere styling, ofte brugt til inline-handlinger.

Knapstørrelser

Vi kan justere størrelsen på knapper ved hjælp af specifikke klasser.

• btn-lg: Denne klasse øger størrelsen på knappen, så den bliver større end standardstørrelsen. Den bruges typisk til primære eller fremtrædende knapper, der kræver mere opmærksomhed;
• btn-sm: Omvendt mindsker denne klasse størrelsen på knappen, så den bliver mindre end standardstørrelsen. Den bruges ofte til sekundære eller supplerende knapper, der kræver mindre fokus.

Deaktiveret tilstand

Tilføjelse af attributten disabled som boolean til et hvilket som helst <button>-element gør det inaktivt. Deaktiverede knapper har pointer-events: none anvendt, hvilket forhindrer hover- og aktive tilstande i at blive udløst.