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-roundedto 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-roundedclasses 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-lgor .btn-smclasses for additional button sizes.

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

Disabled

Disabled Buttons

Add the disabledattribute 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>