Hello everyone and welcome back to our bootstrap course.
In this lecture I'm going to be adding that the fine tuning for our Web site.
So let's go ahead and just add some quick fine tuning to some of the padding and coloring here in the
lower portion of the site of it not everything was good.
So let's go ahead and quickly open up the HMO and zoom in here.
And here we have our pricing header which was perfectly styled because it had this tech center its display
for us.
We're going to copy this exact same styling for the pricing and we're going to use that for our checkout
header in order to make it perfectly styled so you can see here is our checkout header and you can compare
it to what we had for the pricing header.
So all we have to do is change this to Tax Center and then in this H2 class we have display weight or
display for we also want to change it to add the text white bootstrap class to style it into a white
color as well as P Y five on default text and each to display for will be that darker shade that you
saw.
So that's why we had to override it with just text right class.
Okay great.
So now we have that all fixed and can also change up the padding for the payment label.
Right here typically with padding.
You'll often see that padding is something that you have to adjust to get the perfect fit especially
comparing mobile versus web.
So we're going to just change us from five which is too big to something like two.
Okay great.
So that will sort of reduce the spacing at the top and bottom of payments that way it will be a bit
closer together.
Let's go ahead and test how all these fine tuning features now look in the output.
So I'm going to go ahead and go to the output here.
And as you can see I'm going to zoom out to 100 percent.
Okay great.
So we have here header up here.
Now we don't have a navigation because you can use the same one we use for Project 1 or make up your
own navigation.
And in the interests of time we didn't add navigation because we showed you how to do that in the previous
lecture.
And here we have our pricing with our little card here and we check out which has now been styled to
be similar to the pricing up here.
And then we had our credit card information payment information.
Okay great.
So we can test how this looks on our screen as well.
Now I would still add a bit more padding maybe change the two to three up here and check other has quite
a lot of padding so we can actually reduce that.
Let's go ahead quickly do that.
As you can imagine you have to play around with the padding a bit.
It's helpful to have the output and the HMO open together side by side.
That is one benefit of GSI Ben because then you can immediately see your changes alive.
Okay.
So I'm going to want to hide it so you can see all this coding that writing here.
So I'm gonna just increase the padding here to 3.
And I will increase that padding and then I'm going to change the padding around check out to be a bit
less.
So you're getting some alive fine tuning.
Okay.
We have five here.
That was a bit much we can change it to four.
Okay great.
So that is everything that we need now for our website.
Thank you all for watching.
I challenge you to add more fine tuning features as you like.
Of course you can also add a footer and a banner.
There are many more things you could do in bootstrap.
Many more classes that you can play with to add more efficient designs to your websites not just buttons
and and headers there's a lot more you can do.
So I had encourage you to explore and keep adding on to your product site.
Thank you all for watching and we will see you next time.