Suggested Video Tutorials
Part 15 - Bootstrap button classes
Part 16 - Bootstrap icons
Part 17 - Bootstrap dropdown
In Part 15 of Bootstrap tutorial we discussed creating buttons. In this video we will discuss creating button groups.
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
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
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.
Part 15 - Bootstrap button classes
Part 16 - Bootstrap icons
Part 17 - Bootstrap dropdown
In Part 15 of Bootstrap tutorial we discussed creating buttons. In this video we will discuss creating button groups.
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/AVvXsEilLiI4YgxZa2L4uKulnPxOrH6fPDr2jxdJG7FV51WTQXHEqqVDMFTDbQFB4EJnQjrGWtJp05nBXgrAoeJ36CzlvFhCJM0ONXT5aiNhSzhkj1Fg69GbDpYYZOKHQlVlIc_yNymTn_yOQBSP/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/AVvXsEhYJQsA6RU3DGvk45x45__hKLfxbsisa9rZex6okllGnXAE4H1RnwrM-hQCvKnlD065m2i3gf8uBAPANWejzVTXEL9Ka61FNHYv_Niprr_52tSyO91xOHRYFi8KnFfHV_jJNoYaiNZ5dMgD/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/AVvXsEjfYQWYIzZxF9mw1z2h1Z1iqpQKNBaoVKuENjLswMpycHcMeKbjbFQk_RaHPsGynLHeq1wKdaYmj8YzMxKEhmDzJfofaJOf2NEpvBrYxD7KebCrkJtmb0IyVAXdKTFf9xpiiRBGoUZ6jNNj/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/AVvXsEjm4L7-7lF52fZXrisN9xi7kx8baiP2l_h_JnaaBwSXMxb0h2a1P2EHYHsueEvsNc4jqMZDErrxFRnmKRlwkL4OcNvs3iNMs9uEmE8dRcEyFdB4re4jh7_rQ8B1iGK99mfev1oW8suxgVNv/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/AVvXsEh9rkE80hEv4wN84LQYGT2Cy9YqQyVmHl0ZOpmBKByE52tzzc2CPdtPujmCy4VumaYp2KCXHpUteY4GGiX6Eo-xV4OLaqS3H5N-3P1B0zlZzM5JgyNwdB_N97vg1kIOIPRWJBQvj1MZZoCN/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/AVvXsEj5KscLhwnsyGkZxKxRIYjf7yHwVnDXAKuBhWpDAcKee6JLez_e_GGXQbrHgFMdpBY21LZYjfaw5LtnqXsN6PorLOH-Zeia0DJB3TWtbDDA3uso3W2TQSQ_z14Rwa0kv3kYkrdI9QzMnG0_/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>
![bootstrap tutorial for beginners](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_03fbnWvW2zvfwA1f2qr0lAcU_tqV-0TcxHuTxHR37oSpIKPhyQkmsA6Dv8POqdnRpxs-G76aI9MiZgnazPGmzB4mOukWlc-9BWjarWMee69te9QcFt2GyIGUnfweX_cDQh4Zf-cGvjJY/s1600/bootstrap+tutorial+for+beginners.png)
No comments:
Post a Comment
It would be great if you can help share these free resources