#### Default

Apply `.btn` class to give default styling.

`.btn-primary`

`.btn-outline-primary`

    <button class="btn btn-primary mb-2">Primary</button>

    <button class="btn btn-outline-primary mb-2">Primary</button>

#### Rounded

Use `.btn-rounded` to make buttons rounded.

    <button class="btn btn-primary btn-rounded mb-2">Primary</button>

    <button class="btn btn-outline-primary btn-rounded mb-2">Primary</button>

#### Solid

Apply `.btn-*` class followed by `.btn` class to create default buttons.

    <!-- Primary -->
    <button class="btn btn-primary mb-2">Primary</button>

    <!-- Info -->
    <button class="btn btn-info mb-2">Info</button>

    <!-- Success -->
    <button class="btn btn-success mb-2">Success</button>

    <!-- Warning -->
    <button class="btn btn-warning mb-2">Warning</button>

    <!-- Danger -->
    <button class="btn btn-danger mb-2">Danger</button>

    <!-- Secondary -->
    <button class="btn btn-secondary mb-2">Secondary</button>

    <!-- Dark -->
    <button class="btn btn-dark mb-2">Dark</button>

#### Outline

Apply `.btn-outline-*` class followed by `.btn` class to create outline buttons.

    <!-- Primary -->
    <button class="btn btn-outline-primary mb-2">Primary</button>

    <!-- Info -->
    <button class="btn btn-outline-info mb-2">Info</button>

    <!-- Success -->
    <button class="btn btn-outline-success mb-2">Success</button>

    <!-- Warning -->
    <button class="btn btn-outline-warning mb-2">Warning</button>

    <!-- Danger -->
    <button class="btn btn-outline-danger mb-2">Danger</button>

    <!-- Secondary -->
    <button class="btn btn-outline-secondary mb-2">Secondary</button>

    <!-- Dark -->
    <button class="btn btn-outline-dark mb-2">Dark</button>

#### Button Sizes

    <button class="btn btn-primary mb-4 mr-2 btn-lg">Large button</button>

    <button class="btn btn-secondary mb-4 mr-2">Default button</button>

    <button class="btn btn-warning mb-4 mr-2 btn-sm">Small button</button>

    <button class="btn btn-dark mb-4 mr-2 btn-sm disabled">Disabled Button</button>

#### Button with Icons

    <button class="btn btn-primary mb-2 mr-2"><svg> ... </svg> Left</button>

    <button class="btn btn-warning mb-2 mr-2 btn-rounded">Right <svg> ... </svg></button>

    <button class="btn btn-danger mb-2 mr-2"><svg> ... </svg></button>

    <button class="btn btn-dark mb-2 mr-2 rounded-circle"><svg> ... </svg></button>

#### Block Buttons

Link

    <button class="btn btn-primary btn-block mb-4 mr-2">Button</button>

    <input type="submit" class="btn btn-info btn-block mb-4 mr-2" value="Input">

    <a href="javascript:void(0);" class="btn btn-success btn-block mb-4 mr-2">Link</a>