Bootstrap tarjoaa useita erilaisia painiketyylejä ja -kokoja, joita voidaan käyttää erilaisiin suunnittelutarpeisiin ja tilanteisiin.

Yleiset painikeluokat

Peruspainike

btn-luokka toimii painikkeiden perustyyliluokkana. Se tarjoaa olennaiset painikkeen tyylit, kuten täytteen, reunuksen ja hover-efektit.

Painiketyylit

Bootstrap tarjoaa useita ennalta määriteltyjä painiketyylejä, joita voidaan käyttää tietyillä luokilla. Näihin tyyleihin kuuluvat:

• btn-primary: Lisää painikkeeseen ensisijaisen värin, jota käytetään yleensä päätoiminnoissa;
• btn-secondary: Lisää painikkeeseen toissijaisen värin, jota käytetään usein toissijaisissa toiminnoissa;
• btn-success: Antaa painikkeelle onnistumista kuvaavan värin, jota käytetään positiivisissa toiminnoissa;
• btn-danger: Tarjoaa värin, joka viestii vaarasta tai kriittisistä toiminnoista;
• btn-warning: Lisää painikkeeseen varoitusta tai huolellisuutta kuvaavan värin;
• btn-info: Antaa painikkeelle informatiivisen viestin välittävän värin;
• btn-light: Lisää painikkeeseen vaalean värimaailman, joka sopii vaaleille taustoille;
• btn-dark: Lisää painikkeeseen tumman värimaailman, joka sopii tummille taustoille;
• btn-link: Näyttää painikkeen yksinkertaisena linkkinä ilman lisätyylejä, usein käytetty rivitoiminnoissa.

Painikkeen koot

Painikkeiden kokoa voidaan säätää erityisillä luokilla.

• btn-lg: Tämä luokka suurentaa painiketta oletuskokoa suuremmaksi. Sitä käytetään yleensä ensisijaisissa tai korostetuissa painikkeissa, jotka vaativat enemmän huomiota;
• btn-sm: Tämä luokka pienentää painiketta oletuskokoa pienemmäksi. Sitä käytetään usein toissijaisissa tai apupainikkeissa, jotka eivät vaadi yhtä paljon huomiota.

Poistettu käytöstä -tila

disabled-attribuutin lisääminen mihin tahansa <button>-elementtiin tekee siitä passiivisen. Poistetut käytöstä olevat painikkeet käyttävät ominaisuutta pointer-events: none, mikä estää hover- ja aktiivisten tilojen aktivoitumisen.