How to add plugins to your Bootstrap site

Here at BootBites we love third-party Javascript & CSS plugins, they save time and money and speed up development (most of the time)! In this tutorial you’ll learn the basic principles of adding plugins to your Bootstrap site so you can add all the plugins you like!

What’s a third-party plugin?

A plugin is some code (HTML, Javascript, CSS or any type) that adds a specific feature or features to another piece of code. The third-party bit means that while the plugin can be used on another piece of code it hasn’t necessarily been specifically designed for it. A “Bootstrap Plugin” on the other hand would be specifically designed to use with Bootstrap and may even use API hooks only available in Bootstrap.

Plugins can be free, premium & even something in between. (Find out more about plugin licenses in our plugin licenses how to guide.) GitHub & BitBucket have made it easier than ever for developers to maintain, share & release plugins so you might be shocked to find that there are 1000s of plugins available completely free of charge. Just searching GitHub for “Bootstrap” alone found 49,533 repositories!


I’m sold, where can I find plugins?

Free Plugins

As mentioned earlier GitHub & BitBucket are a great place to find free plugins to add to your Bootstrap sites, but bare in mind many developers maintain their plugins in their spare time so plugins might not be that well supported or go out of development. Other free Open Source plugins are maintained by companies so often have as consistent development and support as a premium plugin.

Some of our favourite free plugins:

Premium Plugins

Premium plugins offer the advantage of dedicated support systems and in many cases quicker or more regular updates. Also most premium plugins come with more in depth documentation to get you up and running fast.

Premium Marketplaces:

Some of our favourite premium plugins:


Adding plugins to your Bootstrap site

So you’ve found a plugin you like and want to add it to your Bootstrap site, here’s a general set of rules to follow unless the plugin itself gives specific installation instructions.

We’ll use a real life plugin called OwlCarousel as an example. You can download OwlCarousel from GitHub for free.


1. Review the README & documentation.

Most plugins come with a README.md or README.txt file with an introduction and a quick start guide. With simple plugins that might be all the documentation needed but more complex plugins will likely have a separate INSTALL file or documentation in a subfolder, this is more common with premium products.

First thing to do is review the documentation and get familiar with the plugin, its assets (images, CSS or Javascript files) and how you invoke/use it.

Using our OwlCarousel example, you can see in its README there’s a quick start guide which includes the assets you must include in the page, basic markup needed and how to invoke the plugins. We now know we’ll need to include both CSS & Javascript files, follow some simple HTML markup wrapped in the class owl-carousel and then invoke the plugin


2. CDN or Local Files?

In order to use a plugin you need to include its assets, generally CSS and/or Javascript files in your page(s).

With premium products you’ll just have to download the plugin directly to your computer or server but with free/Open Source products you have the option to use Content Delivery Network (or CDN) to include remotely hosted versions of the plugin assets in your page. This can save some hassle and bandwidth (if you’re tight on that) and is our preferred method of including assets.

Two Content Delivery Networks we regularly use are BootstrapCDN.com (for Bootstrap & Font Awesome) and CDNJS. Google also has a CDN but it tends to only offer very mainstream plugins.

Again using our OwlCarousel example, CDNJS offers all the OwlCarousel 2 assets we need, on to the next step.

Quick Note On Minified File Versions: You might have noticed in our OwlCarousel link that there are .css & .js versions and min.css & min.js versions. The min. files are smaller, compressed versions of the files which aren’t readable. These can be used to save bandwidth on production sites.

3. CSS at the top

Unless a plugin specifically says not to, always include the plugins CSS assets at the top of the page between the tags. We also recommend you include it after Bootstrap’s CSS file but before any custom CSS you have. This order allows you to override the plugin CSS with your own CSS file if needed:

  • Bootstrap CSS
  • Plugin CSS (NOTE: it can be multiple files so ensure you follow the order stated in the plugin README)
  • Your custom CSS

For our OwlCarousel example, it looks something like this:

<head>
  ........

  <!-- Bootstrap core CSS via MaxCDN -->
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">

  <!-- @plugin: OwlCarousel via CDNJS -->
  <link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.0.0-beta.3/assets/owl.carousel.min.css" rel="stylesheet"> 
  <link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.0.0-beta.3/assets/owl.theme.default.min.css" rel="stylesheet"> 
    
  <!-- Custom CSS -->
  <link href="css/mycustom-css.css" rel="stylesheet">      
</head>

Obviously if the plugin you’re using doesn’t have any CSS files you don’t need to worry about this step.

4. Javascript at the bottom

Again unless a plugin specifically says otherwise, always include the plugins Javascript assets at the bottom of the page right before the closing body tag. You should include all plugin Javascript after you include jQuery (required for Bootstrap) and the Bootstrap Javascript:

  • jQuery
  • Bootstrap Javascript
  • Plugin Javascript
  • Custom Javascript (more on that in step 6)

Our OwlCarousel example page footer looks like so:

<!-- Bootstrap core JS via googleapis CDN -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    
    <!-- Bootstrap core JS via MaxCDN -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    
    <!-- @plugin: OwlCarousel via CDNJS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.0.0-beta.3/owl.carousel.min.js"></script>

 

5. Add the markup

There’s no general rule to follow here as some plugins don’t require any markup (or HTML code) to function, so we can consider this step optional.

In our OwlCarousel example however, back in step 1 we saw that OwlCarousel required some specific markup with the class owl-carousel in order to function.

<div class="owl-carousel owl-theme">
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
</div>

 

6. Invoke the plugin

Once you’ve included the assets and you have any required markup in place then it’s time to invoke the plugin using Javascript and bring it to life!

You can either add the Javascript directly to your page wrapping it in script tags or our preferred method, via an external Javascript file which you include after the plugins own Javascript files which we added in step 4 like so:

<!-- Bootstrap core JS via googleapis CDN -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    
    <!-- Bootstrap core JS via MaxCDN -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    
    <!-- @plugin: OwlCarousel via CDNJS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.0.0-beta.3/owl.carousel.min.js"></script>
    
    <!-- Invoke plugin -->
    <script src="js/MY-JS-CODE.js"></script>

 

It most cases the invoke call will have:

  • A jQuery document ready() wrapper function to ensure the plugin is only fired once jQuery & the page are ready
  • A jQuery selector(s) which tells the plugin which page element the plugin should be applied to. jQuery selector are similar to CSS selectors, find out more at jquery.com.
  • An array or object of optional settings to pass to the plugin (not all plugins have this). ie {SETTING1-NAME: SETTING1-VALUE, SETTING2-NAME: SETTING2-VALUE}
$(document).ready(function(){
  $('JQUERY-SELECTOR').PLUGIN-FUNCTION({
    SETTING1-NAME: SETTING1-VALUE,
    SETTING2-NAME: SETTING2-VALUE
  });
});

 

And OwlCarousel example using some options would look something like:

$(document).ready(function(){
  $('.owl-carousel').owlCarousel({
    items: 4,
    margin: 10,
  });
});

 

Load up your page and fingers crossed the plugin will be functional.

If it’s not working, check the asset referencing, then ensure the plugin Javascript ordering is after the jquery core file.


Take in further with a data API

So what happens when you want to invoke the plugin again for a different page element? Yeh you have to repeat the Javascript code in step 6, which isn’t very elegant so let’s create a generic way to invoke the plugin using HTML5 data attributes to create our own data API.

data-toggle

Bootstrap uses the data attribute data-toggle to invoke its plugins (like collapse, tooltips etc) so we’ll follow that pattern and use data-toggle="PLUGIN-NAME" in our HTML markup to invoke our plugin.

In our OwlCarousel example it’ll look like data-toggle="owl-carousel":

<div data-toggle="owl-carousel">
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
</div>

Then we need to tweak our Javascript selector (and some other things) to select data-toggle="owl-carousel" elements instead of .owl-carousel elements:

$(document).ready(function(){
  $('[data-toggle="owl-carousel"]').each(function() {
    var owl = $(this);

    // Add Owl Classes
    owl.addClass('owl-carousel').addClass('owl-theme');
    
    // Invoke the plugin with the following settings
    owlSettings = {
      items: 4,
      margin: 10,
    };
    owl.owlCarousel(owlSettings);
   });
});

 

Now we’re not tied to the .owl-carousel class to invoke the plugin, we simply add data-toggle="owl-carousel" to any element and the required .owl-carousel class is added for us & the plugin invoked. Much cleaner.

data-settings

I know what you’re thinking, you want different settings from each instance of Owl Carousel on the page. So let’s add another data attribute called data-settings and allow it to pass settings from the HTML mark up to jQuery so each instance of Owl Carousel can have different settings.

Data attributes can handle string values so rather than passing a data attribute for each setting in Owl Carousel we’ll bundle them all together into a JSON string of settings which we’ll add to the markup after our data-toggle="owl-carousel" attribute like so:

 

<div data-toggle="owl-carousel" data-settings='{"items":4, "margin":10}'>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
</div>

Note the following:

  • Our data-settings object must be wrapper in single quotes (”)
  • The setting name (ie. items & center) must be wrapped in double quotes (“NAME”) with a colon (:) between it and the value
  • The setting values (ie. 4 & true) do not need a wrapper if they are number or true/false/null value
  • Each setting name/value pair should be separated by a comma (,)
  • Each plugin handles settings differently but in general if you do not pass a setting or any settings then the default plugin setting or settings will be assumed.

Then we tweak our Javascript one last time so it can read these settings:

$(document).ready(function(){
  $('[data-toggle="owl-carousel"]').each(function() {
    var owl = $(this), owlSettings = owl.data('settings') || {};

    // Add Owl Classes
    owl.addClass('owl-carousel').addClass('owl-theme');
    
    // Invoke the plugin with any settings from data-settings
    owl.owlCarousel(owlSettings);
   });
});

And thats it’s, we can now invoke multiple instances of Owl Carousel on the same page each with different settings:

<div data-toggle="owl-carousel" data-settings='{"items":2, "margin":20}'>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
</div>


<div data-toggle="owl-carousel" data-settings='{"responsive":{ "0":{"items":1, "nav":true, "margin": 10}, "600":{"items":2, "nav":false, "margin": 10}, "1000":{"items":4, "nav":true, "margin": 10} }}'>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
</div>


Respect the Licences

As we’ve already mentioned plugins can be free, premium or something in between and this can make how and where you can use them a bit confusing. If in doubt ask the developer(s) behind the plugin via GitHub or BitBucket or via the marketplace they sell from to make sure you use the plugin within the terms of the licence.

Summing Up

These general principles should help you integrate any plugin you can find out there or at least give you a good kickstart.

No Coments

    Leave a Reply

    Your email address will not be published. Required fields are marked *