Chapter 11. Making It Your Taste

At this point, you can be called a Bootstrap master around the world! You nailed the framework as few people do these days—you should be proud of that!

Now, you are about to face a challenge to overpass the boundaries of learning. In this chapter, we will see how to create and customize your own Bootstrap plugin. This could be tough, but if you reached this point you can go a step further to become a true Bootstrap master.

The topics covered are as follows:

• Customizing Bootstrap components

• Customizing Bootstrap plugins

• Creating a Bootstrap plugin

When we finish this chapter, we will also reach the end of the book. I hope this last chapter will help you empower yourself with all the Bootstrap framework skills.

To follow this chapter, create a sandbox.html file and just place the default template that we are using all over the book. We will place all the code snippets of this chapter in this file.

Customizing a Bootstrap component

In my years of experience of using Bootstrap, one of the major issues that I received is how can I change a Bootstrap component to appear like I need?

Most of the time, the answer is to take a look at the CSS and see how you can override the style. However, this orientation can be obscure sometimes and the developer will be unable to find a solution.

In this section, we will customize some Bootstrap components. We did some of that in previous chapters, but now we will go a step further into this subject. Let's start customizing a single button.

The taste of your button

We must start with a button, because of two factors. First, it is a quite simple component and second we have to customize a button very often.

Let's assume we have a simple button placed in a page that already has the Bootstrap fully loaded. We will call it as the sandbox page. The HTML for it should be like this:

<button type="button" class="btn btn-primary" aria-pressed="false" autocomplete...

Working with plugin customization

Just like the customization for components, it is also possible to customize the behavior of the Bootstrap plugins.

To illustrate that, let's consider the Bootstrap Modal. This plugin is one of the most used among the others. The Modal is able to create a separated flow in your web page without changing the context.

Let's create an input and a button and make the button open the modal when clicked. What we are expecting here is when the user inputs the GitHub username at the input, we will get the info in the GitHub open API and show some basic info at the Modal. For this, create the following code in the sandbox page:

<!-- Button trigger modal -->
<input id="github-username" type="text" class="form-control" placeholder="Type your github username here">
<button type="button" class="btn btn-success btn-lg btn-block" data-toggle="modal" data-target="#githubModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal...

The additional Bootstrap plugins

Bootstrap has plugins for almost anything. However, there are some missing components and plugins that would be nice to have in our web pages, for example, a data picker, or a color picker, or a select component. Bootstrap does not incorporate these plugins into the framework because they are not that generic for any application, so you should add it if you need.

Knowing that, the Bootstrap developers provide a list of additional Bootstrap resources that can be found at http://expo.getbootstrap.com/resources/.

Creating our Bootstrap plugin

In the previous chapter, we discussed the Carousel Bootstrap plugin. Do you remember the HTML markup to use the plugin? It is a big markup as you can see from the following code:

<div id="carousel-notification" class="carousel slide" data-ride="carousel">

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="imgs/doge.jpg" width="512">
      <div class="carousel-caption">
        <h3>Doge said:</h3>
        <p>What are you doing? So scare. It's alright now.</p>
      </div>
    </div>
    <div class="item">
      <img src="imgs/cat.jpg" width="512">
      <div class="carousel-caption">
        <h3>Crazy cat said:</h3>
        <p>I will never forgive you...</p>
      </div>
    </div>
    <div class="item">
      <img src="imgs/laika.jpg" width="512">
    ...

Defining the plugin methods

Now that we have our plugin well declared, we must fill the logic for it. We will create methods inside the prototype to create this behavior. We will only show this portion of the plugin code here.

The first method that we will create is init(). We will call it later to start the plugin. Before that, we have a few steps:

• Initial verifications

• Assigning the plugin elements and prerequisites

• Loading the original Bootstrap template

• Starting the Bootstrap plugin

The initialize method and plugin verifications

Actually, we have only one requirement from the Bootstrap original carousel plugin: the outmost div must have an id. Let's create the init function while making this assertion:

BootstrapCarousel.prototype = {
  init: function () {
    if(!this.$element.attr('id')){
      throw 'You must provide an id for the Bootstrap Carousel element.';
    }

    this.$element.addClass('slide carousel');
  }
};

Therefore, we check if the element has the attribute id using this.$element...

Creating additional plugin methods

We are almost finishing our plugin. Now, it's time to add some methods to be called in the plugin, just like you can call .carousel('pause') on Bootstrap Carousel for instance.

When we were creating the plugin base, we created a class Plugin, which is the definition of the plugin. This part of the code is pretty common across the plugins and it is used on every native Bootstrap plugin:

function Plugin(option) {

  var args = arguments;
  [].shift.apply(args);

  return this.each(function () {
    var $this = $(this),
        data  = $this.data('bootstrap-carousel'),
        options = $.extend({}, BootstrapCarousel.DEFAULTS, $this.data(), typeof option == 'object' && option),
        value;

    if (!data) {
      $this.data('bootstrap-carousel', (data = new BootstrapCarousel(this, options)));
    }

    if (typeof option == 'string') {
      if (data[option] instanceof Function) {
        value = data[option].apply(data, args);
      } else {
   ...

Summary

In my opinion, this last chapter was awesome! We saw more about Bootstrap customization in terms of both components style and plugin interaction. Bootstrap is a great framework, but what makes it great is the extensibility potential that it has. It matches the perfect world where premade components and customization live in symbiosis.

To finish the book with a flourish, we developed a new Bootstrap plugin, the wrapper for Bootstrap Carousel. The plugin contemplates almost every pattern for the Bootstrap plugin, and it has been very helpful in creating a simple carousel with minimal verbosity.

The plugin is available on GitHub at github.com/silviomoreto/bootstrap-carousel. Take a look at it and create a pull-request! There are a bunch of improvements and new features that could be added to the plugin—perhaps a method to remove slides?

Also, the goal of creating a plugin is to make you able to create a new one in the future or understand a Bootstrap plugin if you need to adjust some part...