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

Primary Secondary Success Info Warning Danger Dark Purple Pink Custom

Add .btn-rounded to default button to get rounded corners.

Primary Secondary Success Info Warning Danger Dark Purple Pink Custom

Use a classes .btn-outline-primary to .btn-outline-custom to quickly create a outline buttons.

Primary Secondary Success Info Warning Danger Dark Purple Pink Custom

Use a classes .btn-outline-primary .btn-rounded to .btn-outline-custom to create a outline buttons.

Primary Secondary Success Info Warning Danger Dark Purple Pink Custom

Use a classes .btn-bordred to quickly create a bordered buttons.

Primary Secondary Success Info Warning Danger Dark Purple Pink Custom

Use a classes .btn-trans to quickly create a bordered buttons.

Primary Secondary Success Info Warning Danger Dark Purple Pink Custom

Create buttons with minimum width by adding add .w-xs, .w-sm, .w-md or .w-lg.

Xs Small Middle Large

Add .btn-lg, .btn-sm, or .btn-xs for additional sizes.

Large button Normal button Small button Very Small button

Add the disabled attribute to <button> buttons.

Info Purple Pink Inverse

Icon only button.

Like Share Launch Cloud Hosting Book Flight Donate Money

Icon only button.

Like Share Launch Cloud Hosting Book Flight Donate Money

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

Block Button Block Button Block Button

Wrap a series of buttons with .btn in .btn-group.