Bootstrap Buttons
Different classes are available in Bootstrap for styling the buttons
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</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-info">Info</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-link">Link</button>
​
Bootstrap Outline Buttons
You can also create outline buttons by replacing the button modifier classes, like this:
Ex.
<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-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-info">Info</button>
<button type="button" class="btn btn-outline-dark">Dark</button>
<button type="button" class="btn btn-outline-light">Light</button>
Creating Button Groups
To create a button groups just wrap a series of buttons with .btn class in a <div> element and apply the class .btn-group on it.
Use this code inside the div tag:
Ex.
<div class="btn-group">
<button type="button" class="btn btn-primary">Home</button>
<button type="button" class="btn btn-primary">About</button>
<button type="button" class="btn btn-primary">Services</button>
</div>
Button Toolbar
To create button toolbar just wrap sets of button groups in a <div> element and apply the class .btn-toolbar on it.
Ex.
…
<style>
.bs-example{
margin: 20px;
}
</style>
</head>
<body>
<div class="bs-example">
<div class="btn-group mr-2">
<button type="button" class="btn btn-primary">
<i class="fa fa-font"></i>
</button>
<button type="button" class="btn btn-primary">
<i class="fa fa-bold"></i>
</button>
<button type="button" class="btn btn-primary">
<i class="fa fa-italic"></i>
</button>
</div>
<div class="btn-group mr-2">
<button type="button" class="btn btn-primary">
<i class="fa fa-align-left"></i>
</button>
<button type="button" class="btn btn-primary">
<i class="fa fa-align-center"></i>
</button>
<button type="button" class="btn btn-primary">
<i class="fa fa-align-right"></i>
</button>
<button type="button" class="btn btn-primary">
<i class="fa fa-align-justify"></i>
</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary">
<i class="fa fa-undo"></i>
</button>
</div>
</div>
</body>
​
Height Sizing of Button Groups
Ex.
...
<style>
.bs-example{
margin: 20px;
}
</style>
</head>
<body>
<div class="bs-example">
<div class="btn-group mb-2 btn-group-lg">
<button type="button" class="btn btn-primary">Home</button>
<button type="button" class="btn btn-primary">About</button>
<button type="button" class="btn btn-primary">Services</button>
</div>
</div>
</body>
​
Use another group classes like this:
<div class="btn-group btn-group-sm">
<div class="btn-group mb-2">
Nesting Button Groups
Creating button inside button in drop-down
Place a .btn-group within another .btn-group to create dropdown menus inside button groups.
Ex.
…
<style>
.bs-example{
margin: 20px;
}
</style>
</head>
<body>
<div class="bs-example">
<div class="btn-group">
<a href="#" class="btn btn-primary">Home</a>
<a href="#" class="btn btn-primary">About</a>
<div class="btn-group">
<a href="#" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Services</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Web Design</a>
<a class="dropdown-item" href="#">Web Development</a>
</div>
</div>
</div>
</div>
</body
Vertically Stacked Button Groups
Replace the class .btn-group with the .btn-group-vertical
Ex.
…
<style>
.bs-example{
margin: 20px;
}
</style>
</head>
<body>
<div class="bs-example">
<div class="btn-group-vertical">
<a href="#" class="btn btn-primary">Home</a>
<a href="#" class="btn btn-primary">About</a>
<div class="btn-group">
<a href="#" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Services</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Web Design</a>
<a class="dropdown-item" href="#">Web Development</a>
</div>
</div>
</div>
</div>
</body>
​
Creating Justified Button Groups
Fill all the available width by applying the flex utility class .d-flex to the .btn-group element. Every button has equal width in this case.
Ex.
<style>
.bs-example{
margin: 20px;
}
</style>
</head>
<body>
<div class="bs-example">
<div class="btn-group d-flex">
<button type="button" class="btn btn-primary">Home</button>
<button type="button" class="btn btn-primary">About</button>
<button type="button" class="btn btn-primary">Services</button>
</div>
</div>
</body>