Bootstrap can benefit from powerful JavaScript libraries to display various kinds of dynamic content on web pages. Bootstrap plugins require jQuery as a dependency. These include buttons, dropdowns, tooltips, alerts, tabs, and more. We will now cover how to use them.
The btn-group class generates a default grey button with curved edges that can trigger any function when clicked on by the user:
<div class="btn-group"> … </div>
The btn-toolbar class groups together all buttons that are included in the btn-toolbar class:
<div class="btn-toolbar" role="toolbar"> … </div>
The sizing class is used to size groups of buttons at once by just adding btn-group-*.
The declaration is shown here:
<div class="btn-group btn-group-lg">...</div> //large <div class="btn-group">...</div> //normal <div class="btn-group btn-group-sm">...</div> //small <div class="btn-group btn-group-xs">...</div> //extra small
Creating drop-down menus with a series of buttons can be done by placing a btn-group within a btn-group as shown here:
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default">Alpha</button>
<button type="button" class="btn btn-default">Beta</button>
<button type="button" class="btn btn-default">Gamma</button
<div class="btn-group" role="group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle ="dropdown"> List of Top Publishers</button>
<ul class="Top Publishers">
<li><a href="https://www.packtpub.com/"> Packt Publishing</a></li>
<li><a href="http://www.oreilly.com/"> O'Reilly</a></li>
</ul>
</div>
</div>The btn-group-vertical class arranges a group of buttons in a vertical fashion. Here is the syntax:
<div class="btn-group-vertical"> ... </div>
The
btn-group-justified class allows the button groups to adjust themselves according to any screen resolution and provides equal widths to the buttons. Here is the syntax:
<div class="btn-group btn-group-justified"> ... </div>
Dropdown menus are triggered when a button is clicked on the dropdown by the user. Dropdowns are mainly used to access additional related links.
The
btn btn-default dropdown-toggle class changes a button into a simple drop-down menu. Its declaration is shown in the following code:
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span> </button>
The btn btn-danger class does not change the button entirely into a dropdown, rather it splits a button into two parts where one performs a simple button function and the other becomes a dropdown menu:
<div class="btn-group"> <button type="button" class="btn btn-danger">Action</button> <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span> <span class="sr-only">Toggle for Dropdown</span> </button> </div>
Tooltips are small boxes that pop up when the pointer is hovered over an element.
To create a tooltip, add the data-toggle="tooltip" attribute to an element. Add the data-toggle="tooltip" attribute to an element to create a tooltip. To specify the text that is displayed inside a tooltip, use the title attribute:
<a href="#" data-toggle="tooltip" title="Tooltip">…</a>
The positioning tool is used to position a popup box of tooltips, for example, when a box may pop up on the top or bottom or to the left or right of an element:
Here is the syntax for positioning it at the top:
<a href="#" data-toggle="tooltip" data-placement="top" title="Tooltip">Tooltip at the top</a>
Here is the syntax for positioning it at the bottom:
<a href="#" data-toggle="tooltip" data-placement="bottom" title="Tooltip"> Tooltip at the bottom</a>
Here is the syntax for positioning it on the left of the element:
<a href="#" data-toggle="tooltip" data-placement="left" title="Tooltip">Tooltip at the left</a>
Here is the syntax for positioning it on the right of the element:
<a href="#" data-toggle="tooltip" data-placement="right" title="Tooltip"> Tooltip at the right</a>
Popovers and tooltips have the same functionalities with the only difference that for popovers to appear, the element needs to be clicked on by the user. They are used to present additional information regarding the element.
Popovers can be generated using the following piece of code:
<a href="#" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover">Toggle popover</a>
Popovers can be positioned on the top or bottom or to the left or right of the element using the following code.
Here is the syntax for positioning the popovers at the top:
<a href="#" title="Header" data-toggle="popover" data-placement="top" data-Content="Content"> Popover at the top </a>
Here is the syntax for positioning it at the bottom:
<a href="#" title="Header" data-toggle="popover" data-placement="bottom" data-content="Content"> Popover at the bottom </a>
Here is the syntax for positioning it on the left:
<a href="#" title="Header" data-toggle="popover" data-placement="left" data-content="Content"> Popover at the leftleft</a>
Here is the syntax for positioning it on the right:
<a href="#" title="Header" data-toggle="popover" data-placement="right" data-content="Content">PopoverPopover at the right </a>
The popover class allows the popover to close when you click elsewhere:
<a href="#" title="Dismissible popover" data-toggle="popover" data-trigger="focus" data-content="Click anywhere in the document to close the popover">Click here to close popover</a>
Bootstrap provides the utility of displaying alert messages. The code for its declaration is shown here. Bootstrap also allows you to assign different colors to alert messages to signify different situations. Bootstrap requires jQuery, and $ in this syntax means we are invoking jQuery. Let's take a look at the following code:
<button type="button" class="close" data-dismiss="alert" aria label="Close"> <span aria-hidden="true">×</span> </button>
The syntax of an alert is as follows:
$().alert():
This listens for click events on its elements having data-dismiss-alert. The syntax is as follows:
$().alert('close'):This removes an alert from the DOM. The element will fade out if it includes the .fade and .in classes.
Tabs are used in navigation bars to provide quick access to different links or pages. Tabs need to be individually activated, as follows:
<div class="container">
<h1>Alpha Zoo</h1>
<ul class="nav nav-tabs">
<li class="active">
<li><a href="#">Exhibit A to Exhibit H</a></li>
<li><a href="#">Exhibit I to Exhibit M</a></li>
<li><a href="#">Exhibit N to Exhibit Y</a></li>
<li><a href="#">Mini Aquarium</a></li>
<li><a href="#">Alpha Aviary</a></li>
<li><a href="#">Adopt an animal for just $4</a></li>
</ul>
<br>
<p>Welcome to our Zoo! We take pride in the happy animals we house.</p>
</div>We can use the fade class to fade the content of tabs after viewing them:
<div class="tab-content"> <div role="tabpanel" class="tab-pane fade in active" id="homepage">...</div> <div role="tabpanel" class="tab-pane fade" id="profile">...</div> <div role="tabpanel" class="tab-pane fade" id="posts">...</div> <div role="tabpanel" class="tab-pane fade" id="settings">...</div> </div>
Many a time, we come across scenarios wherein we need to manage large amounts of information within a single page. Placing all this content on a single page may lead to the creation of a very long page, and scrolling up or down may be frustrating for the person using the website. Accordion widgets are used to solve this problem, as they are used on websites to manage the large amount of content and navigation lists. They are basically collapsible panels inside which information is placed. With the Bootstrap collapse plugin, its very simple to create accordions.
This code creates an accordion with panel components:
<div class="panel-group" id="accordion">
<H1> Welcome to Alpha Zoo </H1>
<p>Welcome to our Zoo! We take pride in the happy animals we house.</p>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse1">
Exhibit A to Exhibit H</a>
</h4>
</div>
<!--Data for Panel 1-->
<div id="collapse1" class="panel-collapse collapse in">
<div class="panel-body">
These exhibits are for animals from the tropical regions of the planet. Take a guided tour through Exhibit A, our largest exhibit housing our bengal tigers Uri and Kayla with their cubs at exhibit A or simply feed our talking toucan Charlie in Exhibit D.
<a href='#'> See more</a>
</div>
</div>
</div>
<!--Data for Panel 2-->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse2">
Exhibit I to Exhibit M</a>
</h4>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">
This is the second panel. The content for the second panel will go in here.
</div>
</div>
</div>
</div>Modal plugins are popup windows or boxes that are displayed at the top of the page. A modal looks like this:
The modal dialog boxes come in two sizes. Small modals can be used for dealing with small functions, whereas large modals can be used to prompt large datasets.
The modal-dialog modal-sm class creates a small modal. Here is the syntax:
<div class="modal-dialog modal-sm">
Media objects are abstract object styles that can be used for making blog comments or other descriptive thumbnails:
.media: This class floats amediaobject to the right or left of a content block.media-list: This class forms an unordered list of items:<div class="media"> <a class="pull-left" href="#"> <img class="media-object" data-src="holder.js/64x64"> </a> <div class="media-body"> <h4 class="media-heading">This is the Main Media heading </h4> </div> <div> <ul class="media-list"> <li class="media"> <a class="pull-left" href="#"> <img class="media-object" data-src="holder.js/64x64"> </a> <div class="media-body"> <h4 class="media-heading">This is a Media heading </h4> <!-- Nested media object --> </div> </li> </ul>
The carousel plugin allows you to make elements move in a circle while viewing each element one by one.
Carousels show components by cycling through them. This can be done using the following code, which creates a carousel of animal photographs:
<div id="myCarousel" class="carousel slide" data-ride="carousel"> <!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="Emperor_Penguin.jpg" alt="Emperor Penguin">
</div>
<div class="item">
<img src="bengal_tiger.jpg" alt="Tiger">
</div>
<div class="item">
<img src="african_elephant.jpg" alt="Elephant">
</div>
<div class="item">
<img src="australian_kiwi.jpg" alt="Kiwi">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a></div>A Typehead is just another form of textbox that provides text predictions as the user types into the text box and may look something like this if programmed to type ahead the states of the US:
The following code shows how you can create a simple typehead textbox:
<input type="text" data-provide="typeahead">
We can call the typehead using the following code:
$('.typeahead').typeahead()For a complete implementation, visit https://twitter.github.io/typeahead.js/examples/.
The Scrollspy plugin allows the navigation targets to automatically update themselves when the user scrolls up or down.
Scrollspy can help in identifying the section of the page you have reached while scrolling randomly and makes finding required data much easier. The Scrollspy plugin can normally be activated in two ways, which we will see now.
The data attribute allows spying on a particular element by adding <data-spy ="scroll" to the element:
<body data-spy="scroll" data-target=".navbar">...</body>
Scrollspy can also be triggered by JavaScript by selecting the element and executing the scrollspy() function:
$('#navbar').scrollspy()The affix plugin is used to lock an element to an area on a page.
The affix plugin can be activated using data attributes or JavaScript. Affix plugins are used to place social icons on websites, where they are locked in one place so that they can be accessed by the user any time.