Submodule 10.3: Revealing Content

Adding a Modal

In the next step we introduce the modal to the web page. To set up the modal, add the following code right after the navbar at the top of the page. 

Modal code:

Next, we introduce another link on the right side of the navbar in order to trigger the display of the modal. To do this, add the following code in the navbar after the </ul>

<span class="navbar-text">
  <a data-toggle="modal" data-target="#loginModal">
     <span class="fa fa-sign-in"></span> Login
   </a>
 </span>

In addition, add the mr-auto class to the <ul> in the navbar as follows:

<ul class="navbar-nav mr-auto">

We are introducing another link to the right of the navbar using the navbar-text and using the mr-auto class to the <ul>. This contains a link with an <a> tag with the data-toggle="modal" and data-target="#loginModal" attributes.

This code will create a page displayed as: