Buttons

Default

Default Button

Use the button classes on an <a>, <button>, or <input> element.

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

Outline

Outline Button

Use the .btn-outline-* classes to quickly create bordered buttons.

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

Rounded

Rounded Button

Add .btn-rounded to buttons to get large rounded corners.

<button type="button" class="btn btn-white btn-rounded">White</button>

Rounded Outline

Rounded Outline Button

Use the .btn-outline-* and .btn-rounded classes together to quickly create bordered buttons with large rounded corners.

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

Icon

Icon Button

Add icons to any button or even use Icon-only buttons.

<button type="button" class="btn btn-light">

                                                  <i class="material-icons">favorite_border</i>

                                                </button>

                                                

                                                <button type="button" class="btn btn-light">

                                                  <i class="material-icons mr-1">favorite</i> Favorite

                                                </button>

Circle

Circle Button

<button type="button" class="btn btn-danger btn-circle">

                                                  <i class="material-icons">home</i>

                                                </button>

Size

Button Size

Add .btn-lg or .btn-sm classes for additional button sizes.

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

Disabled

Disabled Buttons

Add the disabled attribute to disable buttons.

<button type="button" class="btn btn-info" disabled="">Info</button>

Block

Button Block

Create block level buttons, by adding add .btn-block.

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

Dropdown

Button dropdown

<div class="btn-group">

                                                  <button type="button" class="btn btn-white dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">White</button>

                                                  <div class="dropdown-menu">

                                                    <a class="dropdown-item" href="#">Action</a>

                                                    <a class="dropdown-item" href="#">Another action</a>

                                                    <a class="dropdown-item" href="#">Something else here</a>

                                                    <div class="dropdown-divider"></div>

                                                    <a class="dropdown-item" href="#">Separated link</a>

                                                  </div>

                                                </div>

Group

Button Group

Create a group of buttons by wrapping with .btn-group.

<div class="btn-group">

                                                  <button type="button" class="btn btn-light">Left</button>

                                                  <button type="button" class="btn btn-light">Middle</button>

                                                  <button type="button" class="btn btn-light">Right</button>

                                                </div>