1
00:00:00,230 --> 00:00:03,290
Know all we really need to focus on are the colors.

2
00:00:03,300 --> 00:00:05,160
Let's start with a jumbotron.

3
00:00:05,460 --> 00:00:11,070
So everything inside the JumboTron is just a different shade of blue and that shade of blue I have in

4
00:00:11,070 --> 00:00:23,370
this document here to see 3 5 0 will go to our style sheet and we can just select the jumbotron and

5
00:00:23,370 --> 00:00:31,860
give it a color and everything inside of it all up that color just like that are fresh and you can see

6
00:00:32,250 --> 00:00:37,880
everything is changed to be blue including the cliff A-Kon the glyph icon is just treated as text.

7
00:00:37,980 --> 00:00:43,010
It's actually a font so you can change the color of it using the color property.

8
00:00:43,020 --> 00:00:45,950
Now let's tackle the nav bar which is a little trickier.

9
00:00:46,110 --> 00:00:47,730
The background color isn't bad.

10
00:00:47,740 --> 00:00:53,280
All we need to do is select nav bar Inv. or we could do.

11
00:00:53,340 --> 00:00:59,730
Now if we are on after our fix stop but I'll do nav bar inverse and then give it a background color

12
00:01:01,650 --> 00:01:08,210
of that blue background and paste that in and refresh.

13
00:01:08,210 --> 00:01:09,830
And you can see it changes to be blue.

14
00:01:10,020 --> 00:01:15,900
But to change the color here I want them to be white rather than that gray that they are.

15
00:01:15,900 --> 00:01:21,720
If I just style all ink or tags which is what these are for just style anchor tags to be white it won't

16
00:01:21,720 --> 00:01:22,800
quite work.

17
00:01:22,800 --> 00:01:23,980
So I'll show you what I mean.

18
00:01:24,030 --> 00:01:28,070
Anchor tag color white.

19
00:01:28,150 --> 00:01:29,630
Go back.

20
00:01:29,910 --> 00:01:35,430
It doesn't take effect and this is a great use for the inspector if we inspect it.

21
00:01:35,610 --> 00:01:36,880
Take a look what's happening.

22
00:01:37,260 --> 00:01:43,080
So we can see that our color white is crossed off and the color is being assigned right here.

23
00:01:43,410 --> 00:01:49,350
This line color is this gray and if we uncheck it they go back to being the white that we want them

24
00:01:49,350 --> 00:01:50,050
to be.

25
00:01:50,490 --> 00:01:53,280
And that's because this is a more specific selector.

26
00:01:53,460 --> 00:01:56,290
If you can think back to that lesson I did on specificity.

27
00:01:56,520 --> 00:02:03,180
This is calculated to have a higher number or a higher specificity index than what we had here which

28
00:02:03,180 --> 00:02:06,530
is just for little anchor tag versus this up here.

29
00:02:06,630 --> 00:02:08,190
It's multiple classes.

30
00:02:08,190 --> 00:02:12,330
Remember each one of those is ten times more specific than just an anchor tag.

31
00:02:12,900 --> 00:02:18,480
So what we want to do is write a selector that will be just as specific and we can just steal this one

32
00:02:18,480 --> 00:02:19,540
right here.

33
00:02:20,280 --> 00:02:25,910
So we'll go in to here and paste that in and then change color to be white.

34
00:02:25,950 --> 00:02:29,560
So we'll just override the exact same schlechter that bootstrap had.

35
00:02:29,610 --> 00:02:35,790
And it's important that our styles occur after bootstrap so that we can override it and if we are fresh

36
00:02:36,000 --> 00:02:37,370
We now get white links.

37
00:02:37,650 --> 00:02:41,050
Lastly we'll do the same thing to the nav bar brand.

38
00:02:41,670 --> 00:02:45,490
So as you can see that's inside of nav bar dash brand.

39
00:02:45,960 --> 00:02:57,360
If we select that Daut now for our brand and we give that a color of white and save and go back it still

40
00:02:57,360 --> 00:02:59,800
doesn't work and we have the same problem.

41
00:02:59,820 --> 00:03:06,120
So if we inspect it you'll see that it's crossed off our styles down here where we're turning white

42
00:03:06,450 --> 00:03:11,700
has been crossed off and rather is colors being changed by this line.

43
00:03:11,700 --> 00:03:17,770
Now if Bar brand inside of nav bar Inv. so we can also just steal that and overwrite that.

44
00:03:17,970 --> 00:03:21,500
So we just need that nav bar inv..

45
00:03:21,930 --> 00:03:23,220
Now for our brand.

46
00:03:23,280 --> 00:03:28,500
So basically we're writing styles that are going to clash head to head in a battle of the styles between

47
00:03:28,500 --> 00:03:32,580
bootstrap and our styles and they're identical in the selectors.

48
00:03:32,700 --> 00:03:36,280
So because ours comes second they're going to come out on top.

49
00:03:36,300 --> 00:03:41,100
They're going to win go back refresh and never go.

50
00:03:41,100 --> 00:03:42,530
We have most of the styles done.

51
00:03:42,630 --> 00:03:48,000
There's one really minor thing that you probably won't notice on the screen cast the color of gray on

52
00:03:48,000 --> 00:03:51,600
the JumboTron is ever so slightly different.

53
00:03:52,740 --> 00:04:00,120
So I have that color here I'll just copy it and then go to RC SS and we'll just change the background

54
00:04:00,600 --> 00:04:05,510
of the Jumbotron to be that gray colored and pay close attention as refresh.

55
00:04:05,520 --> 00:04:07,000
Hopefully you can see it change.

56
00:04:07,110 --> 00:04:08,200
It just changed.

57
00:04:08,200 --> 00:04:10,990
It's a slightly bluer looking gray.

58
00:04:11,040 --> 00:04:12,500
So let's test everything out.

59
00:04:12,720 --> 00:04:16,080
Let's resize our NAV bar work.

60
00:04:16,170 --> 00:04:18,720
The Javascript works just fine.

61
00:04:18,720 --> 00:04:19,740
There we go.

62
00:04:19,830 --> 00:04:21,400
Everything looks good.

63
00:04:21,420 --> 00:04:24,870
The last thing I'll show you is how we can use a different icon here.

64
00:04:25,140 --> 00:04:30,510
The one that I'm using is from a library called fun awesome fun awesome is a simple library that includes

65
00:04:30,570 --> 00:04:31,860
a lot of different icons.

66
00:04:31,860 --> 00:04:37,520
Way more than the built in Bootstrap with icons so you can get to it at Funt awesome.

67
00:04:37,610 --> 00:04:38,390
Don't get her.

68
00:04:38,430 --> 00:04:40,890
I know I'm on the home page here.

69
00:04:41,280 --> 00:04:47,220
And if we click on icons there are over 580 different icons you can see them all here.

70
00:04:47,550 --> 00:04:52,470
And one of the nice features that you can search through them which you can't really do on Pucelle very

71
00:04:52,470 --> 00:04:53,580
easily.

72
00:04:53,670 --> 00:05:01,870
So we can search for photo and we get camera and the camera retro which is what I used.

73
00:05:02,100 --> 00:05:05,180
But before we can use any of them we need to install it.

74
00:05:05,400 --> 00:05:07,750
So if you go to getting started.

75
00:05:07,800 --> 00:05:14,160
They have a nice CDN that you can just copy and just put that inside of your application.

76
00:05:14,160 --> 00:05:18,650
So we'll do that up top pay sudden.

77
00:05:19,140 --> 00:05:24,190
And now we can use fun awesome icons and it's really really easy.

78
00:05:24,330 --> 00:05:31,320
Actually if you click on any icon that you like that say I want to use the peace sign I can click on

79
00:05:31,320 --> 00:05:35,100
it and they give you the little bit of code that you can copy.

80
00:05:35,100 --> 00:05:38,300
So it's an icon with class equal to f a for fun.

81
00:05:38,310 --> 00:05:38,660
Awesome.

82
00:05:38,670 --> 00:05:42,010
And then F.A. dash the name of the icon.

83
00:05:42,990 --> 00:05:51,240
Let's just replace the camera icon with this so it will have a big peace sign will save and refresh

84
00:05:51,250 --> 00:05:51,870
.

85
00:05:52,380 --> 00:05:53,640
And we have a peace sign.

86
00:05:53,850 --> 00:05:55,820
So fun awesome is pretty awesome.

87
00:05:55,830 --> 00:05:57,110
It's really popular.

88
00:05:57,120 --> 00:06:01,970
Lots of great icons as you can see pretty much any icon you would ever need.

89
00:06:01,980 --> 00:06:03,620
They have a bunch of the standard ones.

90
00:06:03,690 --> 00:06:04,940
Pause play button.

91
00:06:04,950 --> 00:06:09,400
Forward backwards different icons for technology and different Internet icons.

92
00:06:09,480 --> 00:06:12,260
But they also have some more fun ones like peace signs.

93
00:06:12,320 --> 00:06:16,090
And I think they also have a Spock hand Yep there we go.

94
00:06:16,380 --> 00:06:19,460
So you can use any of these just like you use any other font.

95
00:06:19,500 --> 00:06:23,970
So if you want to change the color you just change the color property if you want to change the size

96
00:06:23,980 --> 00:06:24,130
.

97
00:06:24,360 --> 00:06:26,510
You actually change font size.

98
00:06:26,880 --> 00:06:35,730
So I'm going to use that retro camera search for that again which is camera dash retro so I need to

99
00:06:35,730 --> 00:06:44,880
do a dash camera dash retro and save refresh and we get that retro camera.

100
00:06:44,880 --> 00:06:46,710
All right so we're finished with the gallery.

101
00:06:46,710 --> 00:06:52,370
Aside from actually changing the image you are else which I'll do as soon as I finish this wrap up.

102
00:06:52,380 --> 00:06:56,310
You probably don't want to watch anyways but in case you do I'll include it at the end.

103
00:06:56,310 --> 00:07:02,340
So we have enough Bartra up here made a small change which was we use now far inverse which is how we

104
00:07:02,340 --> 00:07:04,110
got the black and white nav bar.

105
00:07:04,230 --> 00:07:07,650
But then we actually changed colors anyway so it didn't really matter.

106
00:07:07,650 --> 00:07:12,380
And then we also used nav bar fixed top which is how it stays up at the top.

107
00:07:12,480 --> 00:07:16,100
We use a grid system down here and then we use a jumbotron.

108
00:07:16,100 --> 00:07:20,960
I introduced glyph a concept built in Bootstrap icons which are relatively limited.

109
00:07:21,000 --> 00:07:26,160
There are most of the things that you would use but occasionally they won't have something or sometimes

110
00:07:26,160 --> 00:07:29,000
you just prefer the way that the fun awesome icons look fun.

111
00:07:29,010 --> 00:07:33,630
Awesome is definitely more popular than the food show with pecans and the other new thing I showed you

112
00:07:33,630 --> 00:07:38,550
was the thumbnail class which you can just put around an image and it will constrain that image into

113
00:07:38,550 --> 00:07:41,700
a grid and add this nice little border here.

114
00:07:41,700 --> 00:07:46,080
And then lastly we talked about specificity and how we had to battle the bootstrap styles if we wanted

115
00:07:46,080 --> 00:07:48,520
to change the color the background color.

116
00:07:48,620 --> 00:07:54,180
Want to change the background color of Nav. or the font color for links and also the color of the Nev.

117
00:07:54,210 --> 00:07:55,450
brand right here.

118
00:07:55,620 --> 00:07:57,410
OK so that's it in the next video.

119
00:07:57,420 --> 00:08:00,230
I'm going to show you how we can make a landing page with bootstrap.

120
00:08:00,300 --> 00:08:05,160
And as I promised I'm now going to go copy and paste those image links to make nine different images

121
00:08:05,160 --> 00:08:05,590
here.

122
00:08:05,760 --> 00:08:09,160
So if that's something you want to see hang around for the next minute or two.

123
00:08:09,660 --> 00:08:13,380
OK.

124
00:08:15,510 --> 00:08:23,790
So I'll just split screen this and I'll copy some of these over this first one and I'm just going to

125
00:08:23,790 --> 00:08:28,760
replace this one here and then I'll do the next one.

126
00:08:29,140 --> 00:08:29,580
Old Place.

127
00:08:29,580 --> 00:08:31,360
This one here.

128
00:08:32,610 --> 00:08:37,110
And then the next one I'm sure this is riveting

129
00:08:39,710 --> 00:08:47,350
and I'll keep going on down the line just like that.

130
00:08:47,350 --> 00:08:48,660
All right we're past halfway.

131
00:08:48,660 --> 00:08:49,650
We're getting close

132
00:08:59,220 --> 00:09:10,470
and the last one I think we did it let's say make sure everything looks good or fresh and we have nine

133
00:09:10,470 --> 00:09:11,440
different images.

134
00:09:11,700 --> 00:09:12,360
Awesome.

135
00:09:12,660 --> 00:09:12,960
All right.

136
00:09:12,960 --> 00:09:14,120
So now I'm done done.

137
00:09:14,190 --> 00:09:16,020
Hopefully enjoyed making that image gallery.

138
00:09:16,050 --> 00:09:17,060
I'll see you in the next video.