Bootstrap 5 Buttons

Bootstrap 5 provides a variety of styles for creating buttons. Buttons can be customized with various size, color, and state options. This makes it easy to create user-friendly and interactive interfaces for your web applications.

Creating a Button

To create a button in Bootstrap 5, use the following HTML code:

<button type="button" class="btn btn-primary">Primary</button>

This will produce a primary button with blue background color. You can customize the button by changing the class to one of the available options.

Button Sizes

Bootstrap 5 provides four different size options for buttons. You can modify the size of the button by adding class btn-lg, btn-sm, or btn-xs:

<button type="button" class="btn btn-primary btn-lg">Large</button>
<button type="button" class="btn btn-primary">Default</button>
<button type="button" class="btn btn-primary btn-sm">Small</button>
<button type="button" class="btn btn-primary btn-xs">Extra small</button>

Button Colors

Bootstrap 5 provides a variety of color options for buttons. You can modify the color of the button by changing the class to one of the following:

• Primary: btn-primary
• Secondary: btn-secondary
• Success: btn-success
• Danger: btn-danger
• Warning: btn-warning
• Info: btn-info
• Light: btn-light
• Dark: btn-dark
• Link: btn-link

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>

Button States

Bootstrap 5 provides a way to change the appearance of a button based on its state. You can modify the state of the button by adding class active, disabled, or loading:

<button type="button" class="btn btn-primary active">Active Button</button>
<button type="button" class="btn btn-primary disabled">Disabled Button</button>
<button type="button" class="btn btn-primary loading">Loading Button</button>

Conclusion

Bootstrap 5 provides a simple and effective way to create buttons with many customization options. By using these options, you can create user-friendly and interactive interfaces for your web applications.