Basic Buttons

Default

Bootstrap includes six predefined button styles, each serving its own semantic purpose.

Primary Secondary Success Info Warning Danger Light Dark

---

Rounded

Use a class .round with .btn class to create round button.

Primary Secondary Success Info Warning Danger Light Dark

Outline Buttons

Default

Use a class .btn-outline-{color} to quickly create a outline button.

Primary Secondary Success Info Warning Danger Light Dark

---

Rounded

Use a class .round with outline button class to create round outline button.

Primary Secondary Success Info Warning Danger Light Dark

Shadow buttons

Use a class .shadow with button classes to create shadow button.

Primary Success Info Warning Danger Light Dark

Glow buttons

Use a class .glow with button classes to create glow button.

Primary Success Info Warning Danger Light Dark

Light Style

Bootstrap includes six predefined button styles, each serving its own semantic purpose.

Primary Secondary Success Info Warning Danger

Buttons with Icon

Home Star Done Favorite

Icon Only

You can only use .btn-icon when you only want icon in your button

Basic Button group

Group a series of buttons together on a single line with the button group. Wrap a series of buttons with .btn in .btn-group.

Left Middle Right

Sizes

Buttons

Add .btn-lg or .btn-sm for Fancy larger or smaller buttons size.

Large Default Small

Add .btn-lg or .btn-sm with .btn-outline-* for outline btn in diffrent sizes

Large Default Small

---

Button Groups

Add .btn-group-lg for larger button group size.

Schedule Publish

Add .btn-group-sm for smaller button group size.

Male Female

Block level buttons

Create block level buttons—those that span the full width of a parent—by adding .btn-block.

Block level button

Block level button

Toggle

Single Toggle

Bootstrap includes six predefined button styles, each serving its own semantic purpose.

Toggle

---

Radio

Radio 1(Active) Radio 2 Radio 3

Checkbox

Check 1 Check 2 Check 3

Vertical variation

Make a set of buttons appear vertically.

Button Button Button Button Button

Vertical variation with different colors

Primary Success Danger Info Warning

Vertical variation with Outlines

Button Button Button Button Button