Hello everyone and welcome back to our bootstrap course.
In this lecture we're going to be adding the final fields for our payment section here on the checkout
page allowing the user to put in their credit card number the expiration date et cetera.
So let's go ahead and start filling that and now we can go ahead and open the e-mail Heidi output.
And I'm going to zoom in just a little here.
Okay great.
So I'm going to scroll down to where we were working on the checkout page.
We have our fields from the credit card debit card and people.
And next let's go ahead and make a new row with columns.
And this is going to still be in our form but it's going to be the columns on its own row for putting
in the name the credit card number etc..
So let's go ahead and start building that with a div.
Class row I go ahead and close off that div immediately and in every row we need columns just like in
every column we need to put in rows.
So let's go ahead and put in a div of class column and for the column we are going to specify the size
to 6 which is 30 percent of the total width of the element.
And we're also going to space out all the elements inside of this div by using and b 3 which is typically
pretty standard sizing of having these three as the spacing.
OK.
Next we're going to make an input and this is going to be for the user to put in their name.
So we're gonna make an input field and it's going to be a type of text.
This time we've seen different types of inputs like radio button of type radio and numbers but for the
full name we're going to go back to making input field of type text which will be a single line field
for the user to put in their name.
Okay great.
So we have a type.
We also have to add a class which is going to be form control and we're also to put in an idea which
is going to be cardholder.
Okay great.
We're also going to add in a label and it's going to be for that cardholder element and I'm going to
go ahead and close off the label tag with a closing tag and let's go ahead and put in the actual text
of this label which will be just above the input field and that's going to be the name of cardholder.
Okay great.
So let's go ahead and make another div just below this and it's going to be another column because again
we're making a roast we're going to put in columns into the row so we're gonna get a day of class of
call and D6 and this will make it again 50 percent.
So we're gonna have just two columns in one row and therefore we're splitting you with evenly between
them let's add spacing as well just like we did for the previous div for consistency and this will be
the actual card number.
So the input is going to be of type text again could also make it numbers.
And then we're going to make it class form control and it's going to be for the idea of card number.
Okay great.
And now let's make a label and the label is going to be for the I.D. card number and let's go ahead
and close off that label tag just like we did for the previous div.
So following the same pattern going to put in card number.
Okay.
Now this is going to be for when there is a card selected.
If there was paper selected we would add the people embed functionality but that would be more on the
back end to the front end is more concerned with the design.
So you can just pick one of the cards to use in our design and then implement the changing cards with
backend.
Okay great.
So we have our label for the card number.
Now that is the end of what we need for that row.
Let's go ahead and make another row.
And this time it will allow the user to put in their expiration date of the card and whether or not
they have a security code put in the security code for the card which there should almost always be.
Okay.
So that is going to be outside of that div B as this is a div for the row.
So we're gonna make another rule here because we want this all to me on a new line.
Let's go ahead and close off that div immediately and in the div or going to make a column so div class
call M.D. 3.
Now we're making it of size three out of twelve point five percent because for this give we don't need
to have as wide of a column because we're just putting in the expiration date and the security codes.
Those are typically smaller numbers than something like a name or a number of a credit card.
Okay.
So I'm also going to add in some default spacing.
Why not.
OK great.
Let's go ahead and close off that div and that is the first column and we're going to open up an input
type.
This is going to be the user the user input of the expiration date.
So you can just make it a type text as well.
And we're going to give it the idea of card or expiration date and then we're going to give it because
form control to style it.
And that is all that we need that is required.
You could also add in more classes and more parameters here if you'd like.
OK.
Let's also add in a label we that it's going to be a label for the expiration date and then we're going
to also add in the closing tag for the label as well as the text expiration.
And typically it's good to have a hyphen between words in your I.D. name so what you just change that
to make it a bit more readable.
Okay great.
So now we have one more column in a new row so let's add in another column for the security code.
So I'm going to open up a another div and it's going to be the same word for consistency so M D 3 and
then and b 3 for the spacing.
Okay great I'm going to close off that column and then I'm going to make an input of type text and it's
going to have the idea of the security code.
So that going to be the cards code and then I'm going to close that off and also add the class of control
right.
Yes form control you want to have the class from control on all of your elements for consistency.
Okay great.
And I also want to add in a label for that I.D. which is security code I'm going to add a hyphen again
just like that.
Okay.
And I'm going to close off that label and then in here type in card code.
Okay.
This is called differently in different countries like CSC or CTV depending on the card.
So just leave it as card code for now.
Okay great.
So now we just set up the new rows for the name the card holder the card number the expiration date
and the card code or security code.
It sounds better security code.
It's up to you what you would like to have at this label or up to what the client requests of you of
course.
OK.
One more thing we can add is a button for the user to purchase the product because right now we have
them entering all of their information but we don't have a submit button to actually submit the form.
So we're gonna add that just above the forms closing tag we're going to add in another button and it's
going to be of class button which is the bootstrap class as well as Button primary and button large
make a big add in button block and we also have to add in the type of to submit which means that we're
going to be submitting this form and submit won't actually work unless you implement backend functionality.
But the design will be set up here.
Okay.
And that's all we need for this course.
So let's go ahead and add something like submit as the text.
Okay great.
So now we have a submit button let's go ahead and test how this looks in the output.
OK.
So I'm going to go to the output and just scroll down here and as you can see now I have some new input
fields for the name of the card holder the card number the expiration and the security code as well
as this takes a man button.
So I'm going to just toggle the extra mile to see how this looks on the large screen and I'm going to
zoom out to 100 percent and OK the security code could be a bit longer because this text security code
is quite large.
That's another thing you could fine tune but all of these inputs are working which is great.
OK excellent.
So you notice a difference.
These are all input fields but this is of type text and this is of type radio which changed how they
looked and we have this wide Submit button because it is large Submit button as you can see when we
clicked submit the first name was required which means getting a prompt to fill out that field we put
in a name and then click submit.
We're going to again be asked to continue filling out all the fields.
Great.
Thank you all for watching.
That is all that we need for this lecture in the next lecture we can add some fine tuning features like
I highly recommend you change the padding depending on how your preview looks because of course depending
on the browser you're previewing in your website will look different.
So some obvious fine tuning are to change the code of this check out here as well as to change the padding
here on payment which is a bit wide.
OK great.
So we can change all that in the next lecture.
But for now this is looking quite great.
We've added a lot of fields here for our landing page we have now this pricing tab this card as well
as this out page with inputs for checking out and putting in all of your information.
These are quite a lot of fields.
Congratulations on having made it this far.
Thank you all for watching and we will see you in the next lecture.