--- layout: default title: "Button-group - Sleek Admin Dashboard Template" bodyClass: "header-fixed sidebar-fixed sidebar-dark header-light" parent: "ui-elements" sub_parent: "components" activePage: "button-group" ---

# Button Group

{% include breadcrumb.htm %}

## Default Button Group

Wrap a series of buttons with `.btn` in `.btn-group`. Read Bootstrap documentaion More Details.

## Outline Square Button Group

For Outline Square Buttons With Dropdown add class `.btn-outline-primary`

## Icon Button Group

For Icon Button Group add `<i class="mdi mdi-alert"></i>` inside `< button class="btn btn-primary">` .Get classes for material icon here.

## Icon Button Group

For Icon Button Group add `<i class="mdi mdi-alert"></i>` inside `< button class="btn btn-outline-primary">` . Get classes for material icon here.

## Button Toolbar pagination

Combine sets of button groups into button toolbars for more complex components. Read Bootstrap documentaion for more details.

## Outline Button Toolbar pagination

For Outline Button Toolbar pagination add class `.btn-outline-primary`.

## Nesting

Place a `.btn-group` within another `.btn-group` when you want dropdown menus mixed with a series of buttons. Read Bootstrap documentaion for more details.

## Nesting Outline Button

For Outline Button add class `.btn-outline-primary`.

## Vertical Buttons

Make a set of buttons appear vertically. Read Bootstrap documentaion More Details.

## Vertical Outline Buttons

For Vertical Outline Buttons add class `.btn-outline-primary`.