will display as a cross in the modals here.
So I would say times here.
Before this button, we are going to introduce
a header which we will display in the modal's header so I
will start out with an h4 with the class modal title.
And then inside this h4,
I will include the title of the modal,
which is login because this is going to show the login form.
Now that we have put in some details into this modal,
let's add in the link into our navbar which will
trigger this modal and then we will have
a quick look at how the modal looks like on the screen.
Going to the navbar,
right after the UL here,
I'm going to include in
a link which can be used to trigger the showing and hiding of the modal.
So to do that, I will go in and use a span with the class navbar-text.
This is what allows me to include a link into the navbar and show it as text.
So, inside the span,
I will use an A with the data-toggle,
so you can see the JavaScript data-toggle coming in and
the data-toggle is for a modal and then data-target.
You recall that we had given the ID as login modal to our-
Modal that we included.
So, I'm going to use that as my data target with the hash in front of that.
And inside here, I will go in and use
a font awesome icon for a login.
So, this is a font awesome ''fa- sign-in''
icon and say login and close the e-tech.
So with that, let's save the changes and take a look at the web page.
Going to our web page in the browser,
you now see that on the right edge,
you see this login with this icon created there.
So this is the link that is going to trigger the showing of the modal.
So if I click on this link,
then the modal will show on the screen.
So notice that when we created this modal we said,
header which contained the login and then also this button and then the body,
currently empty, we're going to introduce more code in there.
Now if you click on this button the modal will disappear.
Click on that again, the modal is shown.
Even if you click outside the modal, the modal will disappear.
So this is the behavior of the modal that we have come to expect.
Now, in the next step I'm going to go in and introduce the form here.
I'm not going to explain the details of the form because you have
already studied forms in one of the earlier lessons.
So I'm just going to simply go in and paste the form code and
then we'll have a look at the form in the modal here.
Coming back to the code,
you can now see that in the modal body,
I have filled in a form.
And then I have two form groups here with an input with the type email
and input type password and then I have a checkbox here that I have.
So, this should be easy for you to decipher what this form is code structure EEs,
from your understanding of how Bootstrap forms are designed.
I have put in two buttons.
One is a submit button and another one is a cancel button.
The cancel button has the first one.
The cancel button here has data dismiss model.
So which means that when you click on the cancel button the model will be dismissed.
And the other one is a submit button which is used to submit the form.
So with this changes,
let's save the changes and then go and have a look at our Web page.
Going back to the web page,
now you click on the login then you'll see a form for a user to sign in.
So you'll see that you have two boxes here.
Input boxes here for entering email and password,
and then a checkbox for say Remember me.
And then you have a sign in and a cancel.
So if you click on the cancel the modal will go away.
Just like when you click on the cross there.
And then if you fill in this information and keep click on sign in,
the sign in process should be initiated.
At this moment we don't have a server for this to work,
but I'm just showing you in Bootstrap how you would create a form like this.
I'm sure you have seen things like these on
many websites where when you click on a login button
something like this with the form pops up on the screen
and expects you to type in the information.
So now you'll see how you can leverage models to display
information overlaying your web page.
With this we complete this exercise.
In this exercise, we have seen the use of tooltips
and we have seen the use of models to display content.
This is a good time for you to do a git-commint with the message tool tips and models.