Hello everyone and welcome back to our bootstrap course.
In this lecture we're going to be continuing with our checkout page by adding some selections and selection
boxes for country and state and zip code.
Continuing with this address section let's go ahead and open up our e-mail.
We can hide the output and let's zoom in a little bit here and scroll down to where we have a checkbox
or our checkout with our various checkout sections.
So we have the sections for email and address and just below that is where we're going to put in more
sections for the country and the state.
So we're going to actually open up another road just like we have here.
And in this row we're going to put in several columns for the first column is going to be of size five
for the width.
And this is going to be the country.
So let's make a label and say that it's for country and it's close off that label immediately and the
label will be the word country.
And next we're going to make a selection field and to do that.
Good.
Open up the select tag and let's go to the class custom select.
So as you block and said it's with two 100 you can also give it the idea of country.
So this is the selection field pertaining to the label.
Let's go ahead and close off this select tag and inside of the Select tag we're going to put in several
options.
Now you can put in as many options as we'd like for example.
Option value you should always begin with a empty value and write the word choose to allow the user
to choose an option.
Then after that you can put in any country that you want such as United States and you can also add
another option Canada and you can keep going and add more options as you wanted to.
Such as England et cetera.
So you could add more here if you'd like or leave it at that for now.
And after this selection tag we're going to make another column.
So this column is all done.
It's just going to contain our label and are a select tag below that.
We're gonna make another column just below this column this time.
This is going to be for the selection of the state.
So let's go ahead and make a give.
Class is going to be of class call MDG 4 and we can also add it.
Spacing immediately as well.
And we can close off that div and now in this column we're going to make another label.
This time is going to be for the selection state and we'll go ahead and close that label tag immediately
and in hand we're gonna put in the label which is state and then below the label we want to make the
selection field pertaining to this label through and open up a select tag.
And we're gonna give it the same class as before customers select as well as the block.
And with 100 Joseph visited previously and this time have to give it an I.D. as a label can find it
and its idea will be state.
OK.
Think we can close off that select tag and let's go ahead and put in some options.
So this would be the option for this state.
So if you had a different country you would have to change this select button dynamically to display
different states or provinces depending on what the country has for now let's begin though with the
default of Count California and the United States.
So we're gonna give it the value of empty as a first option and then right choose to prompt the user
to choose a state.
And I'm going to put in a state like California and New York.
Let's go ahead and add a few options and of course you can add more options as you like.
Okay great.
So now we have options for the state as well.
The last thing we need for every address is a zip code.
But before we do that let's go ahead and test how this looks all so far.
So I'm going to go to the output and I'm going to zoom out to 100 percent here and scroll all the way
down to where I have my new fields here with a tab to choose the country and a tab to choose the state.
And let's look at this from the full screen as well.
So on the full screen Lotus they are going to be just below this address because it's all part of the
billing address.
And you'll notice it's not coming here to the card section it's just stopping here.
Okay.
Excellent well this is looking great so far.
Let's go ahead and carry on by opening up the East hymnal again and hiding the output.
And I'm going to zoom in and next are going to add in another column for these zip code.
So this is going to be just outside of this next column here.
OK.
So I'm gonna just put in another column and notice it all still in the same room.
So this time it's going to be div class.
Call MDA 3 so slightly smaller.
You can give it spacing immediately.
That's pretty standard to do.
And after we add in the spacing we're gonna add in a label and we're gonna say it's for zip code and
we're going to close off that label tag as well and we're going to give it the text zip code so the
user knows to put in their zip code and then we can put in an input field.
So we're going to make an input tag.
Andrew is going to be of type text as is typical for a zip code.
It could also be number but because we're allowing multiple countries we're going to use text because
many zip codes use letters as well.
And then we're going to give us the class of form control and the idea of zip OK or zip code rather.
Yes because it has to match the four I.D. here the label.
OK.
Yes I see.
We're getting a red error because there's a hyphen here instead sort of an equal signs.
We'll just fix that.
OK.
Excellent.
And the air has disappeared.
OK.
So that is all that we need to set up these zip code.
Great.
Now we can also add in a also typical standard element which is to check that your shipping address
is the same as the billing address and whether or not you want to save your information to be remembered.
So let's go ahead and add those as well.
So this time this is going to be outside of the row.
We're gonna make a new row for this.
So let's go ahead and open up a div and we're going to make it of the class custom control and custom
checkbox.
So this will create a checkbox using Bootstrap styling and boxes are commonly used so they are a great
class to know.
Let's go ahead and open up an input and we're going to say it's of type checkbox and just like that
we are making an input field not just of putting in text but this time to check yes or no we're also
going to give it the class custom control input and we can give it the same address.
Okay.
And just below that we can make a label with the class custom control label to say it's for the same
dress and this label is going to be prompting the user to check the checkbox if they're shipping addresses
the same as their billing address and say shipping address is the same as I'm going the address.
Okay great.
So now we have that div setup.
Let's add one more checkbox using a very similar structure to let the user decide whether or not they
want to save their information for next time.
We're going to open up a new div of class custom control and custom checkbox and let's go ahead and
close off that div and we're gonna make it input type checkbox again.
And a class of class custom control and put against following the same structure and ideas is going
to be save information.
Okay great.
Let's add a label for this input so label for save information.
Can I give it the class custom control label and then let's go ahead and close off the label immediately
and we're going to put in the texture is going to be save my address so that they can save it for the
next purchase.
Okay great.
So now we have a custom checkbox setup and one for the shipping address to be the same as the billing
and the other one for saving information for next time.
Let's go ahead and test how all this looks before we continue.
So I'm going to go to the output and scroll all the way down to the end.
And as you can see now we have these two checkboxes now.
I would remove some of the margin and padding on the left and right about have to zoom out to 100.
OK.
It looks a bit better when you zoom out to 100 percent but still you could reduce the margin and padding
a little bit on the left and right by changing the bootstrap value or by using custom CFS.
But as you can see now we have the checkboxes here with this nice blue color when you check on them
and we can preview this in full screen mode as well.
And as you can see this is on its own row these three elements are on their own row and these two buttons
are on their own row as well.
So that is great because it spaces everything out nicely.
Okay.
In the next lecture we're going to be adding more content to the checkout page.
We're going to be adding the payment options.
So we're going to allow the user to put in all of their information about their card or their PayPal
et or whatever they want to pay with in order for us to collect payments on their purchases.
Okay.
Other than that.
Thank you all for watching.
And congratulations on having made it this far.
We will see you in the next lecture.