Buttons
Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.
Default buttons
Quickly create a general button with several predefined button styles, each serving its own semantic purpose.
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-white">white</button>
<button type="button" class="btn btn-dark">Dark</button>
| Class | Values |
|---|---|
class="btn btn-[Value]" |
primary / success / warning / danger / info / light / dark |
Soft buttons
Quickly create a general button with .btn .btn-soft-.
<button type="button" class="btn btn-soft-primary">Primary</button>
<button type="button" class="btn btn-soft-secondary">Secondary</button>
<button type="button" class="btn btn-soft-info">Info</button>
<button type="button" class="btn btn-soft-success">Success</button>
<button type="button" class="btn btn-soft-danger">Danger</button>
<button type="button" class="btn btn-soft-warning">Warning</button>
<button type="button" class="btn btn-soft-light">Light</button>
<button type="button" class="btn btn-soft-dark">Dark</button>
| Class | Values |
|---|---|
class="btn btn-soft-[Value]" |
primary / success / warning / danger / info / light / dark |
Flush buttons
Quickly create a general button with .btn .btn-flush-.
<button type="button" class="btn btn-flush-primary">Primary</button>
<button type="button" class="btn btn-flush-secondary">Secondary</button>
<button type="button" class="btn btn-flush-info">Info</button>
<button type="button" class="btn btn-flush-success">Success</button>
<button type="button" class="btn btn-flush-danger">Danger</button>
<button type="button" class="btn btn-flush-warning">Warning</button>
<button type="button" class="btn btn-flush-light">Light</button>
<button type="button" class="btn btn-flush-dark">Dark</button>
| Class | Values |
|---|---|
class="btn btn-flush-[Value]" |
primary / success / warning / danger / info / light / dark |
Flush hover
Quickly create a general button with .btn .btn-flush-* .flush-outline-hove/.flush-soft-hover/.btn-animated.
<button type="button" class="btn btn-flush-primary">Default hover</button>
<button type="button" class="btn btn-flush-danger flush-outline-hover">Outline hover</button>
<button type="button" class="btn btn-flush-warning flush-soft-hover">Soft hover</button>
<button type="button" class="btn btn-flush-success btn-animated">Raised hover</button>
<button type="button" class="btn btn-flush-light btn-animated">Raised hover</button>
<button type="button" class="btn btn-flush-dark btn-animated">Raised hover</button>
Animated buttons
use .btn-animated
<button type="button" class="btn btn-primary btn-animated">Button hover</button>
<button type="button" class="btn btn-outline-primary btn-animated">Button hover</button>
<button type="button" class="btn btn-soft-primary btn-animated">Button hover</button>
<button type="button" class="btn btn-flush-primary btn-animated">Button hover</button>
<button type="button" class="btn btn-gradient-primary btn-animated">Button hover</button>
<button type="button" class="btn btn-link btn-animated">Button hover</button>
<button type="button" class="btn btn-success btn-animated">Button hover</button>
Outline buttons
use .btn-outline-*
<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>
| Class | Values |
|---|---|
class="btn btn-outline-[Value]" |
primary / success / warning / danger / info / light / dark |
Rounded button
Create rounded buttons by simply adding .btn-rounded class.
<button type="button" class="btn btn-primary btn-rounded">Primary</button>
<button type="button" class="btn btn-secondary btn-rounded">Secondary</button>
<button type="button" class="btn btn-info btn-rounded">Info</button>
<button type="button" class="btn btn-success btn-rounded">Success</button>
<button type="button" class="btn btn-outline-danger btn-rounded">Danger</button>
<button type="button" class="btn btn-outline-warning btn-rounded">Warning</button>
<button type="button" class="btn btn-outline-light btn-rounded">Light</button>
<button type="button" class="btn btn-outline-dark btn-rounded">Dark</button>
Square button
use.btn-square
<button type="button" class="btn btn-primary btn-square">Primary</button>
<button type="button" class="btn btn-outline-secondary btn-square">Secondary</button>
<button type="button" class="btn btn-gradient-info btn-square">Info</button>
Gradient buttons
Replace the default modifier class with the .btn-gradient-* once to create gradient button.
<button type="button" class="btn btn-gradient-primary">Primary</button>
<button type="button" class="btn btn-gradient-secondary">Secondary</button>
<button type="button" class="btn btn-gradient-info">Info</button>
<button type="button" class="btn btn-gradient-success">Success</button>
<button type="button" class="btn btn-gradient-danger">Danger</button>
<button type="button" class="btn btn-gradient-warning">Warning</button>
<button type="button" class="btn btn-gradient-light">Light</button>
<button type="button" class="btn btn-gradient-dark">Dark</button>
| Class | Values |
|---|---|
class="btn btn-gradient-[Value]" |
primary / success / warning / danger / info / light / dark |
Floating buttons
Quickly create a raised button with .btn-floating.
<button type="button" class="btn btn-primary btn-floating">Primary</button>
<button type="button" class="btn btn-secondary btn-floating">Secondary</button>
<button type="button" class="btn btn-info btn-floating">Info</button>
<button type="button" class="btn btn-success btn-floating">Success</button>
<button type="button" class="btn btn-danger btn-floating">Danger</button>
<button type="button" class="btn btn-warning btn-floating">Warning</button>
<button type="button" class="btn btn-light btn-floating">Light</button>
<button type="button" class="btn btn-white btn-floating">white</button>
<button type="button" class="btn btn-dark btn-floating">Dark</button>
<button type="button" class="btn btn-flush-primary btn-floating">Default hover</button>
<button type="button" class="btn btn-outline-primary btn-floating">Default hover</button>
Link buttons
Quickly create a link button with .btn-link .btn-link-*.
<button type="button" class="btn btn-link">button Link</button>
Sizes
Fancy larger or smaller buttons? Add .btn-xl,.btn-lg,.btn-sm or .btn-xs for additional sizes.
<button class="btn btn-secondary btn-lg">large</button>
<button class="btn btn-secondary">Default</button>
<button class="btn btn-secondary btn-sm">small</button>
<button class="btn btn-secondary btn-xs">mini</button>
Block buttons
Create block level buttons—those that span the full width of a parent—by adding .btn-block.
<button class="btn btn-primary btn-block">Block level Button</button>
<button class="btn btn-secondary btn-block">Block level Button</button>
Disabled State
Make buttons look inactive by adding the disabled boolean attribute to any <button> element. Use .disabled class in link buttons.
<button class="btn btn-primary" disabled>Disabled primary</button>
<button class="btn btn-secondary" disabled>Disabled secondary</button>
<button class="btn btn-info btn-rounded" disabled>Disabled info</button>
<button class="btn btn-success btn-rounded" disabled>Disabled success</button>
<a href="#" class="btn btn-link disabled">Disabled Link</a>
Dropdown & dropup buttons
Any single button can be turned into a dropdown toggle with some markup changes. For dropup button, trigger dropdown menus by adding .dropup to the parent element.
<div class="btn-group">
<div class="dropdown">
<button aria-expanded="false" data-bs-toggle="dropdown" class="btn btn-secondary dropdown-toggle" type="button">Dropdown</button>
<div role="menu" class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
</div>
<div class="btn-group">
<div class="dropup">
<button aria-expanded="false" data-bs-toggle="dropdown" class="btn btn-secondary dropdown-toggle " type="button">Dropup</button>
<div role="menu" class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
</div>
<div class="btn-group">
<div class="dropleft">
<button aria-expanded="false" data-bs-toggle="dropdown" class="btn btn-secondary dropdown-toggle" type="button">Dropleft</button>
<div role="menu" class="dropdown-menu dropdown-menu-start">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
</div>
<div class="btn-group">
<div class="dropright">
<button aria-expanded="false" data-bs-toggle="dropdown" class="btn btn-secondary dropdown-toggle " type="button">Dropright</button>
<div role="menu" class="dropdown-menu dropdown-menu-end">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
</div>
<div class="btn-group">
<div class="dropdown">
<button class="btn btn-link btn-wth-icon dropdown-toggle" aria-expanded="false" data-bs-toggle="dropdown"><span><span class="icon"><span class="feather-icon"><i data-feather="moon"></i></span></span></span></button>
<div role="menu" class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
</div>
<div class="btn-group">
<div class="dropdown">
<button class="btn btn-secondary btn-wth-icon dropdown-toggle" aria-expanded="false" data-bs-toggle="dropdown"><span><span class="icon"><span class="feather-icon"><i data-feather="user"></i></span></span></span></button>
<div role="menu" class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
</div>
<div class="btn-group">
<button type="button" class="btn btn-secondary">Split dropdown</button>
<button type="button" class="btn 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="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
Buttons with Icons
Quickly create a Icon button with .btn .btn-* .btn-wth-icon .icon-leftor.btn .btn-* .btn-wth-icon .icon-right
<button class="btn btn-primary"><span><span class="icon"><span class="feather-icon"><i data-feather="moon"></i></span></span><span>Icon Button</span></span></button>
<button class="btn btn-primary"><span><span class="icon"><i class="fa fa-bell"></i></span><span>Icon Button</span></span></button>
<button class="btn btn-primary"><span><span>Icon Button</span><span class="icon"><i class="fa fa-bell"></i></span></span></button>
<button class="btn btn-outline-primary"><span><span class="icon"><span class="feather-icon"><i data-feather="moon"></i></span></span><span>Icon Button</span></span></button>
<button class="btn btn-outline-primary"><span><span class="icon"><i class="fa fa-bell"></i></span><span>Icon Button</span></span></button>
<button class="btn btn-outline-primary"><span><span>Icon Button</span><span class="icon"><i class="fa fa-bell"></i></span></span></button>
Buttons with Icons sizes
Quickly create a general button with several predefined button styles, each serving its own semantic purpose.
<button class="btn btn-secondary btn-lg">large</button>
<button class="btn btn-secondary">Default</button>
<button class="btn btn-secondary btn-sm">small</button>
<button class="btn btn-secondary btn-xs">mini</button>
Icons buttons
Quickly create a icon button with .btn .btn-icon
<div class="hstack flex-wrap gap-3 p-4 pt-3 pb-0">
<button class="btn btn-icon btn-primary btn-lg"><span class="icon"><span class="feather-icon"><i data-feather="grid"></i></span></span></button>
<button class="btn btn-icon btn-rounded btn-danger"><span class="icon"><span class="feather-icon"><i data-feather="user"></i></span></span></button>
<button class="btn btn-icon btn-primary btn-sm"><span class="icon"><span class="feather-icon"><i data-feather="grid"></i></span></span></button>
<button class="btn btn-icon btn-rounded btn-danger btn-xs"><span class="icon"><span class="feather-icon"><i data-feather="grid"></i></span></span></button>
</div>
<div class="hstack flex-wrap gap-3 p-4 pt-3 pb-0">
<button class="btn btn-icon btn-outline-primary btn-lg"><span class="icon"><i class="fa fa-bell"></i></span></button>
<button class="btn btn-icon btn-rounded btn-outline-danger"><span class="icon"><i class="fa fa-bell"></i></span></button>
<button class="btn btn-icon btn-outline-primary btn-sm"><span class="icon"><i class="fa fa-bell"></i></span></button>
<button class="btn btn-icon btn-rounded btn-outline-danger btn-xs"><span class="icon"><i class="fa fa-bell"></i></span></button>
</div>
<div class="hstack flex-wrap gap-3 p-4 pt-3 pb-0">
<button class="btn btn-icon btn-soft-primary btn-lg"><span class="icon"><i class="fa fa-bell"></i></span></button>
<button class="btn btn-icon btn-rounded btn-soft-danger"><span class="icon"><i class="fa fa-bell"></i></span></button>
<button class="btn btn-icon btn-soft-primary btn-sm"><span class="icon"><i class="fa fa-bell"></i></span></button>
<button class="btn btn-icon btn-rounded btn-soft-danger btn-xs"><span class="icon"><i class="fa fa-bell"></i></span></button>
</div>
<div class="hstack flex-wrap gap-3 p-4 pt-3 pb-0">
<button class="btn btn-icon btn-flush-primary btn-lg"><span class="icon"><i class="fa fa-bell"></i></span></button>
<button class="btn btn-icon btn-flush-danger"><span class="icon"><i class="fa fa-bell"></i></span></button>
<button class="btn btn-icon btn-flush-primary btn-sm"><span class="icon"><i class="fa fa-bell"></i></span></button>
<button class="btn btn-icon btn-flush-danger btn-xs"><span class="icon"><i class="fa fa-bell"></i></span></button>
</div>
<div class="hstack flex-wrap gap-3 p-4 pt-3 pb-0">
<button class="btn btn-icon btn-rounded btn-flush-primary btn-lg"><span class="icon"><i class="fa fa-bell"></i></span></button>
<button class="btn btn-icon btn-rounded btn-rounded btn-flush-danger"><span class="icon"><i class="fa fa-bell"></i></span></button>
<button class="btn btn-icon btn-rounded btn-flush-primary btn-sm"><span class="icon"><i class="fa fa-bell"></i></span></button>
<button class="btn btn-icon btn-rounded btn-flush-danger btn-xs"><span class="icon"><i class="fa fa-bell"></i></span></button>
</div>
<div class="hstack flex-wrap gap-3 p-4 pt-3 pb-0">
<button class="btn btn-icon btn-rounded btn-flush-primary flush-soft-hover btn-lg"><span class="icon"><i class="fa fa-bell"></i></span></button>
<button class="btn btn-icon btn-rounded btn-rounded btn-flush-danger flush-soft-hover"><span class="icon"><i class="fa fa-bell"></i></span></button>
<button class="btn btn-icon btn-rounded btn-flush-primary flush-soft-hover btn-sm"><span class="icon"><i class="fa fa-bell"></i></span></button>
<button class="btn btn-icon btn-rounded btn-flush-danger flush-soft-hover btn-xs"><span class="icon"><i class="fa fa-bell"></i></span></button>
</div>
<div class="hstack flex-wrap gap-3 p-4 pt-3 pb-0">
<button class="btn btn-floating btn-icon btn-outline-primary btn-lg"><span class="icon"><i class="fa fa-bell"></i></span></button>
<button class="btn btn-floating btn-icon btn-rounded btn-danger"><span class="icon"><i class="fa fa-bell"></i></span></button>
<button class="btn btn-floating btn-icon btn-soft-primary btn-sm"><span class="icon"><i class="fa fa-bell"></i></span></button>
<button class="btn btn-floating btn-icon btn-rounded btn-flush-danger btn-xs"><span class="icon"><i class="fa fa-bell"></i></span></button>
</div>
<div class="hstack flex-wrap gap-3 p-4 pt-3">
<button class="btn btn-icon btn-outline-primary btn-animated btn-lg"><span class="icon"><i class="fa fa-bell"></i></span></button>
<button class="btn btn-icon btn-rounded btn-danger btn-animated"><span class="icon"><i class="fa fa-bell"></i></span></button>
<button class="btn btn-icon btn-soft-primary btn-animated btn-sm"><span class="icon"><i class="fa fa-bell"></i></span></button>
<button class="btn btn-icon btn-rounded btn-flush-danger btn-animated btn-xs"><span class="icon"><i class="fa fa-bell"></i></span></button>
</div>
Custom Buttons with Icons
use .btn .btn-custom .btn-[value]
<button class="btn btn-custom btn-primary btn-lg"> <span><span class="icon"><span class="feather-icon"><i data-feather="moon"></i></span> </span><span>Buy Jampack</span></span></button>
<button class="btn btn-custom btn-secondary btn-rounded"> <span><span>Know More</span> <span class="icon"><span class="feather-icon"><i data-feather="arrow-right-circle"></i></span></span> </span>
</button>
<button class="btn btn-custom btn-dark btn-wth-iconbtn-rounded btn-lg"><span><span>View all demos</span> <span class="icon"><span class="feather-icon"><i data-feather="arrow-right"></i></span></span> </span>
</button>
<button class="btn btn-custom btn-warning btn-rounded btn-sm"><span><span>settings</span> <span class="icon"><i class="fa fa-times"></i> </span></span></button>
<button class="btn btn-custom btn-success icon-wthot-bg btn-rounded"><span><span>Next</span><span class="icon"><i class="fa fa-angle-right"></i> </span></span></button>
<button class="btn btn-custom btn-danger icon-wthot-bg btn-sm"><span><span class="icon"><i class="fa fa-exclamation-triangle"></i> </span><span>caution</span></span></button>
<button class="btn btn-custom btn-danger icon-wthot-bg btn-xs"><span><span class="icon"><i class="fa fa-exclamation-triangle"></i> </span><span>caution</span></span></button>
<button class="btn btn-custom btn-info btn-block"><span> <span class="icon"><i class="fab fa-facebook"></i> </span><span>Login with facebook</span></span></button>
<button class="btn btn-custom btn-primary btn-block"> <span> <span class="icon"><i class="fab fa-twitter"></i> </span><span>Login with Twitter</span></span></button>
<button class="btn btn-custom btn-danger btn-block"> <span><span class="icon"><i class="fa fa-envelope"></i> </span><span>Login with gmail</span></span></button>
Social buttons
Social buttons are same as icon buttons with .btn .btn-social.
<button class="btn btn-social btn-social-facebook">facebook</button>
<button class="btn btn-icon btn-social btn-social-facebook"><span class="icon"><i class="fab fa-facebook"></i></span></button>
<button class="btn btn-social btn-social-twitter">twitter</button>
<button class="btn btn-icon btn-social btn-social-twitter"><span class="icon"><i class="fab fa-twitter"></i></span></button>
<button class="btn btn-social btn-social-linkedin">linkedin</button>
<button class="btn btn-icon btn-social btn-social-linkedin"><span class="icon"><i class="fab fa-linkedin"></i></span></button>
<button class="btn btn-social btn-social-github">github</button>
<button class="btn btn-icon btn-social btn-social-github"><span class="icon"><i class="fab fa-github"></i></span></button>
<button class="btn btn-social btn-social-youtube">youtube</button>
<button class="btn btn-icon btn-social btn-social-youtube"><span class="icon"><i class="fab fa-youtube"></i></span></button>
<button class="btn btn-social btn-social-gplus">google plus</button>
<button class="btn btn-icon btn-social btn-social-gplus"><span class="icon"><i class="fab fa-google-plus"></i></span></button>
<button class="btn btn-social btn-social-instagram">instagram</button>
<button class="btn btn-icon btn-social btn-social-instagram"><span class="icon"><i class="fab fa-instagram"></i></span></button>
<button class="btn btn-social btn-social-dribbble">dribbble</button>
<button class="btn btn-icon btn-social btn-social-dribbble"><span class="icon"><i class="fab fa-dribbble"></i></span></button>
<button class="btn btn-social btn-social-behance">behance</button>
<button class="btn btn-icon btn-social btn-social-behance"><span class="icon"><i class="fab fa-behance"></i></span></button>
<button class="btn btn-social btn-social-tumblr">tumblr</button>
<button class="btn btn-icon btn-social btn-social-tumblr"><span class="icon"><i class="fab fa-tumblr"></i></span></button>
<button class="btn btn-social btn-social-pinterest">pinterest</button>
<button class="btn btn-icon btn-social btn-social-pinterest"><span class="icon"><i class="fab fa-pinterest"></i></span></button>
<button class="btn btn-social btn-social-dropbox">dropbox</button>
<button class="btn btn-icon btn-social btn-social-dropbox"><span class="icon"><i class="fab fa-dropbox"></i></span></button>
<button class="btn btn-social btn-social-skype">skype</button>
<button class="btn btn-icon btn-social btn-social-skype"><span class="icon"><i class="fab fa-skype"></i></span></button>
<button class="btn btn-social btn-social-flickr">flickr</button>
<button class="btn btn-icon btn-social btn-social-flickr"><span class="icon"><i class="fab fa-flickr"></i></span></button>
Badge on buttons
.position-top-end-overflow, .position-top-end-overflow-1.
<button class="btn btn-social btn-social-flickr position-relative">flickr<span class="badge badge-success badge-sm badge-pill position-top-end-overflow">12</span></button>
<button class="btn btn-social btn-social-flickr position-relative">flickr<span class="badge badge-success badge-sm badge-pill position-top-end-overflow">123+</span></button>
<button class="btn btn-social btn-rounded btn-social-flickr position-relative">flickr<span class="badge badge-success badge-sm badge-pill position-top-end-overflow-1">123+</span></button>
<button class="btn btn-social btn-social-flickr position-relative">flickr<span class="badge badge-success badge-sm badge-pill position-bottom-end-overflow">12</span></button>
<a class="btn btn-icon btn-primary position-relative" href="#"><span class="icon"><span class="feather-icon"><i data-feather="bell"></i></span></span><span class="badge badge-success badge-sm badge-pill position-top-end-overflow">12</span></a>
<a class="btn btn-icon btn-primary btn-rounded position-relative" href="#"><span class="icon"><span class="feather-icon"><i data-feather="bell"></i></span></span><span class="badge badge-success badge-sm badge-pill position-top-end-overflow-1">12</span></a>
<a class="btn btn-icon btn-primary position-relative" href="#"><span class="icon"><span class="feather-icon"><i data-feather="bell"></i></span></span><span class="badge badge-success badge-indicator position-top-end-overflow"></span></a>
<a class="btn btn-icon btn-primary btn-rounded position-relative" href="#"><span class="icon"><span class="feather-icon"><i data-feather="bell"></i></span></span><span class="badge badge-success badge-indicator position-top-end-overflow-1"></span></a>
<a class="btn btn-icon btn-flush-primary btn-rounded" href="#">
<span class="icon">
<span class=" position-relative">
<i class="fab fa-github"></i>
<span class="badge badge-success badge-indicator position-top-end-overflow"></span>
</span>
</span>
</a>
Button Group Horizontal
Wrap button with .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 btn-group-rounded" role="group" aria-label="Basic example">
<button type="button" class="btn btn-outline-secondary">today</button>
<button type="button" class="btn btn-outline-secondary">week</button>
<button type="button" class="btn btn-outline-secondary">month</button>
<button type="button" class="btn btn-outline-secondary">quater</button>
<button type="button" class="btn btn-outline-secondary">year</button>
</div>
<div class="btn-group btn-group-rounded" role="group" aria-label="Basic example">
<button type="button" class="btn btn-outline-secondary">1H</button>
<button type="button" class="btn btn-outline-secondary">AR</button>
<button type="button" class="btn btn-outline-secondary">TD</button>
<button type="button" class="btn btn-outline-secondary">2K</button>
<button type="button" class="btn btn-outline-secondary">6M</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 type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Dropdown link</a>
<a class="dropdown-item" href="#">Dropdown link</a>
</div>
</div>
</div>
<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
<div class="btn-group" role="group">
<button type="button" class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Roboto
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Dropdown link</a>
<a class="dropdown-item" href="#">Dropdown link</a>
</div>
</div>
<button type="button" class="btn btn-outline-secondary"><i class="fa fa-user"></i></button>
<button type="button" class="btn btn-outline-secondary"><i class="fa fa-bell"></i></button>
</div>
Sizing
Social buttons are same as icon buttons with social icons. Create many styles using icon button classes.
<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>
<br>
<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>
<br>
<div class="btn-group btn-group-sm" 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>
<br>
<div class="btn-group btn-group-xs" 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>
Button Group Vertical
Wrap button with .btn-group-vertical
<div class="btn-group-vertical" role="group" aria-label="Button group with nested dropdown">
<button type="button" class="btn btn-secondary">button</button>
<button type="button" class="btn btn-secondary">button</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="#">Dropdown link</a>
<a class="dropdown-item" href="#">Dropdown link</a>
</div>
</div>
<button type="button" class="btn btn-secondary">button</button>
<button type="button" class="btn btn-secondary">button</button>
<div class="btn-group" role="group">
<button id="btnGroupDrop2" 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="btnGroupDrop2">
<a class="dropdown-item" href="#">Dropdown link</a>
<a class="dropdown-item" href="#">Dropdown link</a>
</div>
</div>
</div>