Bootstrap provides a variety of button styles and sizes that can be used for different design needs and situations.

Common Button Classes

Basic button

The btn class serves as the foundational class for styling buttons. It provides essential button styling, such as padding, border, and hover effects.

Button styles

Bootstrap offers a variety of predefined button styles that can be applied using specific classes. These styles include:

• btn-primary: Applies a primary color to the button, typically used for primary actions;
• btn-secondary: Applies a secondary color to the button, often used for secondary actions;
• btn-success: Gives the button a color indicative of success, often used for positive actions;
• btn-danger: Provides a color signaling danger or critical actions;
• btn-warning: Applies a color representing warning or caution;
• btn-info: Gives the button a color to convey informational messages;
• btn-light: Applies a light color scheme to the button, suitable for lighter backgrounds;
• btn-dark: Applies a dark color scheme to the button, suitable for darker backgrounds;
• btn-link: Renders the button as a simple link without any additional styling, often used for inline actions.

Button sizes

We can adjust the size of buttons using specific classes.

• btn-lg: This class increases the size of the button, making it larger than the default size. It's typically used for primary or prominent buttons that require more attention;
• btn-sm: Conversely, this class decreases the size of the button, making it smaller than the default size. It's often used for secondary or auxiliary buttons that need less emphasis.

Disabled state

Adding the disabled boolean attribute to any <button> element makes it inactive. Disabled buttons have pointer-events: none applied, preventing hover and active states from triggering.