Welcome back in this lesson we're going to build a small project using what we've learned so far about
bootstrap.
It will include a lot of the components we've been talking about including it now bar the jumbotron
and the grid system.
I also threw in one or two new things including the icons here.
We haven't seen how to do those just yet.
And also the fact that this nav bar as I scroll it will see it stays fixed to the top so it doesn't
scroll the way we have a fixed nav bar which we also haven't seen just yet.
And then lastly we're changing some of the colors of the default bootstrapped components.
So this is actually a slightly different shade of gray.
This is the shade of blue and the nav bar has some different colors.
So I'll be showing you how to do all of that before we get started writing any code.
Just want to take a moment to point out the fact that these images for the most part are from a Web
site a great resource called Splash.
So splash provides a bunch of beautiful high rez photos that you can do whatever you want with.
You can read the license here but it's pretty much whatever you want.
It's a creative commons license blah blah blah I'm sure I don't really care about that but the photos
are really awesome and I'm using a lot of these eight of them.
In fact in our gallery.
And that leaves one image which is this one right here that I actually took myself over taken a photography
class and this is the first thing I've taken that looks half decent.
I think even though compared to these ones not looking so hot.
Anyway if you want to use these exact same images which is not important.
This will work with any images at all.
But if you want the exact same ones I've included all of the links in this file gallery M.D that have
uploaded along with this video and have also included the two colors that we're going to use the dark
blue and the light gray.
OK.
So with all of that out of the way let's now get started on the project.
So I have an empty file gallery.
H m l.
I'll add in my h d m l skeleton here and we'll just call this image gallery and the first thing we need
to do is include bootstrap.
And I'm just going to copy over the CD ends from an old project so I'll do that right now.
Here we go.
I'm linking to the bootstrap CDN.
And while I'm here I will also grab the bootstraps CSSA and Jay queery city and that we did in the nav
bar lesson and put those at the bottom here so that when we add the nav bar in we don't have to go hunt
for these files or for the script tags.
So a save and the first thing that we can do is add in our Jumbotron.
That's nice and easy.
So we'll have a div and that will be class equals Jumbotron.
And then inside the Jumbotron will start with an H1 that just says the image gallery.
There we go and we'll save and let's make sure this works.
So it will open up this file.
So we have Boucek included.
We're seeing the font change.
We're seeing this gray from the Jumbotron.
Let's now make sure that it's inside a container like it is here rather than what we have where it just
goes all the way across the screen.
So we'll do that div class equals container.
There we go and let's do this properly and refresh and we'll go back.
All right so we have the Jumbotron but add in this paragraph.
Now we'll come back and do the icon but that's just a paragraph tag beneath the H-1 we'll save.
Feel free to put whatever text you want there and we're done with the Jumbotron for now.
So let's go back and let's now do the nav bar and I'm not going to type enough bar from scratch for
two reasons.
One is that it's quite a bit of code.
It will take a long time.
And this video.
But two is the fact that I almost never type in Ackbar from scratch.
As I mentioned in the NASCAR video most of the time my workflow is that I go to the bootstrap site or
to a previous site that I've made with an NAV bar and I copy that.
And I just checked it and I get rid of the pieces that I don't want.
I add some new pieces in.
So that's where I'm going to do here.
I already have enough part that I did in the nav bar said each HTML application.
It's right here and I'm just going to copy that in and then we'll tweak it a little bit.
So let's copy it in and I'll go back and we'll just put this at the very top of the file just like that
.
And let's see what we get are fresh and we have the nav bar.
It's close.
We want to change the brand here.
We also want to change the color eventually and we want to make sure that it's fixed to the top which
it isn't right now but we'll get there.
Let's go back and just change the brand.
So instead of coffee I called mine images you can call this whatever you want.
Of course make sure that it works ok.
The next thing I'll show you is a quick change we can make to alter the color where appear instead of
nap or default.
We can do now if bar in verse and I'll show you what that looks like.
We get a dark now for now or the colors have been inverted where the text is light and we get a dark
background.
It's still not the blue color that I'm going for over here.
And the font is also not white but we'll come back and fix that.
This is close enough for now.
Now we can focus on the actual image gallery on that grid down here.
And let's start by looking at how it behaves on the solution.
So it starts with three images going across and then as I resize it goes down to two and then it goes
down to two and then finally at the small size it goes to one as you can see here.
And we have one image going across.
Let's begin by setting up the grid for this large size where we have three going across.
Remember we have 12 units total.
So if we want three going across we're going to designate each of them as four units.
So let's set that up just below our Jumbotron.
Still inside the container though we'll just do div class equals row and then inside of that we'll have
div class equals and we want it to be four units.
So we'll do column large dash 4 and hit enter and we can start by just putting some text here and then
I'll duplicate that because we want three of those.
And I won't worry about fixing the indentation yet because we're going to make a bigger change in just
a moment.
But let's refresh and we get those three columns going across.
So the next thing that we want to do is get some images going and all start but just taking the L of
my Golden Gate Bridge photo and we're going to add an image tag rather than text.
So image source equals that the Golden Gate Bridge you are ill and I'll just paste that three times
and save.
And if we go back we have a problem which is that that image is huge even though we have those three
columns.
Our image isn't staying inside of our column it's not shrinking down.
You can see what we'll do to fix this is add adding a little bit more bootstrap.
I haven't showed you yet to create this nice little border around it and it's called a thumbnail.
All we need to do is write a div with class equal to thumbnail and then whatever image we put inside
of it will be scaled down to fit inside the column.
And it also gets this little border here which I think looks pretty nice.
So to do that I'm actually going to get rid of what we have with those to just go back to one single
image and add in a div class equals thumbnail and done that properly.
And we wrap that around the image and save.
Now if we refresh.
You'll see if we get a single image that takes up the appropriate amount of space inside that grid.
This is the column and it has a little border around it and the image isn't gigantic which is great
.
So let's make sure it works if we duplicate this.
So this is one image let's duplicate it three times and see what happens refresh.
And there we go.
We have three images.
I'll go ahead and add six more in.
So we have nine total like we do here.
And we actually don't have to add separate rows.
We can just put them all in the same row.
So copy all three that we have so far to times and save.
That will give us nine images.
And if I refresh you'll see that they automatically wrap to the next line.
So we only have to have one row and add in those columns you know medically nos.
If we want each image to take up four units then that means three per row and then we need three rows
of images.
I'll go back and change all these image you elves at the end of the video.
I don't want to make you watch that.
Very interesting just copying and pasting but let's focus on the rest of this grid.
So right now as soon as a hit medium it goes to one image across which is not what we want what we're
looking for is two images across at that medium breakpoint.
And then after the medium break point which is there we hit small and we still want it to stay at 2
.
So to fix that in ours or it goes to one immediately at the large break point or the medium breakpoint
and then small and extra small stays at 1.
We can go back in here and we'll change all of these you know select and hit command d select all instances
of call them large for and then I'll hit the left or right arrow to move the cursor.
Now I can edit them all at once.
And what I want to do I could add in column medium six because we want to Perrow and that will work
.
And if I go back and refresh you'll see they stay at 3 per row and then I hit the median breakpoint
and they go to 2.
But then I hit small and it jumps to one and to ours when we hit small the solution stays at 2.
So to fix that rather than doing column medium six we can do column small 6 and go back again refresh
this version.
We hit medium.
We go to two.
We hit small.
We stay at 2 and then we go to extra small and we're at 1 1 image per row.
Perfect.
So that's all we have to do for the grid and we're done with most of the functionality here.
Very very quick to get that up and running.
What we want to focus on now are some of the colors and also the icons.
I'll start by showing you how we add icons using bootstrap.
So on get bootstrap if you go to components there are these glyph icons up top and there's a bunch of
them to pick from.
And we'll find one that we want to use and the one that I'm using.
I'll just do a search for I think it's camera.
So there's this camera here and I'm not using that camera.
It's slightly different.
The one that I'm using is a more retro camera and I'll show you how to add that in.
It's actually not part of bootstrap But let's start with the regular camera that comes with bootstrap
.
So we write Clifford Kahn and then go with the conn dash camera.
And if you scroll further down you can see where they explain how to use it to create a span where a
class is equal to with Con and then glyph it can dash the name of the glyph icon.
So let's copy this span in and we'll start by doing it inside the H-1 just put it at the very beginning
of the H-1 and we want an quick A-Kon dash camera and we'll save and refresh.
And just like that you can get a camera in there.
And if we want to space we can either do it through padding or we can just add a space right there.
And we get a space we can do the exact same thing for the nav bar and I used one that gets called Photo
go double check up here.
You can do a search on this page for photo picture.
There it is.
It can go if it can dash picture.
So we'll go up to the nav bar brand right here and we paste in that span again.
And then inside the span the class should be click on picture and we'll add a space there as well.
We go back to our site are fresh and we now have a little picture there.
And we also have the camera.
Next let's tackle the nav bar and we'll start by making it fixed to the top so you can see right now
.
That nap our scrolls away.
But on the solution it stays there.
And to do that it's a single class that we have to add to our NAV bar.
So right up here we want nav bar dash fixed dash top and save.
And if we are fresh you'll see it's fixed to the top.
There is one small issue which is that our content is now behind it a little bit and we want it to have
that normal spacing above the Jumbotron.
What we need to do is add a little bit of padding to our body and it happens to be 70 pixels.
The bootstrap docs will tell you that if you ever forget 70 pixels of padding is what we want that's
the width of the now four.
So we'll go here and we'll create a style sheet now and I'll call it gallery Dotsie SS and then inside
select body padding top 70 pixels and then we need to add that in linked to that style sheet which is
Gallery C S S.
Now let's make sure that's working.
There we go.
We have our spacing back and NFR is still fixed to the top as you can see perfect