Hello everyone and welcome back to our bootstrapped course.
In this lecture we're going to be setting up the device for our pricing header and our container which
will contain the pricing options for this product.
So right now our div has the class pricing header which is a bootstrap class and we can add in more
classes like for padding and margin later on if we see that we need more padding and margin for our
design.
But we can also add instilling to the class tech center which will center the text in this div and inside
of the header we want to add text that will be a header.
So we're going to add each to element which is header too.
We already have an H1.
So the next option would be each two and each two is different from each one in that it is a bit smaller
in terms of size a bit less.
And in terms of importance and it can be used multiple times.
So you can use an H2 for multiple elements.
So we're also going to give this V bootstrap class of display 4 which will make the H to a bit bigger
in size display for is a sizing class and we have to close off that each to tag.
And in here we're going to put in the text we want to be styled as a header too which is just pricing
and below this pricing header we're going to actually set pricing options in our container here that
we have.
So we have a div there's a container in the container we're going to put in a card deck a card deck
is a bootstrap class you can use to make a card effect and this is often used for pricing schemas because
it has a nice efficient styling that is commonly recognized as a pricing model information and you'll
see how this looks like when we test it in the output.
So let's go ahead and actually make it by making a div and giving it to the bootstrap class card deck
as well we can add something like a board of three and essentially text with text center and you can
add margin on the left and right to the maximum five and padding to the left and right to the maximum
five as well.
This will actually create quite a lot of padding.
So you might want to make this smaller depending on if you're using mobile.
So 5 would be good for a Web site.
One would be better for mobile because mobile requires less padding and margin on the left and right
typically.
So we can change this as we test it both can leave it as one for now and make sure you go ahead and
close off that device so you don't forget.
OK.
So now we have a div with a card deck and in the card deck we're going to put in cards.
So let's make another div and this will be of class card and this will make one card each card will
contain one pricing option.
Now you can add multiple pricing options typically fewer pricing options are easier for the customer
to understand and choose through that are better for user friendliness.
But if you wanted to add multiple pricing options like monthly or yearly subscriptions or a sale versus
a regular price then you could make a card deg with multiple cards.
Let's build one card from now and we're going to give it a shadow effect with shadow S.M. for shadow
small.
This will give it a shadow colour.
And let's go ahead and close that div immediately.
Now Andy Card we're going to need two things.
We're going to need a card header and a card body.
So these will be styled differently because one is a header and one is a body and they are both bootstrap
classes.
So let's make a div with the class card header just like this.
And let's close that off and right below that let's immediately go ahead and make the div class div
class card body and we can go ahead and close it off as well.
And in here we're going to put in information about the pricing of the product.
So we're gonna start off with a card header and in here we can put in a header like in each three and
give it the class of any styling we wanted to add if we did want to add we could added margin y the
font weight or we can just leave it as is.
So we're gonna have an h three.
Let's go ahead and close off that each three again slightly smaller and slightly less important for
a CEO and Page structure than an H two.
We're going to give this a total such as sale.
So perhaps this will be the header for a card of a sale price.
Okay.
So now that is all we need for the header of the card in the body will be some information about the
product and about the discount.
So in the card body we're going to add in and none other H3 and this H3 is going to show the title of
the card so let's close off at age 3 immediately.
Okay so in the H three we're going to put in a title so we're going to make this h three to be of class
card title and pricing.
Card title these are bootstrap classes that will style this title to be a card title and also a pricing
card because again pricing cards are commonly made using these card classes.
Okay great.
So in here we're going to put in the text of the title so we're gonna have some text that will say forty
nine ninety nine the price of the item and then below that we can put in the regular price of the item
because this is the sale card so you can make a small text item by using the helmet small and we can
make the class text muted which is a bootstrap class that will make the text a muted colour.
And let's go ahead and close off that small tag and in here we're going to put in the text regularly
forty nine four hundred ninety nine point ninety nine.
Okay great.
So you'll see this typically on product pages the sale price compared with the regular price.
Okay great.
So now we have a card title we can also add some information about the product into the card body and
to do that we're going to go ahead and open up an unordered list now we can close off this H3 tag we
don't need anything else in there and let's make an unordered list with the U L tag and we're going
to make this if the class list on styled which is another bootstrap class and we can go ahead and close
off the unordered list immediately.
And of course in every list we need a list item.
So it's put in some information about the product into each list items such as lifetime access.
You can also add another list item that says certificate of completion.
So this is where you will put in features about the product you're trying to promote.
Okay.
Ally project based curriculum you would put in all the highlights in here and you can put something
like thousand copies sold.
So you want to put in all of the selling points of why people should buy the product here in the pricing
card body.
Okay.
And right below that unordered list we're still in the card body we can go ahead and added button that
will bring the user to the checkout.
So this will scroll them right down to the checkout.
So let's go ahead and add a button we make it with the button element this time and we're going to make
it up type button.
So this is different from what we've done previously making an anchor tag inside of a paragraph tag
but this is another way that you can make a button.
It's good to know different ways we're gonna make it a class button of the bootstrap class button and
we can make it a button large this is also a bootstrap class.
Also make it a class and button block and button outline primary.
So this will start early buttons some more but making a block and outlining it in the primary color
that bootstrap chooses.
Okay great.
And we can also add padding later if we wanted to but we can start with a template like this.
We can go ahead and add more texture.
That's something like by now.
So this button will scroll the user down to the checkout.
Excellent so that is all that we need for the setup of our card.
Right now we have a card deck and a card header a card title and a button.
Let's go ahead and test how this looks and we can add more styling as needed using Bootstrap classes.
Okay.
So I'm going to go ahead and open up the output and I can see I have now have a pricing header as well
as a card here which is containing a title and an unsolved list as well as this button.
This button is different from the first button we have because this is transparent with an outline.
Then when you have over it it becomes blue.
So it's a bit of a different effect.
And when you click on this we don't go anywhere but we're gonna make more pages below that will scroll
down to upon the click of this button.
Okay.
So now that is what we have set up here.
The margin looks fine on the large screen.
However when you look at it on a smaller screen we need to magnify the margins we need to reduce the
margin and the text size from Mobile.
And we're gonna go ahead and fix that in the upcoming lectures.
But for now we have the basic structure set up for our pricing card.
As you can see this bootstrap card was made for us immediately.
We didn't have to do any styling ourselves and see SS for this card it was all done for us in bootstrap
so highly convenient and you can see this text is muted with this dark gray color.
OK.
Oh and the forty nine ninety nine is white.
So we're gonna have to go ahead and change that to a black color by using text dark so we can go ahead
and fix the styling in the next lectures.
Other than that.
Thank you all for watching and we will see you in the next lecture.