Buttons in Bootstrap

Learn how to style and customize buttons using Bootstrap.

1. Introduction to Buttons

Buttons are essential interactive elements in any web application. Bootstrap provides a wide range of pre-styled buttons to suit various purposes and ensure consistency across projects.

  • Responsive design ensures buttons look great on any device.
  • Customize styles and sizes with built-in classes.
  • Compatible with other components like forms and modals.

2. Button Classes

Bootstrap provides predefined classes for button styles:

  • .btn-primary: Primary actions.
  • .btn-secondary: Secondary actions.
  • .btn-success: Positive actions like success messages.
  • .btn-danger: Negative actions like warnings.
  • .btn-warning: Cautionary messages.
  • .btn-info: Informational actions.
  • .btn-light and .btn-dark: Theme-specific buttons.
<button class="btn btn-primary">Primary</button>
<button class="btn btn-danger">Danger</button>

3. Button Sizes

Bootstrap provides classes for different button sizes:

  • .btn-lg: For large buttons.
  • .btn-sm: For small buttons.
  • No class needed for default size.
<button class="btn btn-primary btn-lg">Large Button</button>
<button class="btn btn-secondary btn-sm">Small Button</button>

4. Outline Buttons

Outline buttons provide a subtle look with only a border:

  • Use .btn-outline-* classes for outline styles.
<button class="btn btn-outline-primary">Outline Primary</button>
<button class="btn btn-outline-danger">Outline Danger</button>

5. Block Buttons

Block-level buttons span the entire width of their container:

  • Combine .d-block with .w-100 for full-width buttons.
<button class="btn btn-primary d-block w-100">Block Button</button>

6. Button States

Use classes to manage button states:

  • .active: Highlights an active button.
  • .disabled: Disables a button (adds a disabled appearance).
<button class="btn btn-primary active">Active Button</button>
<button class="btn btn-secondary disabled">Disabled Button</button>

7. Button Groups

Group buttons together using .btn-group:

<div class="btn-group">
    <button class="btn btn-primary">Left</button>
    <button class="btn btn-primary">Middle</button>
    <button class="btn btn-primary">Right</button>
</div>

8. Icon Buttons

Add icons to buttons for better UI:

<button class="btn btn-primary">
    <i class="bi bi-star"></i> Star
</button>

9. Link Buttons

Create buttons that act as links using .btn:

<a href="#" class="btn btn-primary">Link Button</a>

10. Button Colors

Bootstrap allows additional customizations for colors:

  • Use CSS or Sass to define custom colors for buttons.
/* Example using Sass */
$btn-primary-bg: #3498db;

11. Responsive Buttons

Adjust button sizes and visibility based on screen size:

<button class="btn btn-primary d-lg-none">Visible on Small Screens</button>
<button class="btn btn-primary d-none d-lg-block">Visible on Large Screens</button>

12. Button Alignment

Use utility classes to align buttons:

<div class="text-center">
    <button class="btn btn-primary">Centered Button</button>
</div>

13. Toggle Buttons

Use JavaScript to toggle button states:

<button class="btn btn-primary" data-bs-toggle="button">Toggle Button</button>

14. Pill Buttons

Create rounded buttons using .rounded-pill:

<button class="btn btn-primary rounded-pill">Pill Button</button>

15. Additional Resources