Buttons and Button Groups
What is Buttons and Button Groups in Boostrap:
In Boostrap “Button Groups” is a class of name “btn-group” which is used to create a series of buttons in groups (without spaces) vertically or horizontally.
Group a series of buttons together on a single line or stack them in a vertical column
Basic Buttons:
You can created using the <button> element or the <a> element with Bootstrap classes.
<button type="button" class="btn btn-primary">Primary Button</button>
<a href="#" class="btn btn-secondary">Secondary Link Button</a>
Button Styles (Outline, Sizes):
Bootstrap offers many types of buttons in such as solid and outlined buttons.
Moreover, there are size classes, built into the HTML and CSS, to make changes to the size of buttons.
<button type="button" class="btn btn-outline-success">Outline Button</button>
<button type="button" class="btn btn-lg btn-danger">Large Button</button>
Button Groups:
Button groups allow you to group multiple buttons together.
They are useful for related actions and can be displayed horizontally or vertically.
<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>
Button Dropdowns:
Button dropdowns combine buttons with dropdown menus.
They are useful for presenting a list of actions or options related to a button.
<div class="btn-group">
<button type="button" class="btn btn-secondary">Action</button>
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Item 1</a>
<a class="dropdown-item" href="#">Item 2</a>
<a class="dropdown-item" href="#">Item 3</a>
</div>
</div>