Know all we really need to focus on are the colors.
Let's start with a jumbotron.
So everything inside the JumboTron is just a different shade of blue and that shade of blue I have in
this document here to see 3 5 0 will go to our style sheet and we can just select the jumbotron and
give it a color and everything inside of it all up that color just like that are fresh and you can see
everything is changed to be blue including the cliff A-Kon the glyph icon is just treated as text.
It's actually a font so you can change the color of it using the color property.
Now let's tackle the nav bar which is a little trickier.
The background color isn't bad.
All we need to do is select nav bar Inv. or we could do.
Now if we are on after our fix stop but I'll do nav bar inverse and then give it a background color
of that blue background and paste that in and refresh.
And you can see it changes to be blue.
But to change the color here I want them to be white rather than that gray that they are.
If I just style all ink or tags which is what these are for just style anchor tags to be white it won't
quite work.
So I'll show you what I mean.
Anchor tag color white.
Go back.
It doesn't take effect and this is a great use for the inspector if we inspect it.
Take a look what's happening.
So we can see that our color white is crossed off and the color is being assigned right here.
This line color is this gray and if we uncheck it they go back to being the white that we want them
to be.
And that's because this is a more specific selector.
If you can think back to that lesson I did on specificity.
This is calculated to have a higher number or a higher specificity index than what we had here which
is just for little anchor tag versus this up here.
It's multiple classes.
Remember each one of those is ten times more specific than just an anchor tag.
So what we want to do is write a selector that will be just as specific and we can just steal this one
right here.
So we'll go in to here and paste that in and then change color to be white.
So we'll just override the exact same schlechter that bootstrap had.
And it's important that our styles occur after bootstrap so that we can override it and if we are fresh
We now get white links.
Lastly we'll do the same thing to the nav bar brand.
So as you can see that's inside of nav bar dash brand.
If we select that Daut now for our brand and we give that a color of white and save and go back it still
doesn't work and we have the same problem.
So if we inspect it you'll see that it's crossed off our styles down here where we're turning white
has been crossed off and rather is colors being changed by this line.
Now if Bar brand inside of nav bar Inv. so we can also just steal that and overwrite that.
So we just need that nav bar inv..
Now for our brand.
So basically we're writing styles that are going to clash head to head in a battle of the styles between
bootstrap and our styles and they're identical in the selectors.
So because ours comes second they're going to come out on top.
They're going to win go back refresh and never go.
We have most of the styles done.
There's one really minor thing that you probably won't notice on the screen cast the color of gray on
the JumboTron is ever so slightly different.
So I have that color here I'll just copy it and then go to RC SS and we'll just change the background
of the Jumbotron to be that gray colored and pay close attention as refresh.
Hopefully you can see it change.
It just changed.
It's a slightly bluer looking gray.
So let's test everything out.
Let's resize our NAV bar work.
The Javascript works just fine.
There we go.
Everything looks good.
The last thing I'll show you is how we can use a different icon here.
The one that I'm using is from a library called fun awesome fun awesome is a simple library that includes
a lot of different icons.
Way more than the built in Bootstrap with icons so you can get to it at Funt awesome.
Don't get her.
I know I'm on the home page here.
And if we click on icons there are over 580 different icons you can see them all here.
And one of the nice features that you can search through them which you can't really do on Pucelle very
easily.
So we can search for photo and we get camera and the camera retro which is what I used.
But before we can use any of them we need to install it.
So if you go to getting started.
They have a nice CDN that you can just copy and just put that inside of your application.
So we'll do that up top pay sudden.
And now we can use fun awesome icons and it's really really easy.
Actually if you click on any icon that you like that say I want to use the peace sign I can click on
it and they give you the little bit of code that you can copy.
So it's an icon with class equal to f a for fun.
Awesome.
And then F.A. dash the name of the icon.
Let's just replace the camera icon with this so it will have a big peace sign will save and refresh
.
And we have a peace sign.
So fun awesome is pretty awesome.
It's really popular.
Lots of great icons as you can see pretty much any icon you would ever need.
They have a bunch of the standard ones.
Pause play button.
Forward backwards different icons for technology and different Internet icons.
But they also have some more fun ones like peace signs.
And I think they also have a Spock hand Yep there we go.
So you can use any of these just like you use any other font.
So if you want to change the color you just change the color property if you want to change the size
.
You actually change font size.
So I'm going to use that retro camera search for that again which is camera dash retro so I need to
do a dash camera dash retro and save refresh and we get that retro camera.
All right so we're finished with the gallery.
Aside from actually changing the image you are else which I'll do as soon as I finish this wrap up.
You probably don't want to watch anyways but in case you do I'll include it at the end.
So we have enough Bartra up here made a small change which was we use now far inverse which is how we
got the black and white nav bar.
But then we actually changed colors anyway so it didn't really matter.
And then we also used nav bar fixed top which is how it stays up at the top.
We use a grid system down here and then we use a jumbotron.
I introduced glyph a concept built in Bootstrap icons which are relatively limited.
There are most of the things that you would use but occasionally they won't have something or sometimes
you just prefer the way that the fun awesome icons look fun.
Awesome is definitely more popular than the food show with pecans and the other new thing I showed you
was the thumbnail class which you can just put around an image and it will constrain that image into
a grid and add this nice little border here.
And then lastly we talked about specificity and how we had to battle the bootstrap styles if we wanted
to change the color the background color.
Want to change the background color of Nav. or the font color for links and also the color of the Nev.
brand right here.
OK so that's it in the next video.
I'm going to show you how we can make a landing page with bootstrap.
And as I promised I'm now going to go copy and paste those image links to make nine different images
here.
So if that's something you want to see hang around for the next minute or two.
OK.
So I'll just split screen this and I'll copy some of these over this first one and I'm just going to
replace this one here and then I'll do the next one.
Old Place.
This one here.
And then the next one I'm sure this is riveting
and I'll keep going on down the line just like that.
All right we're past halfway.
We're getting close
and the last one I think we did it let's say make sure everything looks good or fresh and we have nine
different images.
Awesome.
All right.
So now I'm done done.
Hopefully enjoyed making that image gallery.
I'll see you in the next video.