Web Programming TutorialsLearn How to Use Bootstrap v4 Plugins

Learn How to Use Bootstrap v4 Plugins

The Bootstrap plugin can be defined as an add-on component that adds a specific feature to an existing web component and supports its customization. Bootstrap v4 comes bundled with a number of jQuery plugins that make the various components on websites more attractive and interactive (e.g. dropdown plugin, button plugin, etc.). We can work with these Bootstrap plugin in a very simple manner by just writing few lines of code in the HTML file and it does not require the detailed knowledge of JavaScript programming. We can include Bootstrap plugins to our HTML file in the following way.

  • Individual Inclusion — we have an option either to include the individual JavaScript file as per requirement into our HTML file or the complete JavaScript file that has the definition of other plugins as well. We can use individual *.js file (e.g. button.js, etc.) in our HTML file, where we only require to enhance and customize just the button component on our web page. Such an approach of importing plugin JavaScript file with a single component is known as Individual inclusion.
  • All inclusive (compiled at once) — Instead of importing only individual JavaScript file (e.g. button.js, etc.) we can import the complete plugin file (e.g. bootstrap. min.js, etc.) that has definition of all the components including the button component. This approach of importing plugin JavaScript file with all components is known as the all-inclusive approach.
    Following are the JavaScript files which are present in Bootstrap-4.0.0 as plugins. These can either be imported individually or by all-inclusive approach after importing bootstrap.min.js file into the HTML file.

Bootstrap-4.0.0 plugins
These can be located in the package bootstrap-4.0.0-alpha.2/dist/src/umd. (Individual approach). There are total 11 plugins as shown below.
Img1
These can be located in the package bootstrap-4.0.0-alpha.2\dist\js. (All-inclusive approach).
Img2
Bootstrap-3.3.6 plugins
These can be located in the package bootstrap-3.3.6-dist\js (All-inclusive approach).
Img3
Plugins summary for Bootstrap v4
We can compare the number of plugins present in Bootstrap v3.3.6 vs Bootstrap v4.0.0 and conclude that the following plugins and a part of the plugin features have been dropped in the latest version. The dropped plugins and their features are as follows.

  • Affix jQuery (affix.js) plugin has been dropped in Bootstrap v4.
  • Some features of button.js jQuery plugin has been dropped in Bootstrap v4 which includes the state full button feature, $().button (string) and $().button (‘reset’) methods.

Plugins present in Bootstrap v4 package
The following plugins are present in the Bootstrap v4 package with improved features.

  • Alert.js
  • Button.js
  • Carousel.js
  • Collapse.js
  • Dropdown.js
  • Modal.js
  • Popover.js
  • Scrollspy.js
  • Tab.js
  • Tooltip.js
  • Util.js
 Note: –  Since all Bootstrap plugins are dependent on jQuery. Therefore, jQuery must always be included in the HTML file the place before the plugin files.

Example on All-inclusive plugin approach in Bootstrap v4 (using alert.js)
As discussed earlier, in this approach we are importing the all-inclusive JavaScript file (dist/js/bootstrap.min.js) as shown in the following HTML file.

<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags always come first -->
<meta charset="utf-8">
<meta name="viewport"
	content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="dist/css/bootstrap.min.css">
<title>Alert JQuery Plugin</title>
</head>
<body>
	<p><strong>This is an example on All-inclusive plugin approach in Bootstrap v4 (using alert.js)</strong></p>
	<div class="alert alert-success">
		<a href="#" class="close" data-dismiss="alert"> &times; </a> 
		<strong>This is a Warning!</strong>
		You are unauthorized to enter this page.
	</div>
	<!-- jQuery first, then Bootstrap JS. All Inclusive Plug-in -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
	<script src="dist/js/bootstrap.min.js"></script>
</body>
</html>

The following is the output for the Bootstrap HTML code.

Img4
Example on individual plugin approach in Bootstrap v4 (using alert.js)
As discussed earlier, in this approach we are importing an individual JavaScript file (dist/js/umd/alert.js) as shown in the following HTML file.

<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags always come first -->
<meta charset="utf-8">
<meta name="viewport"
	content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="dist/css/bootstrap.min.css">
<title>Alert JQuery Individual Plugin</title>
</head>
<body>
    <p><strong>This is an example on individual plugin approach in Bootstrap v4 (using alert.js)</strong></p>
	<div class="alert alert-success">
		<a href="#" class="close" data-dismiss="alert"> &times; </a> 
		<strong>This is a Warning!</strong>
		You are unauthorized to enter this page.
	</div>
	<!-- jQuery first, then Bootstrap JS. All Inclusive Plug-in -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
	<script src="dist/js/umd/alert.js"></script>
</body>
</html>

 

The following is the output for above Bootstrap HTML code.

Img5
We can observe that in both approaches, we have procured the same output. We can use any of these approaches to import the plugin but we have to keep in mind that in case we are importing selective plugin and that has a dependency on other js or css script that may not be present in the same file then we need to make sure on the dependency path in order to make the plugin work smoothly. However, if we use the all-inclusive approach we need not to worry about such dependencies as all required script will be present in a single js and css file.

More on Bootstrap plug-in
The following features are supported by Bootstrap plugins.

  • Data API— Data API, if included and turned on, then we may access all the Bootstrap plugins via Data API. In such a case, we need to write a single line of JavaScript code to use any of the plugin features. If Data API is not desired then we may turn off the Data API by using following command.
$(document).off('.data-api')

Also, we can selectively turn off the plugin access through data API with the help of the following command.

$(document).off('.button.data-api')
  • JavaScript API— we can also access all the plugins through JavaScript API that has the chainable methods which return collection or objects on which we can trigger the desired event as shown below.
$(".btn.warning").button("toggle").addClass("decorator")

Following this approach, we can add to our programming for the desired customized features on the top of Bootstrap plugins.

  • Support for UI Frameworks— Bootstrap plugins can support other UI frameworks freely. Sometimes there may be a situation where we may encounter namespace collision. Under such circumstances, we may call .noConflict () on the plugin to overcome such collision. The following is an example.
var pluginButton = $.func.button.noConflict();
$.func.pluginBtn = pluginButton;
  • Events Handling — Bootstrap supports custom events in two forms infinitive form (triggering before the start of the event e.g. preventDefault, etc.) and past participle form (triggering after the end of the event e.g. shown, etc.) against the plugin’s actions.

Source code for Bootstrap v4 Plugins
Conclusion
In this chapter, we discussed the Bootstrap v4 plugins along with an example demonstrating how we can use the plugin in the HTML code. Later, we went over the generic features which are supported by Bootstrap plugins.

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Exclusive content

- Advertisement -

Latest article

21,501FansLike
4,106FollowersFollow
106,000SubscribersSubscribe

More article

- Advertisement -