Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
The next thing I'd like to work on is taking an html page and marking it up with Bootstrap's grid system. And, so to do that, what I'd like for you to do is open up, in your exercise files folder, go to chapter two, go to folder for video number two. And there's two things here that I'd like you to copy over into your Bootstrap folder. What is this folder called? IMG. That contains all of the images that we're going to be using in this Up and Running with Bootstrap course. And the HTML file here called, 02_02. So if we go ahead and we copy both of these things from the exercise files folder, paste them into the boot strap folder, then we're all set to go with everything else and you can go ahead and close those windows.
I'm going to go into Sublime Text and I'm going to open the file called 02_02.html. Now, if I right click or cmd+click anywhere here on this html page, and I choose, open in browser. This is going to go ahead, and open in your default web browser. Which, for me, for what I'm using today, it's Firefox. For you, it might be Chrome, or Safari, or Internet Explorer, or something else. Doesn't really matter what browser it is but, I'm going to go ahead and open up and you're going to see the default page. So, what you see here is a logo, with a decorative picture next to it.
You see some, a little bit of text here at the top, here's some pictures with some headers and descriptions that read more links. There's four of those and then down here at the bottom there's a little bit of blah, blah that's something like a footer. All right so that's the way this initial page looks inside of our browser window. And if you open that on up inside of Sublime Text, what you will see here is the html that goes with that page. And I have gone through and put in a comment for you indicating where exactly everything is happening for these various rows.
So, there's a first row starting at line 13. That's those two icons for the logo and for the animals. Row two has got just a string of text and description. Row three here, which is line 23. You'll see that we have four of these units of a picture, a header here, a little bit of text. And then a read more link. That's sort of repeated four times. And then down here at line 41 we have row number four and this is sort of footer-ish sort of information.
So now that I've got these HTML comments in place indicating where these roads are. What I need to do is add actual bootstrap. Markup that would indicate where these rows are. And the way to do that, I'm going to start back up here at row 1. As I'm going to put in a div with a class of row. And then, after those two images that are called here, I'm going to put in a slash div. And I'm going to indent this, just to make this a little bit easier to read. Just highlight your text, and hit the tab button. And that will move everything on over a space. Okay. Here at row two, I'm going to do the same thing.
Div with the class of row and we're going to end that div down here just before row three around line 25. We'll put in that slash div. Then here around line 28 or so we're going to put in a div with class of row. And we'll put in our /div down here around line 45. Now, down here at the bottom, in row four here, I've been putting in divs with a class of row. This is obviously a footer, and there is nothing wrong with using those html semantic tags, so we could say footer, with a class of row instead. And that's certainly more semantic than just a regular old div.
Likewise, up here at the top of the screen, where we have this div with the class of row. We could change that to a header instead. Because, obviously, this is the head of the web site. So you could change that to just a header tag instead if you like to make use of those H channel five semantic tags. Alright, so now the next thing that I'd like to do, is I'd like to set up individual columns that I'm going to be using here. And the easiest place to start for this is going to be, down here, in row three, where we have the most amount of markup here.
We're going to want to set this up as four columns going across the page. And what I'd like to have happen is, I'd like to have this show as four columns going across the page. At Desktopish sort of resolutions. But when the screen gets small, I'd like to have this show as two units side by side going across the page. Just having them stack across of each other vertically, doesn't necessarily look that great, and I'll show you that here in just a minute. So let's start by trying to get this to go all the way across the page.
As four separate boxes. So if I have 12 columns to work with and I want four boxes, that means each of those boxes needs to be set to three columns wide. No matter which of the grids I pick, I want to have three columns wide. So the way I'm going to configure this is I am going to set these up here as a div with a class of And I'm just going to use the medium grid to start with. Col, hyphen, md hyphen three. So, I'm going to put that around here at line 29, to put this around the picture, the heading, the block of text, and the read more, so, that is going to end here at line 34, and I'm going to indent everything that was in between there once again just to make this a little more readable.
Then I'm going to repeat this same pattern, for these other particular parts of the page here. So I'm going to go ahead and we're going to put in this next round of, divs here. So this is going to go between lines, what are now lines 35 and 40, so this is around the kitten. And we're going to go ahead and put in the same div with a class of column medium three, starting at line 41, ending around line 46. And then here, last little bit. Okay.
So there we go. So we've got now our four boxes are all laid out here. A picture, a heading, a block of text, and a read more, and each of those is contained inside of this col-md-3. Why did I pick medium? Because I had to pick something to start with. And medium's pretty good. It's not small. It's not large. So we're just going to go ahead and save this. And then I'm going to take a look at this inside of my browser. If you just refresh what you've already got opened in your browser. You should now see that you have your series of boxes here.
All next to each other. And that looks pretty good. Of course remember my Firefox is maximized at 1,360 pixels. So it looks great here. What I need to do now, is I need to test this as I make it go smaller. Okay, so here's the medium breakpoint. Now it's all going to go vertical. Well this page doesn't really look that hot at this point. This would look a lot better if I had maybe two of these next to each other. At this lower resolution. So, what I can do to make that happen is, I can add just another call to another grid.
And remember that the extra small grid is the one that's going to stay horizontal no matter what. So what I could do here is add, in addition to col-md-3 I can add something like col-xs-6. In other words I'd like to take up six columns going across. So now I'll go ahead and add this class I'll call-access-six. To all of the places where I have indicated the col-md-three. And I'm going to go ahead and save that again, and I'm going to refresh my page.
And so now what you'll see is, we have four of these units going across these very large screen resolutions. When we hit that medium break point here at 992 pixels. There we go. Then what happens is we shift to the extra small grid and you can see here that these are now stacking on top of each other. So we have two units going across the page. Now if you still don't like the way this. Looks, in particular. Maybe you'd actually rather work with the small grid instead of the medium grid. So that, when you go to somewhere around this resolution here.
This is where that actual break point occurs. And you have two going across each of the row, instead of four. You're more than welcome to go back and change your code. This is what I meant before when I said, it sort of depends on what it looks like with your content. And how things are looking on the page, as to which grid system is the correct version for you. And I have some more modifications that I will be making to this page as time goes along. So I'm going to stick with this medium grid system for now. So we'll be going across at four on larger screen resolutions. And I'm going to leave it to extra small for the smaller screen resolutions.
Now that we've got row three all formatted and taken care of The next thing that we should take a look at is row one. So what I'd like to have happen here, is I'd like to have the logo on the left and I would like to have the animals over on the right. And separate these and space a little bit. So I'm going to go ahead and add some mark up to do that. So after the header with the class of row here on line 14 I will add a div with a class of call hyphen large hypen six, just to give me something to start with.
And I'm going to put a /div down here on line 17, once again fix the indenting, and then after that the animals are also going to go in this row, so I'm going to add a div with a class of, Col-lg-6. because remember everything has to add up to 12, except for the small grid. And we'll go ahead and indent that image as well. Here we go. Alright, so if we go ahead and save what we've got here so far, and we take a look at that inside of our web browser Refresh again. Here's our animals.
They're going horizontally across the page until I hit that 1,200 breakpoint. And then they're going to wrap like that. And they don't really need to wrap at that point. So I'm going to add another grid here. What I'd like to avoid happening though, is I'd like to avoid this logo and the animals getting too close together. So, what I am going to do is, I am going to add up here in my header row. I am going to add a class of the col hyphen small, hyphen five for the logo, and col hyphen small hyphen seven, over here for the animals.
And the reason I'm not making those also six is because what it like to have happening is that the logos a little bit less wide than the animal graphic is. So as the screen gets smaller, what I'd like is take a little bit of that extra room away from the logo and assign it over to the animal column. Again, that will get these two images closer to each other before they finally stack, vertically. So I'm going to go ahead and save this one more time. And I'm going to refresh my browser. So, as you saw before there's the large. But you see there, there's the little break point that's occurring here.
That's where we're going from the large grid to the small grid. Alright, and as we continue on down here with the small grid, all is well and we get quite close together with these images until they finally do wrap here, a little bit later on. Okay, so the last thing that we're missing here, that you probably have noticed is that our text is sort of smashed into the sides of the page here. And our content is stretching all the way across the page and if that is the look that you're going for that's totally fine. Or you could add some padding to the body tag, which would give you a little bit of space off the browser window.
There is absolutely nothing wrong with working with bootstrap the way we have programmed it so far. But some people like to add a container element around everything. And the container element will give the impression of this page being a series of fixed widths. So it would start at sort of 1200 pixels wide with some extra white space on the side as I drag this in. Then it will sort of bounce to the next size down. That effect you saw in the previous video with my grid example, and that is the container tag that is responsible for that particular look. Now let me show you how to put that in place.
So I'm going to go ahead and save that and let's refresh the webpage here. And you'll see now that we have this container that wraps around our elements here on the page. You see the white space. It's not pressed into the browser window any more. As the page gets narrower, we get a little bit more white space. Now what's going on here with this row is, these four images are all stacked on top of each other. In fact, they're pushed together so tightly, that they're actually having trouble resizing here inside of this grid.
And there is a fix for this problem. It has to do with assigning a class to these image elements, which I'm going to cover in a later video. So, don't think that this is. You're going to have to trim your images down or anything. The images are not designed to be responsive yet, and that will be something that we'll add in a couple of videos. So, anyway as you continue on down here in your grid sizes you'll see that, there we go we've got these now stacked on top of each other. They look much nicer that way. And then finally of course we get down to the smaller sizes and this image wraps around. We're going to continue to make a few tweaks to the home page for this website and some of the future videos.
But in the next video I'm going to try designing an inside page for this website and show you a couple more tricks with this grid.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.