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

2
00:00:07,550 --> 00:00:11,910
In this lecture we're going to be fixing some of the styling for our pricing deck.

3
00:00:11,930 --> 00:00:17,060
This is often the case with front end design you'll have this sort of frustration with styling because

4
00:00:17,630 --> 00:00:24,140
it's more of a trial and error process instead of a yes or no question in that you'll have to play around

5
00:00:24,170 --> 00:00:29,880
the styling until you get it looking as to the design requirements.

6
00:00:29,900 --> 00:00:36,050
So in order to fix the padding and margin all you have to do is play around with these margin and padding

7
00:00:36,140 --> 00:00:42,620
styling that we added here in the bootstrap class declaration so you can just remove them completely

8
00:00:42,620 --> 00:00:45,680
and there will be no margin or padding added.

9
00:00:45,950 --> 00:00:53,380
And this will change the margin on the mobile view on a smaller screen.

10
00:00:53,390 --> 00:00:57,280
So that way the card will not be smushed on a small screen.

11
00:00:57,440 --> 00:01:01,970
And then for the pricing I just went ahead and added text away just like this text white which will

12
00:01:01,970 --> 00:01:08,660
make the text of the header pricing to be white which was also an issue.

13
00:01:08,660 --> 00:01:17,150
And this is an alternate way to setting the styling of the text color in CFS instead of using CSR as

14
00:01:17,180 --> 00:01:21,910
you can just sort of directly in bootstrap with bootstrap classes.

15
00:01:21,920 --> 00:01:25,660
So it's up to you how you want to change the text color.

16
00:01:25,670 --> 00:01:28,240
Let's go ahead and open up the output and test it now.

17
00:01:28,250 --> 00:01:28,460
OK.

18
00:01:28,490 --> 00:01:34,880
So now we can scroll down to our pricing here and as you can see the pricing is white and this text

19
00:01:35,150 --> 00:01:36,790
correct itself to become black.

20
00:01:37,400 --> 00:01:43,040
And as you can see now our card is taking up 100 percent of the width of the screen size instead of

21
00:01:43,040 --> 00:01:44,280
having the margins.

22
00:01:44,390 --> 00:01:48,870
And it looks similar on the large screen as well.

23
00:01:48,890 --> 00:01:55,520
And remember you can use media queries as well to change the size of the card on a larger screen if

24
00:01:55,790 --> 00:01:57,060
you like.

25
00:01:57,060 --> 00:02:02,150
Now let's go ahead and add a bit of padding to the pricing header here because as you can see it is

26
00:02:02,450 --> 00:02:07,160
a little bit smushed close to the div above it.

27
00:02:07,160 --> 00:02:12,890
So we're going to just scroll here to the pricing H2 and add a p y of five to it.

28
00:02:12,890 --> 00:02:20,450
And as you can see you add this padding to the top and bottom of the pricing each to that we have up

29
00:02:20,450 --> 00:02:21,440
here.

30
00:02:21,440 --> 00:02:21,740
Great.

31
00:02:21,770 --> 00:02:22,010
Okay.

32
00:02:22,040 --> 00:02:24,760
So now this is looking much more neat.

33
00:02:24,830 --> 00:02:30,140
We can add more styling later on in this course because there is no such thing as perfect styling because

34
00:02:30,140 --> 00:02:31,850
of course you could always keep styling.

35
00:02:31,850 --> 00:02:35,990
OK great so that is all we need to do for this lecture.

36
00:02:35,990 --> 00:02:39,870
We now fixed the styling to be mobile friendly.

37
00:02:40,100 --> 00:02:43,350
And in the next lecture we're going to be continuing with this project.

38
00:02:43,370 --> 00:02:47,520
We finished up the header and the pricing structure.

39
00:02:47,570 --> 00:02:49,370
Next we're going to add this check.

40
00:02:49,400 --> 00:02:52,100
So this is the last div that we have here.

41
00:02:52,310 --> 00:02:58,970
And this will make a checkout page for us which will allow the user to input their information to buy

42
00:02:58,970 --> 00:03:00,170
the product.

43
00:03:00,170 --> 00:03:02,630
Thank you for watching and we will see you in the next lecture.