Chapter 7. Extending Bootstrap with JavaScript Plugins

In this chapter, we're going to dive deeper into Bootstrap components by learning how to extend the framework using JavaScript plugins. You may remember that back in the first chapter we included bootstrap.min.js in our template. This file contains a number of JavaScript components that come with Bootstrap. In this chapter, we'll go over how to use some of these components, including: Modals, Tooltips, Popovers, Collapse, and Carousel. Let's get right to it by learning how to create a Modal in Bootstrap 4.

Coding a Modal dialog

Modals go by a number of different names; you may also know them as dialogs, popups, overlays, or alerts. In the case of Bootstrap, this component is referred to as a Modal and that is how I'll be referring to it throughout the book. A Modal is made up of two required pieces of code. The first is a button, and here's the basic code required to render it:

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#firstModal"> 
  Open Modal 
</button>

As you can see, this is a basic Button component with a few attributes added to it:

The first is the data-toggle data attribute, which needs to be set to modal. This tells the browser that this <button> is attached to a Modal component.
The second is the data-target attribute, which should be an ID. It doesn't really matter what you name this, I've called it #firstModal. It's important to note this ID name as it will be tied in later. Also make sure that the ID name is unique.

Once you've coded this up, it should look like a regular button in the browser:

Coding the Modal dialog

The second part of the Modal component is the dialog. This is the part that will pop up in the browser once you click the button. Let's take a look at some basic code for creating the dialog:

<div class="modal fade" id="firstModal" tabindex="-1" role="dialog" aria-hidden="true"> 
  <div class="modal-dialog" role="document"> 
    <div class="modal-content"> 
      <div class="modal-header"> 
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"> 
          <span aria-hidden="true">&times;</span> 
        </button> 
        <h4 class="modal-title">Dialog Title</h4> 
      </div> 
      <div class="modal-body"> 
        Some copy for your modal. 
      </div> 
      <div class="modal-footer"> 
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> 
        <button type="button" class="btn btn-primary">Save</button> 
      </div> 
    </div> 
  </div> 
</div>

This is a bigger piece of code and there are a few things going on here that I need to explain to you:

The entire dialog is wrapped in a <div> with a required class of .modal. There's also an optional .fade class there, which will fade the dialog in. Note the ID on this <div> because it's important. The ID value needs to match the data-target attribute you set on the button. This is how we tell the browser to link that button with this dialog. Finally, there are a couple of other attributes that are required by Bootstrap including tabindex, role, and aria-hidden. Make sure you include those with their corresponding values.
Inside the first <div> we have a second one with a class of .modal-dialog on it; make sure you include that.
Next, the interior of the Modal is split into three parts: header, body, and footer.
Inside our .modal-dialog, add another <div> with a class of .modal-header on it. Within this section you'll notice another button. This button is the Close or X icon for the Modal; although not required, it's a good idea to include this.
After the button you need to include a header tag, in this case a <h4>, with a CSS class of .modal-title on it. Here you should enter the title for your Modal.
The next section is another <div> for our body and it has a class of .modal-body on it. Within this section you should enter the body copy for your Modal.
Finally, we have the footer section, which is another <div> with a class of .modal-footer on it. Inside this section you'll find two buttons that you need to include. The first is the white button labeled Close which when clicked will close the Modal. Note that the <button> tag has a data attribute called data-dismiss on it and its value is modal. This will close the Modal. The second button is a primary button that would be used as a Save button if you were hooking in the actual functionality.

After coding all that up, go to the browser and click on your button. You should then see a Modal that looks like this:

As you can see, our Modal has popped up over the button. You can read the Modal title and body and see the footer buttons as well as the Close or X button in the top-right corner. You may have noticed that you didn't actually have to write any JavaScript to make this Modal work. That is the power of the Bootstrap framework; all of the JavaScript is already written for you and you can simply call the Modal functionality by using the HTML data attributes, which makes things much easier. That concludes the lesson on Modals; next let's move on to learning how to use Tooltips.

Table of Contents for Bootstrap 4 – Responsive Web Design

Chapter 7. Extending Bootstrap with JavaScript Plugins

Coding a Modal dialog

Coding the Modal dialog

Table of Contents for
Bootstrap 4 – Responsive Web Design