Buttons

Custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.

Basic Buttons

Bootstrap includes eight predefined button styles for various semantic actions.

<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

Replace the default modifier classes with .btn-outline-* for buttons with borders.

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

Fancy larger or smaller buttons? Add .btn-lg or .btn-sm for additional sizes.

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

Buttons with Icons

Add Bootstrap Icons to buttons for enhanced visual communication.

<button type="button" class="btn btn-primary">
    <i class="bi bi-download me-2"></i>Download
</button>
<button type="button" class="btn btn-success">
    <i class="bi bi-check-circle me-2"></i>Save
</button>

Icon Only Buttons

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

Button States

Active State

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

Disabled State

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

Loading State

<button type="button" class="btn btn-primary" disabled>
    <span class="spinner-border spinner-border-sm me-2"></span>
    Loading...
</button>

Block Buttons

Create full-width "block buttons" using utility classes.

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

Responsive Block Buttons

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

Button Groups

Group a series of buttons together on a single line.

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

Outlined Button Group

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

Vertical Button Group

<div class="btn-group-vertical" role="group">
    <button type="button" class="btn btn-primary">Button</button>
    <button type="button" class="btn btn-primary">Button</button>
    <button type="button" class="btn btn-primary">Button</button>
</div>

Button Toolbar

Combine sets of button groups into button toolbars.

<div class="btn-toolbar" role="toolbar">
    <div class="btn-group me-2" role="group">
        <button type="button" class="btn btn-primary">1</button>
        <button type="button" class="btn btn-primary">2</button>
    </div>
    <div class="btn-group" role="group">
        <button type="button" class="btn btn-secondary">5</button>
    </div>
</div>

Toggle Buttons

Create button-like checkboxes and radio buttons.

Checkbox Toggle Buttons

<input type="checkbox" class="btn-check" id="btn-check-1" autocomplete="off">
<label class="btn btn-primary" for="btn-check-1">Single toggle</label>

Radio Toggle Buttons

<div class="btn-group" role="group">
    <input type="radio" class="btn-check" name="btnradio" id="btnradio1" checked>
    <label class="btn btn-outline-primary" for="btnradio1">Radio 1</label>

    <input type="radio" class="btn-check" name="btnradio" id="btnradio2">
    <label class="btn btn-outline-primary" for="btnradio2">Radio 2</label>
</div>