Bootstrap erbjuder en mängd olika knappstilar och storlekar som kan användas för olika designbehov och situationer.

Vanliga knappklasser

Grundläggande knapp

Klassen btn fungerar som grundläggande klass för att formatera knappar. Den tillhandahåller nödvändig knappformatering, såsom utfyllnad, kantlinje och hovringseffekter.

Knappstilar

Bootstrap erbjuder flera fördefinierade knappstilar som kan tillämpas med specifika klasser. Dessa stilar inkluderar:

• btn-primary: Tillämpas med en primär färg på knappen, vanligtvis för primära åtgärder;
• btn-secondary: Tillämpas med en sekundär färg på knappen, ofta för sekundära åtgärder;
• btn-success: Ger knappen en färg som indikerar framgång, ofta för positiva åtgärder;
• btn-danger: Ger en färg som signalerar fara eller kritiska åtgärder;
• btn-warning: Tillämpas med en färg som representerar varning eller försiktighet;
• btn-info: Ger knappen en färg för att förmedla informationsmeddelanden;
• btn-light: Tillämpas med ett ljust färgschema på knappen, lämpligt för ljusare bakgrunder;
• btn-dark: Tillämpas med ett mörkt färgschema på knappen, lämpligt för mörkare bakgrunder;
• btn-link: Visar knappen som en enkel länk utan extra formatering, ofta för inbäddade åtgärder.

Knappstorlekar

Vi kan justera storleken på knappar med specifika klasser.

• btn-lg: Denna klass ökar storleken på knappen och gör den större än standardstorleken. Den används vanligtvis för primära eller framträdande knappar som kräver mer uppmärksamhet;
• btn-sm: Denna klass minskar storleken på knappen och gör den mindre än standardstorleken. Den används ofta för sekundära eller kompletterande knappar som behöver mindre betoning.

Inaktiverat läge

Genom att lägga till attributet disabled som boolean på ett <button>-element görs det inaktivt. Inaktiverade knappar har pointer-events: none tillämpat, vilket förhindrar att hover- och aktivtillstånd utlöses.