Bootstrap Button Groups, Input Groups, Navbars, Pagination, Badges
The JS Bootstrap framework is a framework that provides tools for web design.
- Bootstrap Button Groups
- Bootstrap Input Groups
- Bootstrap Navbars
- Bootstrap Pagination
- Bootstrap Badges
Bootstrap Button Groups
Buttons can be joined into one visual element in Bootstrap by inserting button elements into a btn-group.
<div class="btn-group">
<button type="button" class="btn btn-outline-primary">Button 1 </button>
<button type="button" class="btn btn-outline-primary">Button 2 </button>
</div>
Any type of button can be joined into a button group, for example, buttons attached to dropdown menus.
Yields the results:
Bootstrap Input Groups
Input forms/fields can have additional elements attached to the ends of the form. These can include text, buttons, etc.
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">Text</span>
</div>
<input type="text" class="form-control" placeholder="Placeholder">
<div class="input-group-append">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown"> Dropdown <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a class="dropdown-item" href="#">Elements...</a></li>
</ul>
</div>
</div>
Yields the result:
Bootstrap Navbars
Bootstrap provides graphical elements for navbars and some limited dynamic functionality for them.
The syntax for a navbar is the following:
<ul class="nav nav-tabs/pills">
<li class="nav-item"><a class="nav-link" href="#">Elements...</a></li>
</ul>
Navbars can be given some dynamic function by linking them to collapsing/fading/switching containers.
<h4>Toggleable / Dynamic Pills</h4>
<ul class="nav nav-pills" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-bs-toggle="pill" href="#home_p">home</a>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="pill" href="#menu1_p">Menu 1</a>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="pill" href="#menu2_p">Menu 2</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div id="home_p" class="container tab-pane active"><br>
<h3>HOME</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div id="menu1_p" class="container tab-pane fade"><br>
<h3>Menu 1</h3>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div id="menu2_p" class="container tab-pane fade"><br>
<h3>Menu 2</h3>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
</div>
</div>
Yields the result:
Toggleable / Dynamic Pills
HOME
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Bootstrap Pagination
Bootstrap provides a format for creating pagination elements. This attribute is applied to the list element, and attributes such as active or disabled can be applied for visual effect.
<ul class="pagination">
<li class="page-item"><a class="page-link" href="#">«</a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">4</a></li>
<li class="page-item"><a class="page-link" href="#">»</a></li>
</ul>
Yields the result:
Bootstrap Badges
Bootstrap has visual elements in the form of badges, which are visual tags attached to interface elements.
<span class="badge bg-COLOR">Badge</span>
Yields the result:
-gonkgonk