close

# Buttons

Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.

##### Basic

Bootstrap includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control.

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

##### LightExclusive

Like default buttons but still want something cooler? Use `.btn-style-light` to make them lighter.

Note! Not all buttons support light style. Only above shown buttons can be used with `.btn-style-light` class.

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

##### BurgerExclusive

Google Material Design's burger button example.

    <button type="button" class="btn btn-primary btn-burger><i class="material-icons">add</i></button>
    <button type="button" class="btn btn-danger btn-burger"><i class="material-icons">delete_outline</i></button>
    <button type="button" class="btn btn-success btn-burger"><i class="material-icons">share</i></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 btn-sm">Small button</button>
    <button type="button" class="btn btn-secondary btn-sm">Small button</button>

##### IconsExclusive

Use icons inside buttons to make them more user-friendly.

    <button type="button" class="btn btn-primary"><i class="material-icons">add</i>Add</button>
    <button type="button" class="btn btn-danger"><i class="material-icons">delete_outline</i>Remove</button>
    <button type="button" class="btn btn-success"><i class="material-icons-outlined">file_download</i>Download</button>

##### Outline

In need of a button, but not the hefty background colors they bring? Replace the default modifier classes with the `.btn-outline-*` ones to remove all background images and colors on any button.

Some of the button styles use a relatively light foreground color, and should only be used on a dark background in order to have sufficient contrast.

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

##### Disabled State

Make buttons look inactive by adding the `disabled` boolean attribute to any `<button>` element. Disabled buttons have `pointer-events: none` applied to, preventing hover and active states from triggering.

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

##### Block Buttons

Create responsive stacks of full-width, “block buttons” like those in Bootstrap 4 with a mix of our display and gap utilities. By using utilities instead of button specific classes, we have much greater control over spacing, alignment, and responsive behaviors.

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

You can adjust the width of your block buttons with grid column width classes. For example, for a half-width “block button”, use `.col-6`. Center it horizontally with `.mx-auto`, too.

    <div class="d-grid gap-2 col-6 mx-auto">
        <button class="btn btn-primary" type="button">Button</button>
        <button class="btn btn-primary" type="button">Button</button>
    </div>

##### RoundedExclusive

Round corners easily by adding `.btn-rounded`.

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