LOADING

Getting Started

Introduction Source and Credits

Foundation

Support Changelog

Components

Alerts Badge Breadcrumb Buttons New Button group Card Carousel Collapse Dropdowns Hot Forms Jumbotron List group Media object Modal Navigations Pagination PopoversProgress Scrollspy Spinners Hot Tooltips

Section

Pages

Button

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

Default Button

<button type="button" class="btn btn-primary mr-5 mt-4">Primary</button>
<button type="button" class="btn btn-secondary mr-5 mt-4">Secondary</button>
<button type="button" class="btn btn-success mr-5 mt-4">Success</button>
<button type="button" class="btn btn-danger mr-5 mt-4">Danger</button>
<button type="button" class="btn btn-warning mr-5 mt-4">Warning</button>
<button type="button" class="btn btn-info mr-5 mt-4">Info</button>
<button type="button" class="btn btn-light mr-5 mt-4">Light</button>
<button type="button" class="btn btn-dark mr-5 mt-4">Dark</button>
<button type="button" class="btn btn-link  mt-4">Link</button>

Size

<button type="button" class="btn btn-primary btn-lg mr-5 mt-4">Get Started</button>
<button type="button" class="btn btn-primary mr-5  mt-4">Get Started</button>
<button type="button" class="btn btn-primary btn-sm mr-5 mt-4">Get Started</button>

Outline buttons

<button type="button" class="btn btn-lg btn btn-outline-primary mr-5 mt-4">Get Started</button>
<button type="button" class="btn btn btn-outline-primary mr-5 mt-4">Get Started</button>
<button type="button" class="btn btn-sm btn btn-outline-primary mr-5 mt-4">Get Starte</button>

Full Width buttons

<button type="button" class="btn btn-primary btn-lg btn-block mt-4">Block level button</button>
<button type="button" class="btn btn-secondary btn-lg btn-block mt-4">Block level button</button>

Active State

<button type="button" class="btn btn-primary btn-lg active mr-5 mt-4">Get Started</button>
<button type="button" class="btn btn-primary active mr-5 mt-4">Get Started</button>
<button type="button" class="btn btn-primary btn-sm active mr-5 mt-4">Get Started</button>

disabled State

<button type="button" class="btn btn-primary btn-lg  mr-5 mt-4">Get Started</button>
<button type="button" class="btn btn-primary mr-5 mt-4">Get Started</button>
<button type="button" class="btn btn-primary btn-sm mr-5 mt-4">Get Started</button>

Button Group State

<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="radio" name="options" id="option1" checked>Active </label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option2"> Radio </label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option3">Radio </label></div>

Rounded Pill Button

<button type="button" class="btn btn-primary mr-5 rounded-pill mt-4">Primary</button>
<button type="button" class="btn btn-secondary mr-5 rounded-pill mt-4">Secondary</button>
<button type="button" class="btn btn-success mr-5 rounded-pill mt-4">Success</button>
<button type="button" class="btn btn-danger mr-5 rounded-pill mt-4">Danger</button>
<button type="button" class="btn btn-warning mr-5 rounded-pill mt-4">Warning</button>
<button type="button" class="btn btn-info mr-5 rounded-pill mt-4">Info</button>
<button type="button" class="btn btn-light mr-5 rounded-pill mt-4">Light</button>
<button type="button" class="btn btn-dark mr-5 rounded-pill mt-4">Dark</button>
<button type="button" class="btn btn-link mx-1 rounded-pill mt-4">Link</button>

Button With 5px Border

<button type="button" class="btn btn-lg btn btn-outline-primary mr-5 border-5 mt-4">Get Started</button>

<button type="button" class="btn btn btn-outline-primary mr-5 border-5 mt-4">Get Started</button>

<button type="button" class="btn btn-sm btn btn-outline-primary mr-5 border-5 mt-4">Get Starte</button>