1
00:00:04,070 --> 00:00:07,130
Hello everyone and welcome back to our bootstrap course.

2
00:00:07,130 --> 00:00:10,750
In this lecture I'm going to be adding that the fine tuning for our Web site.

3
00:00:10,760 --> 00:00:16,070
So let's go ahead and just add some quick fine tuning to some of the padding and coloring here in the

4
00:00:16,100 --> 00:00:19,580
lower portion of the site of it not everything was good.

5
00:00:19,580 --> 00:00:23,460
So let's go ahead and quickly open up the HMO and zoom in here.

6
00:00:23,570 --> 00:00:31,250
And here we have our pricing header which was perfectly styled because it had this tech center its display

7
00:00:31,250 --> 00:00:31,700
for us.

8
00:00:31,700 --> 00:00:38,190
We're going to copy this exact same styling for the pricing and we're going to use that for our checkout

9
00:00:38,270 --> 00:00:45,080
header in order to make it perfectly styled so you can see here is our checkout header and you can compare

10
00:00:45,080 --> 00:00:47,210
it to what we had for the pricing header.

11
00:00:47,240 --> 00:00:52,950
So all we have to do is change this to Tax Center and then in this H2 class we have display weight or

12
00:00:53,000 --> 00:01:01,220
display for we also want to change it to add the text white bootstrap class to style it into a white

13
00:01:01,220 --> 00:01:10,400
color as well as P Y five on default text and each to display for will be that darker shade that you

14
00:01:10,400 --> 00:01:10,670
saw.

15
00:01:10,700 --> 00:01:14,850
So that's why we had to override it with just text right class.

16
00:01:14,990 --> 00:01:15,610
Okay great.

17
00:01:15,620 --> 00:01:24,820
So now we have that all fixed and can also change up the padding for the payment label.

18
00:01:24,920 --> 00:01:26,850
Right here typically with padding.

19
00:01:26,900 --> 00:01:32,660
You'll often see that padding is something that you have to adjust to get the perfect fit especially

20
00:01:32,660 --> 00:01:35,030
comparing mobile versus web.

21
00:01:35,030 --> 00:01:39,830
So we're going to just change us from five which is too big to something like two.

22
00:01:39,830 --> 00:01:40,320
Okay great.

23
00:01:40,340 --> 00:01:46,280
So that will sort of reduce the spacing at the top and bottom of payments that way it will be a bit

24
00:01:46,520 --> 00:01:47,690
closer together.

25
00:01:47,750 --> 00:01:52,100
Let's go ahead and test how all these fine tuning features now look in the output.

26
00:01:52,100 --> 00:01:54,580
So I'm going to go ahead and go to the output here.

27
00:01:54,590 --> 00:01:57,480
And as you can see I'm going to zoom out to 100 percent.

28
00:01:57,470 --> 00:01:58,260
Okay great.

29
00:01:58,280 --> 00:02:00,920
So we have here header up here.

30
00:02:00,920 --> 00:02:07,790
Now we don't have a navigation because you can use the same one we use for Project 1 or make up your

31
00:02:07,940 --> 00:02:09,740
own navigation.

32
00:02:10,130 --> 00:02:16,340
And in the interests of time we didn't add navigation because we showed you how to do that in the previous

33
00:02:16,340 --> 00:02:17,180
lecture.

34
00:02:17,360 --> 00:02:22,790
And here we have our pricing with our little card here and we check out which has now been styled to

35
00:02:22,790 --> 00:02:25,600
be similar to the pricing up here.

36
00:02:26,240 --> 00:02:29,750
And then we had our credit card information payment information.

37
00:02:29,750 --> 00:02:30,260
Okay great.

38
00:02:30,260 --> 00:02:33,190
So we can test how this looks on our screen as well.

39
00:02:33,210 --> 00:02:39,020
Now I would still add a bit more padding maybe change the two to three up here and check other has quite

40
00:02:39,020 --> 00:02:40,970
a lot of padding so we can actually reduce that.

41
00:02:41,000 --> 00:02:42,790
Let's go ahead quickly do that.

42
00:02:43,250 --> 00:02:47,570
As you can imagine you have to play around with the padding a bit.

43
00:02:47,600 --> 00:02:52,660
It's helpful to have the output and the HMO open together side by side.

44
00:02:52,670 --> 00:02:58,230
That is one benefit of GSI Ben because then you can immediately see your changes alive.

45
00:02:58,250 --> 00:02:58,550
Okay.

46
00:02:58,580 --> 00:03:01,970
So I'm going to want to hide it so you can see all this coding that writing here.

47
00:03:01,970 --> 00:03:04,090
So I'm gonna just increase the padding here to 3.

48
00:03:04,190 --> 00:03:08,780
And I will increase that padding and then I'm going to change the padding around check out to be a bit

49
00:03:08,780 --> 00:03:09,710
less.

50
00:03:09,800 --> 00:03:12,790
So you're getting some alive fine tuning.

51
00:03:12,800 --> 00:03:13,010
Okay.

52
00:03:13,010 --> 00:03:13,790
We have five here.

53
00:03:13,790 --> 00:03:15,920
That was a bit much we can change it to four.

54
00:03:16,670 --> 00:03:17,150
Okay great.

55
00:03:17,180 --> 00:03:20,840
So that is everything that we need now for our website.

56
00:03:20,840 --> 00:03:23,700
Thank you all for watching.

57
00:03:23,720 --> 00:03:27,140
I challenge you to add more fine tuning features as you like.

58
00:03:27,290 --> 00:03:30,590
Of course you can also add a footer and a banner.

59
00:03:30,590 --> 00:03:33,410
There are many more things you could do in bootstrap.

60
00:03:33,410 --> 00:03:40,040
Many more classes that you can play with to add more efficient designs to your websites not just buttons

61
00:03:40,120 --> 00:03:43,520
and and headers there's a lot more you can do.

62
00:03:43,520 --> 00:03:49,310
So I had encourage you to explore and keep adding on to your product site.

63
00:03:49,310 --> 00:03:52,040
Thank you all for watching and we will see you next time.