1
00:00:01,330 --> 00:00:03,140
All right, everybody, let's keep going.

2
00:00:03,700 --> 00:00:07,920
What else can we do to this page to make it look more like this one?

3
00:00:09,570 --> 00:00:16,230
Well, I want the text uppercase here, you can see over here that this is all in capitals.

4
00:00:16,380 --> 00:00:20,940
This is not I mean, I could change this if I want to capital letters.

5
00:00:21,210 --> 00:00:23,220
I can also add a style.

6
00:00:24,450 --> 00:00:31,530
To make everything uppercase, but there's also another useful one that comes with bootstrap, I can

7
00:00:31,530 --> 00:00:32,880
actually add a class.

8
00:00:35,480 --> 00:00:46,670
And use a class and bootstrap called text dash uppercase, if I save this and refresh, look at that.

9
00:00:47,000 --> 00:00:48,620
Everything is uppercase.

10
00:00:49,370 --> 00:00:50,120
That's awesome.

11
00:00:50,690 --> 00:00:51,920
Now, what about the bun?

12
00:00:52,080 --> 00:00:55,290
Let's add some bootstrap styling to the buns.

13
00:00:55,730 --> 00:01:00,970
Again, let's say you don't know how to add bootstrap styles or you don't know the classes.

14
00:01:01,550 --> 00:01:07,130
We can always go to the documentation and search buttons.

15
00:01:09,590 --> 00:01:13,880
There we go, we see that we have some Bunin classes that we can use.

16
00:01:15,050 --> 00:01:18,290
In our case, let's use this one, one primary.

17
00:01:19,360 --> 00:01:20,350
So I'm going to copy.

18
00:01:21,390 --> 00:01:30,930
Come back and with this button, let's give it a class of button primary if I save and refresh.

19
00:01:32,120 --> 00:01:37,400
Hey, look at that, we have a boot strap on already, that's really, really cool.

20
00:01:38,090 --> 00:01:39,320
But you know what?

21
00:01:39,980 --> 00:01:42,350
I want to have a different color, right?

22
00:01:42,710 --> 00:01:50,570
I want the bun to look more like this, something nicer so we can add our own custom success.

23
00:01:51,050 --> 00:01:56,900
Let's call this class button excel for extra large button.

24
00:01:57,260 --> 00:01:59,180
And this isn't a bootstrap class.

25
00:01:59,180 --> 00:02:01,870
If I save this and refresh, nothing will happen.

26
00:02:02,360 --> 00:02:07,640
Instead, we can create this button, excel right here in our own stylesheet.

27
00:02:08,000 --> 00:02:12,110
So let's say button or dot button.

28
00:02:13,700 --> 00:02:14,360
Excel.

29
00:02:15,720 --> 00:02:23,850
Is going to be let's make this a little bit bigger, is going to have padding of, let's say one RTM

30
00:02:24,000 --> 00:02:26,930
on the sides and two RTM top bottom.

31
00:02:27,630 --> 00:02:30,630
If I refresh this, that's better.

32
00:02:30,930 --> 00:02:31,820
That's a lot bigger.

33
00:02:31,830 --> 00:02:38,670
So we have an extra large, but now we can add sizes or we can add different properties here.

34
00:02:38,940 --> 00:02:44,940
But since we named this class Button Excel, we should just leave it the way it's describing things,

35
00:02:44,940 --> 00:02:46,720
that is to make the button larger.

36
00:02:47,610 --> 00:02:53,070
So instead, let's just modify the existing classes that we have.

37
00:02:54,220 --> 00:02:58,300
Which is the bun and bun primary, so if I go back here.

38
00:02:59,430 --> 00:03:01,620
We can say that the button class.

39
00:03:03,250 --> 00:03:05,560
We'll have a font wait.

40
00:03:06,680 --> 00:03:15,620
Of, let's say, 700 and a border radius, that is to make the edges more circular and we'll give it

41
00:03:15,950 --> 00:03:19,760
three hundred pixels if I say this and refresh.

42
00:03:21,080 --> 00:03:21,800
That's a lot better.

43
00:03:21,830 --> 00:03:22,340
I like that.

44
00:03:22,760 --> 00:03:25,160
And I want this capitalized as well.

45
00:03:25,490 --> 00:03:26,960
And I could use the.

46
00:03:29,550 --> 00:03:37,230
Text Apricus class, as we've seen before, or I can just in here say text transform.

47
00:03:38,310 --> 00:03:45,940
And just say upper case, so just use access class five refresh, hmm, that looks really, really nice.

48
00:03:46,440 --> 00:03:47,540
Now, let's keep going here.

49
00:03:47,550 --> 00:03:48,660
Let's add another.

50
00:03:50,070 --> 00:03:57,480
Class here, which is Budden primary, so we're just adding on to the bootstrap styles that we have

51
00:03:58,020 --> 00:04:02,680
and we'll just give it a background color of what should we do?

52
00:04:02,850 --> 00:04:09,450
Well, if we go back to this page again, we inspect right here by hovering and we click.

53
00:04:10,300 --> 00:04:16,000
We see over here as we scroll down what color we're using over here, let's see.

54
00:04:21,400 --> 00:04:22,210
Where is the color?

55
00:04:22,240 --> 00:04:23,200
Let's see, let's see.

56
00:04:23,440 --> 00:04:24,540
Oh, there it is right here.

57
00:04:25,150 --> 00:04:26,200
So I'm going to copy.

58
00:04:27,730 --> 00:04:34,960
The caller added here, if I hit save and refresh and look at that, that's really, really nice.

59
00:04:35,470 --> 00:04:41,140
But one thing you'll notice is that the border over here, if we scroll or zoom in, you see that the

60
00:04:41,140 --> 00:04:45,520
border has a bit of blue and that's default for.

61
00:04:47,120 --> 00:04:48,200
The bootstrap theme.

62
00:04:49,510 --> 00:04:59,200
So instead, let's add a border as well, so call it border color and give it the same color.

63
00:04:59,350 --> 00:05:01,660
If I refresh, that's much better.

64
00:05:02,710 --> 00:05:08,980
Although now we're hovering and it's turning blue, that's OK, but I don't like it, let's make it

65
00:05:08,980 --> 00:05:09,310
hover.

66
00:05:09,310 --> 00:05:12,400
So it's still orange, but maybe a little bit darker.

67
00:05:12,400 --> 00:05:12,850
Orange.

68
00:05:14,610 --> 00:05:15,730
So what can we do here?

69
00:05:16,050 --> 00:05:20,970
Again, we've seen this before, we can just say button primary.

70
00:05:22,470 --> 00:05:24,090
Colin Hover.

71
00:05:25,280 --> 00:05:28,910
And in here, we can just add background.

72
00:05:29,910 --> 00:05:34,890
Color to be something a little bit different than this, in this case, we're going to use a color that

73
00:05:34,890 --> 00:05:35,670
is easy.

74
00:05:36,770 --> 00:05:41,510
4B zero eight, don't worry, I didn't memorize this.

75
00:05:41,540 --> 00:05:47,240
This is just something that well, I knew that I used when I made this website first.

76
00:05:47,480 --> 00:05:50,400
So don't worry, you never need to memorize hex colors.

77
00:05:50,880 --> 00:05:53,380
Next, we'll do the same for the border color.

78
00:05:53,420 --> 00:05:57,080
So once again, we'll make the border color the same as we have here.

79
00:06:00,320 --> 00:06:07,100
I also want to increase the border with actually to just make it a little bit bigger when we hover over

80
00:06:07,100 --> 00:06:15,770
it, so let's just give it an extra four pixels and let's say if I refresh and hover and look at that,

81
00:06:16,310 --> 00:06:17,510
that's awesome.

82
00:06:18,580 --> 00:06:24,700
So that's looking really, really nice, so we have the button, it's looking pretty good, we have

83
00:06:25,150 --> 00:06:27,590
our header that's looking pretty great as well.

84
00:06:28,330 --> 00:06:35,710
The other thing I want to add is this little line here just to give it a little extra flair to the page

85
00:06:36,580 --> 00:06:41,440
and we can use something called an H r here or a horizontal line.

86
00:06:42,130 --> 00:06:45,130
So the H r tag, which we can just put in between.

87
00:06:45,350 --> 00:06:46,510
So let's say HRR.

88
00:06:47,610 --> 00:06:49,030
Is a horizontal line.

89
00:06:49,170 --> 00:06:50,550
So if I refresh here.

90
00:06:51,790 --> 00:06:56,290
I don't know if you can see it well, because it's dark, but let's add some styling to it.

91
00:06:56,500 --> 00:07:02,290
So let's say in here that we want the cars on our page to have a border.

92
00:07:05,700 --> 00:07:11,400
Of the orange that we've had before, which is this one over here, it's all the same border color is

93
00:07:11,430 --> 00:07:11,790
this.

94
00:07:12,800 --> 00:07:14,320
If I save and refreshed.

95
00:07:15,450 --> 00:07:20,130
All right, look at that, there's our little line, it's a little thin, though, so let's add a bit

96
00:07:20,130 --> 00:07:20,790
of sizing.

97
00:07:20,790 --> 00:07:22,590
So say border.

98
00:07:25,170 --> 00:07:31,580
With and give it, let's say, three pixels, and if I refresh, all right, that's getting bigger.

99
00:07:31,590 --> 00:07:32,040
That's good.

100
00:07:32,280 --> 00:07:35,220
But I don't want this to be the entire page.

101
00:07:35,220 --> 00:07:38,700
I only want it a little bit, just like we see it here.

102
00:07:41,690 --> 00:07:50,810
So we have a property here that we can use called Max with which, as the name suggests, tells us exactly

103
00:07:50,960 --> 00:07:53,300
what's the maximum width of this thing.

104
00:07:54,050 --> 00:07:57,030
In our case, let's say sixty five pixels.

105
00:07:57,680 --> 00:08:01,880
So if I say this and refresh, that's much better.

106
00:08:03,370 --> 00:08:09,370
All right, we're making progress here, but there's an issue right right now, we have the content

107
00:08:09,400 --> 00:08:12,280
that we want, but it's all all over the place.

108
00:08:12,370 --> 00:08:13,590
It's kind of ugly, isn't it?

109
00:08:13,630 --> 00:08:17,320
We want everything centered maybe around this laptop over here.

110
00:08:17,860 --> 00:08:20,800
And this is where bootstrap really shines.

111
00:08:21,770 --> 00:08:24,500
So let's figure that out in the next video.