In this we discussed creating buttons. In this video we will discuss creating button groups.
Bootstrap tutorial for beginners
To create a button group wrap the buttons in a <div> element with btn-group class
Button toolbar : To create a button toolbar wrap button groups in a <div> element with btn-toolbar class
![bootstrap button toolbar](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTut-M1PUzClGmeDWWvy8nMA_GWDLkepKI-v0m7OoPsaLvYZaNmY-pNaug2qP_kOqFMTiG7JlnARbuL0POcmN8d5wf7i72oeRb5QMCScZa528P23VfL-VaW51u6BrOJ4OSUnZA9xp-cKS3/s1600/bootstrap+button+toolbar.png)
Button groups with different sizes : To create button groups with different sizes (i.e large, small and extra small) use btn-group-lg, btn-group-sm and btn-group-xs classes respectively
![bootstrap button group size](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRQF5vUMhji7lIOa920oram9blg-DWK1zpwa3JXbaLHATXStLiv9p1kX_TBkMsUy9JfKqG8JRxjFbmPlkiDL2GGe2mKYCCwHKfTk-qsGQ-mnErHktF0Rl3tYAxaIo74qXRT_PpAulDyHf4/s1600/bootstrap+button+group+size.png)
Vertical button group : To create a vertical button group use btn-group-vertical class
Nested button groups : To create a button group with a dropdown menu, nest button groups
Justified hyperlink elements button group : To create a justified hyperlink elements button group that span the entire width of it's parent use btn-group and btn-group-justified classes.
Justified button elements (i.e <button>, <input type="button"> and <input type="submit">) button group : To create a justified button group of button elements use btn-group and btn-group-justified classes. In addition you must also wrap each button in a <div> element with btn-group class.
Bootstrap tutorial for beginners
To create a button group wrap the buttons in a <div> element with btn-group class
<div class="btn-group">
<button class="btn btn-danger">Button 1</button>
<button class="btn btn-default">Button 2</button>
<button class="btn btn-info">Button 3</button>
<button class="btn btn-primary">Button 4</button>
<button class="btn btn-success">Button 5</button>
<button class="btn btn-warning">Button 6</button>
</div>
![Bootstrap button group](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCqrUkMOgY_VfLENvctWDMy_XR_XJpMMS5WUovyWehetpuUiU3lUSyAa7AY4Mf7ZKnQREXydFIfnqlHVO4i0K27BkIXGMqxltI5xoGJ79O58WG7pgU2qkmE9FEuaXhk6WNTMU6j3s7jnTA/s1600/Bootstrap+button+group.png)
Button toolbar : To create a button toolbar wrap button groups in a <div> element with btn-toolbar class
<div class="btn-toolbar">
<div class="btn-group">
<a href="#" class="btn btn-danger">Button 1</a>
<a href="#" class="btn btn-default">Button 2</a>
</div>
<div class="btn-group">
<a href="#" class="btn btn-info">Button 3</a>
<a href="#" class="btn btn-primary">Button 4</a>
<a href="#" class="btn btn-success">Button 5</a>
</div>
<div class="btn-group">
<a href="#" class="btn btn-warning">Button 6</a>
<a href="#" class="btn btn-primary">Button 7</a>
</div>
</div>
![bootstrap button toolbar](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTut-M1PUzClGmeDWWvy8nMA_GWDLkepKI-v0m7OoPsaLvYZaNmY-pNaug2qP_kOqFMTiG7JlnARbuL0POcmN8d5wf7i72oeRb5QMCScZa528P23VfL-VaW51u6BrOJ4OSUnZA9xp-cKS3/s1600/bootstrap+button+toolbar.png)
Button groups with different sizes : To create button groups with different sizes (i.e large, small and extra small) use btn-group-lg, btn-group-sm and btn-group-xs classes respectively
<div class="btn-toolbar">
<div class="btn-group btn-group-lg">
<a href="#" class="btn btn-danger">Button 1</a>
<a href="#" class="btn btn-default">Button 2</a>
</div>
<div class="btn-group btn-group-sm">
<a href="#" class="btn btn-info">Button 3</a>
<a href="#" class="btn btn-primary">Button 4</a>
<a href="#" class="btn btn-success">Button 5</a>
</div>
<div class="btn-group btn-group-xs">
<a href="#" class="btn btn-warning">Button 6</a>
<a href="#" class="btn btn-primary">Button 7</a>
</div>
</div>
![bootstrap button group size](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRQF5vUMhji7lIOa920oram9blg-DWK1zpwa3JXbaLHATXStLiv9p1kX_TBkMsUy9JfKqG8JRxjFbmPlkiDL2GGe2mKYCCwHKfTk-qsGQ-mnErHktF0Rl3tYAxaIo74qXRT_PpAulDyHf4/s1600/bootstrap+button+group+size.png)
Vertical button group : To create a vertical button group use btn-group-vertical class
<div class="btn-toolbar">
<div class="btn-group-vertical btn-group-lg">
<a href="#" class="btn btn-danger">Button 1</a>
<a href="#" class="btn btn-default">Button 2</a>
</div>
<div class="btn-group-vertical btn-group-sm">
<a href="#" class="btn btn-info">Button 3</a>
<a href="#" class="btn btn-primary">Button 4</a>
<a href="#" class="btn btn-success">Button 5</a>
</div>
<div class="btn-group-vertical btn-group-xs">
<a href="#" class="btn btn-warning">Button 6</a>
<a href="#" class="btn btn-primary">Button 7</a>
</div>
</div>
![bootstrap vertical button group](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4o4oVQgtIh8TiEpCrEJjYxkOmSm6xCWJ4FBgaK-ym9GTzwVJR6COpLckUpWU1E9M5CE6mDjmMU66X3LIGxM4UMeO0RZ2HRvSXiWYxoJdhGifSKLCkVfs60uZ9rDnJR0AwA-2fa9SD8HOr/s1600/bootstrap+vertical+button+group.png)
Nested button groups : To create a button group with a dropdown menu, nest button groups
<div class="btn-group">
<a href="#" class="btn btn-danger">Button 1</a>
<a href="#" class="btn btn-default">Button 2</a>
<div class="btn-group">
<button data-toggle="dropdown" class="btn btn-primary dropdown-toggle">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action 1</a></li>
<li><a href="#">Action 2</a></li>
<li><a href="#">Action 3</a></li>
</ul>
</div>
</div>
![bootstrap nested button groups](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJ8L0JVMZpSAe02M4ebTUlEGiRuUUhsOHflNky6ItJ6RJvbYdjENdopCgdZW71EpMxXnIEZfLMwh86KFPagxmSxrU9M2uLd8vDShPvEYpvzo4phOJD-zJEF98sKUMQe7LZUemZ0kYjl3Mb/s1600/bootstrap+nested+button+groups.png)
Justified hyperlink elements button group : To create a justified hyperlink elements button group that span the entire width of it's parent use btn-group and btn-group-justified classes.
<div class="btn-group btn-group-justified">
<a href="#" class="btn btn-danger">Button 1</a>
<a href="#" class="btn btn-default">Button 2</a>
<a href="#" class="btn btn-info">Button 3</a>
<a href="#" class="btn btn-primary">Button 4</a>
<a href="#" class="btn btn-success">Button 5</a>
<a href="#" class="btn btn-warning">Button 6</a>
</div>
![bootstrap justified button group](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrXYytLT6q9ymiOKmsJ3oagpI9KUgSoDr-XOqRTIEwX-aKNrfGjeeF46naMHiwaU81GHU1Z4d0K6pWb3HPB7TgixtVcbNCWg__JnuVWOOmsvekOV2CkZqwtj13Ck545zu6PhsXb40Rcdkq/s1600/bootstrap+justified+button+group.png)
Justified button elements (i.e <button>, <input type="button"> and <input type="submit">) button group : To create a justified button group of button elements use btn-group and btn-group-justified classes. In addition you must also wrap each button in a <div> element with btn-group class.
<div class="btn-group btn-group-justified">
<div class="btn-group">
<button class="btn btn-danger">Button 1</button>
</div>
<div class="btn-group">
<button class="btn btn-default">Button 2</button>
</div>
<div class="btn-group">
<button class="btn btn-info">Button 3</button>
</div>
<div class="btn-group">
<button class="btn btn-primary">Button 4</button>
</div>
<div class="btn-group">
<button class="btn btn-success">Button 5</button>
</div>
<div class="btn-group">
<button class="btn btn-warning">Button 6</button>
</div>
</div>