Hello everyone and welcome back to our bootstrap course.
In this lecture we're going to be fixing some of the styling for our pricing deck.
This is often the case with front end design you'll have this sort of frustration with styling because
it's more of a trial and error process instead of a yes or no question in that you'll have to play around
the styling until you get it looking as to the design requirements.
So in order to fix the padding and margin all you have to do is play around with these margin and padding
styling that we added here in the bootstrap class declaration so you can just remove them completely
and there will be no margin or padding added.
And this will change the margin on the mobile view on a smaller screen.
So that way the card will not be smushed on a small screen.
And then for the pricing I just went ahead and added text away just like this text white which will
make the text of the header pricing to be white which was also an issue.
And this is an alternate way to setting the styling of the text color in CFS instead of using CSR as
you can just sort of directly in bootstrap with bootstrap classes.
So it's up to you how you want to change the text color.
Let's go ahead and open up the output and test it now.
OK.
So now we can scroll down to our pricing here and as you can see the pricing is white and this text
correct itself to become black.
And as you can see now our card is taking up 100 percent of the width of the screen size instead of
having the margins.
And it looks similar on the large screen as well.
And remember you can use media queries as well to change the size of the card on a larger screen if
you like.
Now let's go ahead and add a bit of padding to the pricing header here because as you can see it is
a little bit smushed close to the div above it.
So we're going to just scroll here to the pricing H2 and add a p y of five to it.
And as you can see you add this padding to the top and bottom of the pricing each to that we have up
here.
Great.
Okay.
So now this is looking much more neat.
We can add more styling later on in this course because there is no such thing as perfect styling because
of course you could always keep styling.
OK great so that is all we need to do for this lecture.
We now fixed the styling to be mobile friendly.
And in the next lecture we're going to be continuing with this project.
We finished up the header and the pricing structure.
Next we're going to add this check.
So this is the last div that we have here.
And this will make a checkout page for us which will allow the user to input their information to buy
the product.
Thank you for watching and we will see you in the next lecture.