dfghj

BUTTONS

We are Small Team of Creative People working together

General Buttons

Use a classes btn btn-success to quickly create a General btn.
<div class="button-group">
<button type="button" class="btn waves-effect waves-light btn-primary">Primary</button>
<button type="button" class="btn waves-effect waves-light btn-secondary">Secondary</button>
<button type="button" class="btn waves-effect waves-light btn-success">Success</button>
<button type="button" class="btn waves-effect waves-light btn-info">Info</button>
<button type="button" class="btn waves-effect waves-light btn-warning">Warning</button>
<button type="button" class="btn waves-effect waves-light btn-danger">Danger</button>
<button type="button" class="btn waves-effect waves-light btn-light">Light</button>
<button type="button" class="btn waves-effect waves-light btn-dark">Dark</button>
</div>

Button Tags

The .btn classes are designed to be used with the .<button> element.
Link
<a class="btn btn-primary" href="#" role="button">Link</a>
<button class="btn btn-primary" type="submit">Button</button>
<input class="btn btn-primary" type="button" value="Input">
<input class="btn btn-primary" type="submit" value="Submit">
<input class="btn btn-primary" type="reset" value="Reset">

Button with outline

Use a classes btn btn-outline-success to quickly create a General btn.
<div class="button-group">
<button type="button" class="btn waves-effect waves-light btn-outline-primary">Primary</button>
<button type="button" class="btn waves-effect waves-light btn-outline-secondary">Secondary</button>
<button type="button" class="btn waves-effect waves-light btn-outline-success">Success</button>
<button type="button" class="btn waves-effect waves-light btn-outline-info">Info</button>
<button type="button" class="btn waves-effect waves-light btn-outline-warning">Warning</button>
<button type="button" class="btn waves-effect waves-light btn-outline-danger">Danger</button>
<button type="button" class="btn waves-effect waves-light btn-outline-light">Light</button>
<button type="button" class="btn waves-effect waves-light btn-outline-dark">Dark</button>
</div>

Rounded Buttons

Use a classes btn btn-rounded btn-success to quickly create a General btn.
<div class="button-group">
<button type="button" class="btn waves-effect waves-light btn-rounded btn-primary">Primary</button>
<button type="button" class="btn waves-effect waves-light btn-rounded btn-secondary">Secondary</button>
<button type="button" class="btn waves-effect waves-light btn-rounded btn-success">Success</button>
<button type="button" class="btn waves-effect waves-light btn-rounded btn-info">Info</button>
<button type="button" class="btn waves-effect waves-light btn-rounded btn-warning">Warning</button>
<button type="button" class="btn waves-effect waves-light btn-rounded btn-danger">Danger</button>
<button type="button" class="btn waves-effect waves-light btn-rounded btn-light">Light</button>
<button type="button" class="btn waves-effect waves-light btn-rounded btn-dark">Dark</button>
</div>

Rounded outlined Buttons

Use a classes btn btn-rounded btn-outline-success to quickly create a General btn.
<div class="button-group">
<button type="button" class="btn waves-effect waves-light btn-rounded btn-outline-primary">Primary</button>
<button type="button" class="btn waves-effect waves-light btn-rounded btn-outline-secondary">Secondary</button>
<button type="button" class="btn waves-effect waves-light btn-rounded btn-outline-success">Success</button>
<button type="button" class="btn waves-effect waves-light btn-rounded btn-outline-info">Info</button>
<button type="button" class="btn waves-effect waves-light btn-rounded btn-outline-warning">Warning</button>
<button type="button" class="btn waves-effect waves-light btn-rounded btn-outline-danger">Danger</button>
<button type="button" class="btn waves-effect waves-light btn-rounded btn-outline-light">Light</button>
<button type="button" class="btn waves-effect waves-light btn-rounded btn-outline-dark">Dark</button>
</div>

Button Sizes

Use a classes btn btn-lg btn-success to quickly create a General btn.
<div class="button-group">
<button type="button" class="btn waves-effect waves-light btn-lg btn-primary">Large .btn-lg </button>
<button type="button" class="btn waves-effect waves-light btn-secondary">Normal .btn</button>
<button type="button" class="btn waves-effect waves-light btn-sm btn-success">Small .btn-sm</button>
<button type="button" class="btn waves-effect waves-light btn-xs btn-info">Tiny .btn-xs</button>
</div>

Button Sizes with rounded

Use a classes btn btn-lg btn-rounded btn-success to create a btn.
<div class="button-group">
<button type="button" class="btn waves-effect waves-light btn-lg btn-rounded btn-primary">Large .btn-lg </button>
<button type="button" class="btn waves-effect waves-light btn-rounded btn-secondary">Normal .btn</button>
<button type="button" class="btn waves-effect waves-light btn-rounded btn-sm btn-success">Small .btn-sm</button>
<button type="button" class="btn waves-effect waves-light btn-rounded btn-xs btn-info">Tiny .btn-xs</button>
</div>

Block buttons

Use a classes btn btn-block btn-success to quickly create a General btn.
<div class="row button-group">
<div class="col-lg-2 col-md-4">
<button type="button" class="btn waves-effect waves-light btn-block btn-info">Info</button>
</div>
<div class="col-lg-2 col-md-4">
<button type="button" class="btn waves-effect waves-light btn-block btn-success">Success</button>
</div>
<div class="col-lg-2 col-md-4">
<button type="button" class="btn waves-effect waves-light btn-block btn-primary">Primary</button>
</div>
<div class="col-lg-2 col-md-4">
<button type="button" class="btn waves-effect waves-light btn-block btn-danger">Danger</button>
</div>
<div class="col-lg-2 col-md-4">
<button type="button" class="btn waves-effect waves-light btn-block btn-secondary">Secondary</button>
</div>
<div class="col-lg-2 col-md-4">
<button type="button" class="btn waves-effect waves-light btn-block btn-warning">Warning</button>
</div>
<div class="col-lg-2 col-md-4">
<button type="button" class="btn waves-effect waves-light btn-block btn-light">Light</button>
</div>
<div class="col-lg-2 col-md-4">
<button type="button" class="btn waves-effect waves-light btn-block btn-dark">Dark</button>
</div>
</div>

Rounded Block buttons

Use a classes btn btn-block btn-success to quickly create a General btn.
<div class="row button-group">
<div class="col-lg-2 col-md-4">
<button type="button" class="btn btn-rounded btn-block btn-info">Info</button>
</div>
<div class="col-lg-2 col-md-4">
<button type="button" class="btn btn-rounded btn-block btn-success">Success</button>
</div>
<div class="col-lg-2 col-md-4">
<button type="button" class="btn btn-rounded btn-block btn-primary">Primary</button>
</div>
<div class="col-lg-2 col-md-4">
<button type="button" class="btn btn-rounded btn-block btn-danger">Danger</button>
</div>
<div class="col-lg-2 col-md-4">
<button type="button" class="btn btn-rounded btn-block btn-secondary">Secondary</button>
</div>
<div class="col-lg-2 col-md-4">
<button type="button" class="btn btn-rounded btn-block btn-warning">Warning</button>
</div>
<div class="col-lg-2 col-md-4">
<button type="button" class="btn btn-rounded btn-block btn-light">Light</button>
</div>
<div class="col-lg-2 col-md-4">
<button type="button" class="btn btn-rounded btn-block btn-dark">Dark</button>
</div>
</div>

Block outline buttons

Use a classes btn btn-block btn-outline-success to quickly create a General btn.
<div class="row button-group">
<div class="col-lg-2 col-md-4">
<button type="button" class="btn btn-block btn-outline-info">Info</button>
</div>
<div class="col-lg-2 col-md-4">
<button type="button" class="btn btn-block btn-outline-success">Success</button>
</div>
<div class="col-lg-2 col-md-4">
<button type="button" class="btn btn-block btn-outline-primary">Primary</button>
</div>
<div class="col-lg-2 col-md-4">
<button type="button" class="btn btn-block btn-outline-danger">Danger</button>
</div>
<div class="col-lg-2 col-md-4">
<button type="button" class="btn btn-block btn-outline-secondary">Secondary</button>
</div>
<div class="col-lg-2 col-md-4">
<button type="button" class="btn btn-block btn-outline-warning">Warning</button>
</div>
<div class="col-lg-2 col-md-4">
<button type="button" class="btn btn-block btn-outline-light">Light</button>
</div>
<div class="col-lg-2 col-md-4">
<button type="button" class="btn btn-block btn-outline-dark">Dark</button>
</div>
</div>

Rounded outline Block buttons

Use a classes btn btn-block btn-outline-success to quickly create a General btn.
<div class="row button-group">
<div class="col-lg-2 col-md-4">
<button type="button" class="btn btn-rounded btn-block btn-outline-info">Info</button>
</div>
<div class="col-lg-2 col-md-4">
<button type="button" class="btn btn-rounded btn-block btn-outline-success">Success</button>
</div>
<div class="col-lg-2 col-md-4">
<button type="button" class="btn btn-rounded btn-block btn-outline-primary">Primary</button>
</div>
<div class="col-lg-2 col-md-4">
<button type="button" class="btn btn-rounded btn-block btn-outline-danger">Danger</button>
</div>
<div class="col-lg-2 col-md-4">
<button type="button" class="btn btn-rounded btn-block btn-outline-secondary">Secondary</button>
</div>
<div class="col-lg-2 col-md-4">
<button type="button" class="btn btn-rounded btn-block btn-outline-warning">Warning</button>
</div>
<div class="col-lg-2 col-md-4">
<button type="button" class="btn btn-rounded btn-block btn-outline-light">Light</button>
</div>
<div class="col-lg-2 col-md-4">
<button type="button" class="btn btn-rounded btn-block btn-outline-dark">Dark</button>
</div>
</div>

Large Block buttons

Use a classes btn btn-block btn-lg btn-success to quickly create a General btn.
<div class="row button-group">
<div class="col-lg-2 col-md-4">
<button type="button" class="btn btn-block btn-lg btn-info">Info</button>
</div>
<div class="col-lg-2 col-md-4">
<button type="button" class="btn btn-block btn-lg btn-success">Success</button>
</div>
<div class="col-lg-2 col-md-4">
<button type="button" class="btn btn-block btn-lg btn-primary">Primary</button>
</div>
<div class="col-lg-2 col-md-4">
<button type="button" class="btn btn-block btn-lg btn-danger">Danger</button>
</div>
<div class="col-lg-2 col-md-4">
<button type="button" class="btn btn-block btn-lg btn-secondary">Second</button>
</div>
<div class="col-lg-2 col-md-4">
<button type="button" class="btn btn-block btn-lg btn-warning">Warning</button>
</div>
<div class="col-lg-2 col-md-4">
<button type="button" class="btn btn-block btn-lg btn-light">Light</button>
</div>
<div class="col-lg-2 col-md-4">
<button type="button" class="btn btn-block btn-lg btn-dark">Dark</button>
</div>
</div>

Button with icon

Use a classes btn btn-success & i class ="fa fa-heart" to quickly create a General btn.
<button type="button" class="btn btn-primary"><i class="fa fa-check"></i> Primary</button>
<button type="button" class="btn btn-secondary">Secondary <i class="fa fa-heart"></i></button>
<button type="button" class="btn btn-success"><i class="fa fa-check"></i> Success</button>
<button type="button" class="btn btn-info"><i class="fa fa-heart"></i> Info</button>
<button type="button" class="btn btn-warning"><i class="fa fa-heart"></i> Warning</button>
<button type="button" class="btn btn-danger"><i class="fa fa-heart"></i> Danger</button>
<button type="button" class="btn btn-light"><i class="fa fa-heart"></i> Light</button>
<button type="button" class="btn btn-dark"><i class="fa fa-heart"></i> Dark</button>
<button class="btn btn-primary waves-effect waves-light" type="button"><span class="btn-label"><i class="far fa-envelope"></i></span>Mail</button>
<button class="btn btn-secondary waves-effect waves-light" type="button"><span class="btn-label"><i class="fa fa-check"></i></span>Check</button>
<button class="btn btn-info waves-effect waves-light" type="button"><span class="btn-label"><i class="fa fa-heart"></i></span>Heart</button>
<button class="btn btn-warning waves-effect waves-light" type="button"><span class="btn-label"><i class="fa fa-envelope-o"></i></span>Mail</button>
<button class="btn btn-danger waves-effect waves-light" type="button"><span class="btn-label"><i class="fa fa-heart"></i></span>Heart</button>
<button class="btn btn-light waves-effect waves-light" type="button"><span class="btn-label"><i class="fa fa-heart"></i></span>Heart</button>
<button class="btn btn-dark waves-effect waves-light" type="button"><span class="btn-label"><i class="fa fa-heart"></i></span>Heart</button>
<button type="button" class="btn btn-primary btn-rounded"><i class="fa fa-check"></i> Primary</button>
<button type="button" class="btn btn-secondary btn-rounded">Secondary <i class="fa fa-heart"></i></button>
<button type="button" class="btn btn-success btn-rounded"><i class="fa fa-check"></i> Success</button>
<button type="button" class="btn btn-info btn-rounded"><i class="fa fa-heart"></i> Info</button>
<button type="button" class="btn btn-warning btn-rounded"><i class="fa fa-heart"></i> Warning</button>
<button type="button" class="btn btn-danger btn-rounded"><i class="fa fa-heart"></i> Danger</button>
<button type="button" class="btn btn-light btn-rounded"><i class="fa fa-heart"></i> Danger</button>
<button type="button" class="btn btn-dark btn-rounded"><i class="fa fa-heart"></i> Danger</button>
<button type="button" class="btn btn-outline-primary"><i class="fa fa-check"></i> Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary <i class="fa fa-heart"></i></button>
<button type="button" class="btn btn-outline-success"><i class="fa fa-check"></i> Success</button>
<button type="button" class="btn btn-outline-info"><i class="fa fa-heart"></i> Info</button>
<button type="button" class="btn btn-outline-warning"><i class="fa fa-heart"></i> Warning</button>
<button type="button" class="btn btn-outline-danger"><i class="fa fa-heart"></i> Danger</button>
<button type="button" class="btn btn-outline-light"><i class="fa fa-heart"></i> Light</button>
<button type="button" class="btn btn-outline-dark"><i class="fa fa-heart"></i> Dark</button>
<button class="btn btn-outline-primary waves-effect waves-light" type="button"><span class="btn-label"><i class="far fa-envelope"></i></span>Mail</button>
<button class="btn btn-outline-secondary waves-effect waves-light" type="button"><span class="btn-label"><i class="fa fa-check"></i></span>Check</button>
<button class="btn btn-outline-info waves-effect waves-light" type="button"><span class="btn-label"><i class="fa fa-heart"></i></span>Heart</button>
<button class="btn btn-outline-warning waves-effect waves-light" type="button"><span class="btn-label"><i class="far fa-envelope"></i></span>Mail</button>
<button class="btn btn-outline-danger waves-effect waves-light" type="button"><span class="btn-label"><i class="fa fa-heart"></i></span>Heart</button>
<button class="btn btn-outline-light waves-effect waves-light" type="button"><span class="btn-label"><i class="fa fa-heart"></i></span>Heart</button>
<button class="btn btn-outline-dark waves-effect waves-light" type="button"><span class="btn-label"><i class="fa fa-heart"></i></span>Heart</button>
<button type="button" class="btn btn-outline-primary btn-rounded"><i class="fa fa-check"></i> Primary</button>
<button type="button" class="btn btn-outline-secondary btn-rounded">Secondary <i class="fa fa-heart"></i></button>
<button type="button" class="btn btn-outline-success btn-rounded"><i class="fa fa-check"></i> Success</button>
<button type="button" class="btn btn-outline-info btn-rounded"><i class="fa fa-heart"></i> Info</button>
<button type="button" class="btn btn-outline-warning btn-rounded"><i class="fa fa-heart"></i> Warning</button>
<button type="button" class="btn btn-outline-danger btn-rounded"><i class="fa fa-heart"></i> Danger</button>
<button type="button" class="btn btn-outline-light btn-rounded"><i class="fa fa-heart"></i> Light</button>
<button type="button" class="btn btn-outline-dark btn-rounded"><i class="fa fa-heart"></i> Dark</button>
<div class="btn-group">
<button type="button" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0)">Action</a>
<a class="dropdown-item" href="javascript:void(0)">Another action</a>
<a class="dropdown-item" href="javascript:void(0)">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="javascript:void(0)">Separated link</a>
</div>
</div>
<div class="btn-group">
<button type="button" class="btn btn-success">Action</button>
<button type="button" class="btn btn-success dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0)">Action</a>
<a class="dropdown-item" href="javascript:void(0)">Another action</a>
<a class="dropdown-item" href="javascript:void(0)">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="javascript:void(0)">Separated link</a>
</div>
</div>

Large button dropdowns

Use a classes to create instant button
<div class="btn-group">
<button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Large button
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0)">Action</a>
<a class="dropdown-item" href="javascript:void(0)">Another action</a>
<a class="dropdown-item" href="javascript:void(0)">Something else here</a>
</div>
</div>
<div class="btn-group">
<button class="btn btn-secondary btn-lg" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Large button
</button>
<button type="button" class="btn btn-lg btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0)">Action</a>
<a class="dropdown-item" href="javascript:void(0)">Another action</a>
<a class="dropdown-item" href="javascript:void(0)">Something else here</a>
</div>
</div>

Animated Drop downs

Give class to the button animated flipInX, flipInY, lightSpeedIn, slideInUp use any animations class
<div class="btn-group">
<button type="button" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action
</button>
<div class="dropdown-menu animated flipInX">
<a class="dropdown-item" href="javascript:void(0)">Action</a>
<a class="dropdown-item" href="javascript:void(0)">Another action</a>
<a class="dropdown-item" href="javascript:void(0)">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="javascript:void(0)">Separated link</a>
</div>
</div>

Animated Drop downs with icon

Give class to the button animated flipInX, flipInY, lightSpeedIn, slideInUp use any animations class
<div class="btn-group">
<button type="button" class="btn btn-info dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="ti-trash"></i>
</button>
<div class="dropdown-menu animated flipInY">
<a class="dropdown-item" href="javascript:void(0)">Action</a>
<a class="dropdown-item" href="javascript:void(0)">Another action</a>
<a class="dropdown-item" href="javascript:void(0)">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="javascript:void(0)">Separated link</a>
</div>
</div>

Circle buttons

Use a classes btn btn-circle btn-success to quickly create a General btn.


Circle Large buttons

Use a classes btn btn-circle btn-lg-b btn-success to quickly create a General btn.


Circle xtra Large buttons

Use a classes btn btn-circle btn-xl-b btn-success to quickly create a General btn.
<button type="button" class="btn btn-secondary btn-circle"><i class="fa fa-check"></i> </button>
<button type="button" class="btn btn-secondary btn-circle btn-lg"><i class="fa fa-check"></i> </button>
<button type="button" class="btn btn-secondary btn-circle btn-xl"><i class="fa fa-check"></i> </button>

Group buttons

Wrap a series of buttons with .btn in .btn-group

Button toolbar pagination

Wrap a series of buttons with .btn in .btn-group
<div class="btn-group" role="group" aria-label="Basic example">
<button type="button" class="btn btn-secondary">Left</button>
<button type="button" class="btn btn-secondary">Middle</button>
<button type="button" class="btn btn-secondary">Right</button>
</div>
<div class="btn-group" role="group" aria-label="Basic example">
<button type="button" class="btn btn-info"><i class="fa fa-align-left"></i></button>
<button type="button" class="btn btn-info"><i class="fa fa-align-justify"></i></button>
<button type="button" class="btn btn-info"><i class="fa fa-align-right"></i></button>
</div>
<div class="btn-group" role="group" aria-label="Basic example">
<button type="button" class="btn btn-success"><i class="fa fa-fast-backward"></i></button>
<button type="button" class="btn btn-success"><i class="fa fa-play"></i></button>
<button type="button" class="btn btn-success"><i class="fa fa-fast-forward"></i></button>
</div>
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group mr-2" role="group" aria-label="First group">
<button type="button" class="btn btn-secondary disabled">1</button>
<button type="button" class="btn btn-info">2</button>
<button type="button" class="btn btn-secondary">3</button>
<button type="button" class="btn btn-secondary">4</button>
</div>
<div class="btn-group mr-2" role="group" aria-label="Second group">
<button type="button" class="btn btn-secondary">5</button>
<button type="button" class="btn btn-secondary">6</button>
<button type="button" class="btn btn-secondary">7</button>
</div>
<div class="btn-group" role="group" aria-label="Third group">
<button type="button" class="btn btn-secondary">8</button>
</div>
</div>

Button Toolbar with Input Group

Button Toolbar with Jutify Content Input Group

<div class="btn-toolbar mb-3" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group mr-2" role="group" aria-label="First group">
<button type="button" class="btn btn-secondary"><i class="ti-move"></i></button>
<button type="button" class="btn btn-secondary"><i class="ti-fullscreen"></i></button>
<button type="button" class="btn btn-secondary"><i class="ti-target"></i></button>
<button type="button" class="btn btn-secondary"><i class="ti-trash"></i></button>
</div>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text" id="btnGroupAddon"><i class="ti-email"></i></div>
</div>
<input type="text" class="form-control" placeholder="Subscribe Now" aria-label="Input group example" aria-describedby="btnGroupAddon">
</div>
</div>
<div class="btn-toolbar justify-content-between" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group" role="group" aria-label="First group">
<button type="button" class="btn btn-secondary"><i class="ti-move"></i></button>
<button type="button" class="btn btn-secondary"><i class="ti-fullscreen"></i></button>
<button type="button" class="btn btn-secondary"><i class="ti-target"></i></button>
<button type="button" class="btn btn-secondary"><i class="ti-trash"></i></button>
</div>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text" id="btnGroupAddon2"><i class="ti-email"></i></div>
</div>
<input type="text" class="form-control" placeholder="Subscribe Now" aria-label="Input group example" aria-describedby="btnGroupAddon2">
</div>
</div>

Group buttons sizing

Wrap a series of buttons with .btn in .btn-group

Nesting

creat with below code
<div class="btn-group btn-group-lg" role="group" aria-label="Basic example">
<button type="button" class="btn btn-secondary">Left</button>
<button type="button" class="btn btn-secondary">Middle</button>
<button type="button" class="btn btn-secondary">Right</button>
</div>
<div class="btn-group" role="group" aria-label="Basic example">
<button type="button" class="btn btn-info"><i class="fa fa-align-left"></i></button>
<button type="button" class="btn btn-info"><i class="fa fa-align-justify"></i></button>
<button type="button" class="btn btn-info"><i class="fa fa-align-right"></i></button>
</div>
<div class="btn-group btn-group-sm" role="group" aria-label="Basic example">
<button type="button" class="btn btn-success"><i class="fa fa-fast-backward"></i></button>
<button type="button" class="btn btn-success"><i class="fa fa-play"></i></button>
<button type="button" class="btn btn-success"><i class="fa fa-fast-forward"></i></button>
</div>
<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
<button type="button" class="btn btn-secondary">1</button>
<button type="button" class="btn btn-secondary">2</button>
<div class="btn-group" role="group">
<button id="btnGroupDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</button>
<div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
<a class="dropdown-item" href="javascript:void(0)">Dropdown link</a>
<a class="dropdown-item" href="javascript:void(0)">Dropdown link</a>
</div>
</div>
</div>

Vertical buttons

creat vertical button with class of .btn-group-vertical

Direction of the Dropdown

Trigger dropdown menus above elements by adding .dropup to the parent element.

Menu Alignment

Add .dropdown-menu-right to a .dropdown-menu to right align the dropdown menu.

Responsive Alignment

Different Menu Content

Dropdown Options

Toggle States [Button Plugin]

Add data-bs-toggle="button" to toggle a button's active state. If you're pre-toggling a button, you must manually add the .active class and aria-pressed="true" to the button.

Checkbox buttons with Click[Checked] event

Note that pre-checked buttons require you to manually add the .active class to the input's label.

Radio buttons with Click[Checked] event

Note that pre-checked buttons require you to manually add the .active class to the input's label.