Bootstrap - Bootstrap buttons

Bootstrap buttons are one of the most commonly used UI components in the Bootstrap framework. They provide pre-styled, responsive, and customizable button designs using built-in classes. Bootstrap makes it easy to create buttons with different styles, sizes, states, and functionalities without writing custom CSS.

1. Basic Syntax

In Bootstrap, buttons are created using the .btn class along with a contextual class like .btn-primary, .btn-danger, etc.

Example:

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

Explanation:

.btn → Base button styling.
.btn-primary → Contextual class that determines color and style.
type="button" → Recommended for non-form buttons.

2. Button Types (Contextual Variants)

Bootstrap provides eight default button styles:

Button Type	Class	Purpose / Use Case
Primary	`.btn-primary`	Most important action
Secondary	`.btn-secondary`	Neutral actions
Success	`.btn-success`	Positive actions
Danger	`.btn-danger`	Critical actions / delete
Warning	`.btn-warning`	Cautionary actions
Info	`.btn-info`	Informational actions
Light	`.btn-light`	Minimal background button
Dark	`.btn-dark`	High-contrast button
Link	`.btn-link`	Styled like a hyperlink

Example:

<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>

3. Button Sizes

Use .btn-lg and .btn-sm for different sizes.

<button type="button" class="btn btn-primary btn-lg">Large</button>
<button type="button" class="btn btn-success">Default</button>
<button type="button" class="btn btn-danger btn-sm">Small</button>

For full-width buttons, use .d-grid or .w-100:

<div class="d-grid">
  <button class="btn btn-primary">Full Width Button</button>
</div>

4. Button States

(a) Active State

Add .active to make a button look pressed.

<button type="button" class="btn btn-success active">Active Button</button>

(b) Disabled State

There are two ways:

For <button> elements:

<button type="button" class="btn btn-secondary" disabled>Disabled Button</button>

For <a> elements:

<a class="btn btn-secondary disabled" tabindex="-1" aria-disabled="true">Disabled Link</a>

5. Outline Buttons

Outline buttons have transparent backgrounds with colored borders.
Use .btn-outline-* classes.

Example:

<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-success">Success</button>

6. Block-Level Buttons (Full-Width)

In Bootstrap 5, use utilities instead of .btn-block (deprecated from Bootstrap 4):

<button class="btn btn-primary w-100">Full Width Button</button>

7. Buttons with Icons

Bootstrap doesn’t include icons by default, but you can use Bootstrap Icons or Font Awesome.

Example with Bootstrap Icons:

<button class="btn btn-success">
  <i class="bi bi-check-circle"></i> Save
</button>

Example with Font Awesome:

<button class="btn btn-danger">
  <i class="fa fa-trash"></i> Delete
</button>

8. Toggle Buttons

Bootstrap 5 supports toggleable buttons using data-bs-toggle="button".

<button type="button" class="btn btn-primary" data-bs-toggle="button" aria-pressed="false">
  Toggle Button
</button>

9. Button Groups

Button groups allow multiple buttons to be grouped together.

(a) Horizontal Button Group

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

(b) Vertical Button Group

<div class="btn-group-vertical" role="group">
  <button type="button" class="btn btn-success">Top</button>
  <button type="button" class="btn btn-success">Middle</button>
  <button type="button" class="btn btn-success">Bottom</button>
</div>

10. Dropdown Buttons

Bootstrap supports buttons with dropdowns:

<div class="btn-group">
  <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
    Dropdown
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another Action</a></li>
    <li><a class="dropdown-item" href="#">Something Else</a></li>
  </ul>
</div>

11. Bootstrap 3 vs Bootstrap 4 & 5 Differences

Feature	Bootstrap 3	Bootstrap 4 & 5
Base class	`.btn`	`.btn`
Color variants	Fewer	More colors added
Outline buttons	Not available	`.btn-outline-*` added
Block buttons	`.btn-block`	`.w-100` instead
Icon support	No built-in	Use Bootstrap Icons
Toggle buttons	jQuery-based	Vanilla JS

12. Complete Example (Bootstrap 5)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap Buttons</title>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="p-4">

  <h2>Bootstrap Buttons Example</h2>

  <!-- Normal Buttons -->
  <button class="btn btn-primary">Primary</button>
  <button class="btn btn-success">Success</button>
  <button class="btn btn-danger">Danger</button>

  <!-- Outline Buttons -->
  <button class="btn btn-outline-primary">Outline Primary</button>
  <button class="btn btn-outline-warning">Outline Warning</button>

  <!-- Button Sizes -->
  <button class="btn btn-primary btn-lg">Large</button>
  <button class="btn btn-primary btn-sm">Small</button>

  <!-- Full Width -->
  <button class="btn btn-dark w-100 mt-2">Full Width Button</button>

  <!-- Button Group -->
  <div class="btn-group mt-3">
    <button class="btn btn-info">Left</button>
    <button class="btn btn-info">Middle</button>
    <button class="btn btn-info">Right</button>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>