Hello everyone and welcome back to our bootstrap course.
In this lecture we're going to be continuing with our checkout page and building the billing information
section.
So let's go ahead and open each to your mail.
We can hide the output and let's scroll down.
I'm going to zoom in a little.
I would scroll down to where we have our checkout page and we have the first portion of our checkout
page which contains the pricing and the coupon options and then just outside of that we're gonna go
ahead and make another one here and now make sure this one is outside of the div for the column but
that it's still inside the div for the euro and for the actual checkout itself.
So just before the two closing divs let's go ahead and build that next portion.
This is going to allow the user to enter their name their billing information their shipping address
etc..
So to do this we're going to open up a new div and we're going to give it the class of column putting
it as a column in the row and its size is going to be eight out of 12.
And we can also set its order to 1 which means it's going to be before that other div which had the
order to next let's open up a header and let's give it a billing address as the header.
So first let's open up a class and set this to be the big three which will set the spacing and let's
close off that header and inside of the header we're going to put in billing address prompting the user
to enter their billing address.
Next we're going to open up a form.
And if we want the form to be functional we would have to add in JavaScript code but for now we can
leave it to be the front end a portion of the form and I challenge you to fill in the back of the former
leader.
So here is our form in this form we're going to have a row with columns a column first for the first
name and the last name.
So let's go ahead and add in a column.
Well first we'll put in a row so we can make a row inside of the form and this row is going to be a
div and we'll close off the div with the element name.
And in here we're going to open up a column for the first column in the row.
So we're going to make this half of the with the width is 12 units so we're gonna set the with the column
to six units and we're going to space it out by a value of three.
Let's go ahead and close that div immediately with the closing div tag.
Just like that.
And now here we're going to put in an input which will allow the user to put in their name.
So versus put in the input.
So we're going to make an input type of text and the class will be form control.
You can have the idea set already to first name as well as said it's required or not required.
So if you put required that means that the user is required to put in this input and if they don't put
it in they will be able to submit the form so we can put it as required and we can also add the label
for this.
So we're gonna put in a label for first name and we're going to close off that label.
The label is for first name which refers to the idea of the input and that will ensure that the label
goes directly above the input.
So let's go ahead and put the text for the label which is going to be your first name and we can also
add a div that will inform the user that it's required.
We can do that later.
For now let's go ahead and make the second column.
So just outside of this column go ahead and make another column with the exact same format call and
D6 which mean this with is six units out of 12 so it'll take a half the screen and it's spacing to be
three.
Let's go ahead and close off the div and you can try different spacing if you wish.
These two are six because there are only two columns in this row which means each column should take
up 50 percent because they're only two.
Okay.
So anyway we're going to follow a very similar format to the first name.
We're gonna make an input of type text and its class is going to be form control because this is the
form and its idea this time is going to be last name because 90 can only be for one element and we can
make this required as well.
And now below the input we're going to put in a label this label is going to be for the I.D..
Last name.
You notice that I did not call a hashtag here and from the I.D. name.
That's because this is not an anchor.
This is not a link reference.
It is just saying what the label is for which input field.
Okay great.
So we actually have to close off the label with the closing label tag because unlike input it's not
sort of closing.
And here we put the text last name because this will prompt the user to enter their last name.
Let's go ahead and test how this looks so far.
So I'm going to go over to the output and scroll down and as you can see now we have these elements
for the billing address and you'll notice the order is that it is in front of the card information.
So we're going to fill in more elements of the billing address and then below that we're going to have
the payment information.
OK.
So you notice the text is gray.
Let's go ahead and fix that by going over to the HMO and we can use a bootstrap class to fix this and
sort of CFS.
So to do that we're gonna go up to where we need you row disappear.
I'm gonna change the text to white using text white.
If the bootstrap class and this will apply a white color to all the text in the row unless it is overwritten
later such as text muted so text muted here it will not change.
OK.
So now we have the first name and the last name set up we're gonna add more fields down here.
Okay.
So we are going to add another div here for the email and e-mails are typically longer so we're gonna
have a new row.
So outside of this row we are going to add in the email and this should also be inside of the form still
because it's all part of the same form.
So let's open up a new div and we're gonna space it out immediately by giving it and b 3 and let's go
ahead and close that div as well.
And now we're gonna open it input and this time the type is going to be email and the class is still
going to be fine control we want to keep all them in the same class a form control and the idea in this
case will be email and we can go ahead and close that without using it quotes and tag because it's an
input and let's open up a label and as it's for the I.D. email and let's go ahead and close off that
label.
And the text of the label will be email.
Okay.
Great.
Now we have another div for the email.
Let's go ahead and make another one for the address.
So we're collecting user information and depending on your product you might not need all this information
so you can customize this depending on the client you get.
Okay.
So we have another div that we need to make and we're going to space it out again.
You can change if you like.
Okay great.
So we have a spacing.
Let's go ahead and make the address field so I'm going to go ahead and make an input of type text for
the address and the class will be the same form control.
The idea is going to be address and we can make this required as well.
I'd rather make the email required because we are selling a digital product this time.
So it's up to you can leave the email as required usually to make it all required if we wanted to make
this required.
OK.
Let's close that.
Importantly the address is now required and we're gonna also add a label for this time the address I.D.
And let's go ahead and close off that label and the label will say address.
OK.
Great.
So now we have an address.
Let's go ahead and also allow them to enter a country.
So we're gonna enter a new row for this and this will allow them to choose a country from a selection.
So let's go ahead and do that now to implement that you would have to use javascript but let's go ahead
and set up the front end for it.
This is all still in the form we're gonna open up a new row whenever you want to have elements side
by side.
You open up a row and put each on it into a column.
If you just want the element to be on its own then you don't open up a row you just make the element.
Okay.
So we have our row here.
Let's go ahead and make a class div class equals call and D5 so the size will be five and you can space
it out as well.
Okay.
And let's close off that div and in here we're going to put in our country and allow the user to choose
a country and then to also check if their shipping address is the same as their billing.
And to save that information for next time if they want to do that as well.
Okay.
So let's go ahead and do this functionality in the lecture because this is going to be quite a bit complex
we're going to make a selection for the country and a selection for the state.
So we're going to fill that in in the next lecture.
Other than that thank you all for watching.
You now have set up the code for the first name and the last name the e-mail and the address.
So let's go ahead and test how this looks before we continue.
So I'm going to go to the output and scroll down and as you can see now the text is white here and you'll
see we have a bit of too much margin here on the left and right when we're on mobile so we're going
to have to go ahead and fix that won't be too hard to do you just change the margin of the bootstrap
class.
I encourage you to do that on your own.
And I also zoomed in a little too much.
So this is how I would look like zoomed out to 100 percent.
So it looks much better on mobile when you're out of 100 percent zoom.
So make sure when testing that you're at a hundred percent zoom because that will give you the most
close to accuracy.
Now when you're testing you will not get the exact same result that you'll get when you're actually
running a website on a server.
So that is important to know but you will get a close enough representation.
OK.
Thank you all for watching.
In the next lecture we're gonna be adding more information to the billing address.
We're going to allow the user to select their state to fill in their address.
Other than that.
Thank you for watching.
Up till now and we will see you in the next lecture.