Basic Buttons

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

Outline Buttons

Use a class .btn-outline-* to quickly create a outline button.

Gradient Buttons

This admin template includes 6 predefined gradient colors to use it in buttons. .btn-bg-gradient-x-purple-blue, .btn-gradient-x-purple-red, .btn-gradient-x-blue-green, .btn-gradient-x-orange-yellow, .btn-gradient-x-blue-cyan, .btn-gradient-x-red-pink. YOu can also use round button class .round, and buttons with icons with this.

Gradient Buttons with Glow

You ca also add glow effects to gradient buttons. For that you just required to use .btn-glow class with any one of this gradient colors .btn-bg-gradient-x-purple-blue, .btn-gradient-x-purple-red, .btn-gradient-x-blue-green, .btn-gradient-x-orange-yellow, .btn-gradient-x-blue-cyan, .btn-gradient-x-red-pink

Round Buttons

Use .round class for round buttons.

Round Outline Buttons

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

Buttons with Icon

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

Outline Buttons with Icon

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

Buttons Glow

Use .btn-glow class with any colored button to add button glow.

Outline Buttons Glow

You can use .btn-glow class with outline button to add button glow.

Buttons Shadow

Use .box-shadow-* class with button to add button shadow.

Outline Buttons Shadow

Use .box-shadow-* class with button to add button shadow.

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.

Outline Button Group

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

Icon Buttons

Outline Icon Buttons

Sizes

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

Outline Sizes

Outline buttons with Icons in different sizes

Button Group Sizes

Instead of applying button sizing classes to every button in a group, just add .btn-group-* to each .btn-group.

Button Group Sizes

Outline Button Group with Icons in different sizes

Block buttons

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

Outline Block buttons

To create block outline buttons use .btn-block class.

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

Outline Block buttons

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

Nesting Button group

Nesting Outline Button group

Vertical variation

Make a set of buttons appear vertically.

Vertical variation with different colors

Outline Vertical Variation

Vertical variation with Outlines

Vertical variation with Outlines

Social Buttons

Buttons with built-in loading indicators, effectively bridging the gap between action and feedback.

Social Icon Buttons

Outline Social Icon Button

Navbar Color Options

Layout Options

Sidebar menu Background


Sidebar Background Image
background image
background image
background image
background image

Try Layout Builder