Colors buttons

Use any of the available button classes to quickly create a styled button.

Normal buttons

Diferent size

If You want larger or smaller buttons You can add .btn-lg, .btn-sm, or .btn-xs class.

Button Sizes




Outline and Block Buttons

Create block level buttons or outline buttons, by adding .btn-block or .btn-outline.

Outline buttons

Block buttons

Button dropdowns

Droppdowns buttons are avalible with any color and any size.

Dropdowns

Grouped Buttons

This is a group of buttons, ideal for sytuation where many actions are related to same element.

Button Group



Icon Buttons

To buttons with any color or any size you can add extra icon on the left or the right side.

Commom Icon Buttons

Stared


Toggle buttons Variations

Button groups can act as a radio or a switch or even a single toggle. Below are some examples click to see what happens

Circle Icon Buttons

For buttons you can add .btn-circle to rounded buttons and make it circle.

Circle buttons




Rounded Buttons

You can also add .btn-rounded class to round buttons.

Button Group

Default Primary Success Info Warning Danger Danger

Block rounded with icon button


Bootstrap And Custom Buttons

Bootstrap Button

Bootstrap provides different styles of buttons.To achieve the button styles above, Bootstrap has the following classes .btn, .btn-default, .btn-primary, .btn-success, .btn-info, .btn-warning, .btn-danger, .btn-custon-two etc

Bootstrap Button with Icon

Bootstrap provides different styles of buttons.To achieve the button styles above, Bootstrap has the following classes .btn, .btn-default, .btn-primary, .btn-success, .btn-info, .btn-warning, .btn-danger, .btn-custon-two etc

Bootstrap Button Sizes

Bootstrap provides four button sizes.The classes that define the different sizes are .btn-lg, .btn-md, .btn-sm, .btn-xs

Bootstrap Button Sizes with Icon

Bootstrap provides four button sizes.The classes that define the different sizes are .btn-lg, .btn-md, .btn-sm, .btn-xs

Bootstrap Buttons Rounded

Bootstrap provides different styles of buttons.To achieve the button styles above, Bootstrap has the following classes .btn, .btn-default, .btn-primary, .btn-success, .btn-info, .btn-warning, .btn-danger, .btn-custon-two etc

Bootstrap Buttons Rounded with Icon

Bootstrap provides different styles of buttons.To achieve the button styles above, Bootstrap has the following classes .btn, .btn-default, .btn-primary, .btn-success, .btn-info, .btn-warning, .btn-danger, .btn-custon-two etc

Bootstrap Button Groups

Bootstrap allows you to group a series of buttons together (on a single line) in a button group. Use a div element with class .btn-group to create a button group.

Bootstrap Button Groups With Icon

Bootstrap allows you to group a series of buttons together (on a single line) in a button group. Use a div element with class .btn-group to create a button group.

Nesting Button Groups & Dropdown Menus

Bootstrap allows you to group a series of buttons together (on a single line) in a button group. Use a div element with class .btn-group, .dropdown-toggle to create a button group.

Nesting Button Groups With Icon & Dropdown Menus

Bootstrap allows you to group a series of buttons together (on a single line) in a button group. Use a div element with class .btn-group, .dropdown-toggle to create a button group.

Split Button Dropdowns

Bootstrap provides different styles of buttons. Jump to Split button dropdowns - Similarly, create split button dropdowns with virtually the same markup as single button dropdowns.

Split Button Dropdowns with Icon

Bootstrap provides different styles of buttons. Jump to Split button dropdowns - Similarly, create split button with Icon dropdowns with virtually the same markup as single button dropdowns.

Vertical Button Groups

Bootstrap also supports vertical button groups.Use the class .btn-group-vertical to create a vertical button group.

Vertical Button Groups With Icon

Bootstrap also supports vertical button groups.Use the class .btn-group-vertical to create a vertical button group.

Standard Icon Button Group

These are the different buttons group component

Standard Icon Button Group

These are the different buttons group component