Buttons

  1. Home
  2. Components
  3. Buttons
ChatEmailCalendar

Filled

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

Border

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

Flat

Use .btn-flat-{color} to create a flat button

Gradient

use bg-gradient-{color} create gradient buttons

Relief

Use .btn-relief-{color} to create a relief button

Square buttons

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

Round buttons

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

Text Color

You can change the font color of buttons, using .text-{color}

Icon

Icon Only

You can use .btn-icon. you can create a rounded button by using .rounded-circle with .btn-icon. 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.

Sizes

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

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

Block level buttons

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

Button tags

The .btn classes are designed to be used with the <button> element. However, you can also use these classes on <a> or <input> elements.

Link

Vertical variation

Make a set of buttons appear vertically.

Vertical variation with different colors

Vertical variation with Outlines