Kenhuang Academy
  • English

      • Bootstrap Buttons

      Overview

      Bootstrap provides rich button styles and functionality, including different colors, sizes, states, and types. Buttons are one of the most important interactive elements in user interfaces.

      Basic Buttons

      Use the .btn class to create basic buttons, combined with color classes to define button styles:

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

      Outline Buttons

      Use .btn-outline-* classes to create outline buttons:

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

      Button Sizes

      Large and Small Buttons

      <!-- Large buttons -->
<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-secondary btn-lg">Large button</button>

<!-- Default size -->
<button type="button" class="btn btn-primary">Default button</button>
<button type="button" class="btn btn-secondary">Default button</button>

<!-- Small buttons -->
<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-secondary btn-sm">Small button</button>

      Block-level Buttons

      Create buttons that span the full width of the parent element:

      <div class="d-grid gap-2">
    <button class="btn btn-primary" type="button">Block-level button</button>
    <button class="btn btn-secondary" type="button">Block-level button</button>
</div>

<!-- Responsive block-level buttons -->
<div class="d-grid gap-2 d-md-block">
    <button class="btn btn-primary" type="button">Button</button>
    <button class="btn btn-secondary" type="button">Button</button>
</div>

      Button States

      Active State

      <a href="#" class="btn btn-primary active" role="button" aria-pressed="true">Active link</a>
<button type="button" class="btn btn-primary active">Active button</button>

      Disabled State

      <!-- Disabled buttons -->
<button type="button" class="btn btn-primary" disabled>Disabled button</button>
<button type="button" class="btn btn-secondary" disabled>Disabled button</button>

<!-- Disabled links -->
<a class="btn btn-primary disabled" role="button" aria-disabled="true">Disabled link</a>
<a class="btn btn-secondary disabled" role="button" aria-disabled="true">Disabled link</a>

      Button Tags

      Button classes can be used on multiple HTML elements:

      <!-- Link buttons -->
<a class="btn btn-primary" href="#" role="button">Link</a>