Bootstrap makes surfacing modal windows extraordinarily simple. It is simply a case of creating the modal markup, using Bootstrap's modal classes, and using HTML attributes, data-toggle, data-target, and data-dismiss, to surface and remove the modal.

First, let's update the profile and settings elements with the data-toggle and data-target attributes:

<a
    class="dropdown-item"
    href="#"
    data-toggle="modal"
    data-target="#profile-modal">
        Profile
</a>
<a
    class="dropdown-item"
    href="#"
    data-toggle="modal"
    data-target="#settings-modal">
        Settings
</a>

We set data-toggle="modal" to tell Bootstrap that we want to open a modal, and data-target is a reference to the id of the modal we want to surface. Let's go ahead and create these models.

As a sibling to the nav element, we add the following modal markup:

    <div class="modal" id="profile-modal" role="dialog">
   <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" id="profile-modal-
               label">Profile</h4>
         </div>
         <div class="modal-body">
            Profile
         </div>
      </div>
   </div>
</div>
<div class="modal" id="settings-modal" role="dialog">
   <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" id="settings-modal-
               label">Settings</h4>
         </div>
         <div class="modal-body">
            Settings
         </div>
      </div>
   </div>
</div>

Let's explain what is happening in this piece of code. We apply the modal class to the parent element. The ID of the element corresponds to the value of the data-target attribute of the element we want to use to surface the modal. Within that div, we use Bootstrap's modal classes to define nested elements to represent the modal itself (modal-dialog), the content of the modal (modal-content), the header of the modal (modal-header), and the body of the modal (modal-body). We also define the title of the modal using modal-title and a Close button. The Close button includes a data-dismiss="modal" attribute, which allows the user to close the modal just by clicking anywhere off the modal. Let's take a look at how the Profile modal renders. Take a look at the following screenshot:

That's pretty nice, considering that it required very little markup.

We have a pretty nice navigation in place now; well, a functional navigation. It does not really fit in well with the rest of our site, though. Let's create our own custom navigation style for MyPhoto.