- View Offline
- Understanding the difference between default and fluid grids
- Nesting with fluid grids
- Creating a thumbnail gallery
- Adding block quotes and lists of text
- Incorporating images and icons
- Adding breadcrumb navigation and pagination
- Using tabs and pills navigation
- Adding dropdown menus to the nav bar, tabs, and pill
Skill Level Beginner
Now that we are clear on the difference between Bootstrap's two styles of grids, I'd like to go into more detail into the fluid responsive grid to show you how to mark up a page with some content. So I have gone ahead and created this web page in a previous video, and I am going to go ahead and get started right here inside of the body tag building out some of the grids, so you can see how this works. So in general, when you start a HTML web page inside of Bootstrap, you are going to start it with a div--actually, start this really in pretty much any type of web page these days.
You will have some kind of wrapper that goes around the entire web page, and inside of Bootstrap that would be a div with a class of container-fluid. So I am going to start by going ahead and putting that in place along with a closing div down here at the bottom. So that's going to encompass my entire web page, that's the outside wrapper. Then the next thing I am going to add to this is the start of my row. So if I have a div with a class of row-fluid, this will indicate where this particular row is going to start and stop.
So this is the very first part of the grid, indicating where each row of that grid happens to be. Inside of that, I might have another couple of divs, so let's say I have a div with a class of span3, in other words span3 columns and put something inside of it. So we could say, for example, here's a paragraph, here is a left column on this web page, and end that particular div. Then I can have a second div inside of this row.
So in this case, we have nine columns left over. So we'll put in a span9. So span1 through span12 are all the classes that are available to you, and each one of those classes indicate how many columns it should expand over. All right! So have a starting div here, we have an ending div, and then inside of that we've got some text. Here is the main content area of this web page.
I put just a simple paragraph inside of each one of these divs here, but of course, you could have quite an extensive set of markup inside of each one of these particular divs, the span of 3, and the span of 9. You could have images, you could have headings, you could have any kind of markup that you want inside of those divs. I am making this very simple as the first example. And if you're wondering where that slash div went, it looks like it's moved off the page, so I am going to get rid of that little extra space there. So now, if we go ahead and save this web page, File > Save, I am going to go ahead and view this inside of Firefox. I can do that here in Dreamweaver by going to the Globe icon on the top and saying Preview in Firefox.
You could certainly also preview this in Chrome or Internet Explorer, whatever you like. And you will see here that we have the start of a grid on the website, we have our left column, and we have a main content area. The main content area doesn't look that large because I only put in one sentence, but if you put in a more extensive chunk of text, you would see that it stretches all the way across the web page. Now I can already hear my friend Matt Thomas saying, okay, so you just put in a whole pile of divs into that markup, Jen, and that's not really semantically correct. Can we actually use real HTML5 markup and those HTML5 tags with Bootstrap? And the answer to that is yes, absolutely you can.
So let's take a look at a way that we could do that. I have done this with divs to start with because pretty much everybody understand divs, and there are number of you who are just learning HTML5 at this point in time. So one of the things that we might want to have in our particular web page is we might want to include a header here at the top of our web page. So inside of our div with a class of container-fluid, I am going to go ahead and put in a header for this particular web page, and in HTML5, the tag that you use for this is the tag of header, which I can use here as well.
So I can put in a tag of header, and I can give this a class of row-fluid. So, no extra div here in this particular markup, we just have the start of the header, and we have the finish of the header, and inside of that I'm going to put in the title of my web page. I might do that with an h1, and I am going to set this to have a class of span12 because I want it to go all the way across the web page. This is my first Bootstrap page.
So there we have better markup there for our header. Let's go ahead and fix what we did before with all of those divs in the second row here, what is now the second row, we have the div with a class of row-fluid. This might be a section of your web page, so we can change the div class of row-fluid to a section with a class of row-fluid, and then inside of that we have a left column, and we have some main content. There are tags that describe that as well. It could be depending on what exactly is in the left particular area that this might be an aside, so an aside with a class of span3, and it's possible and quite likely, in fact, that whatever goes on the right side of this page is an article.
So this might be the article tag, an article with a class of span9/article. So, now that I have got two rows here in my particular web page, I have a header, and I have a section, let's go ahead and save this web page and see what it looks like in a browser. Let's go ahead and say File > Save, and let's go ahead and view this in Firefox. So there's my heading, This is my first Bootstrap page, we have our left column, and we have our right column. So just because I have gone ahead and established this web page as having a left column and a right side with an article, doesn't mean that my next row has to be laid out exactly the same way.
So I am going to go back to Dreamweaver here, just to show you how that might work. Perhaps I want to add a row that has a very large left column and a very small right column. So I am going to add a section, once again, to the class of row-fluid, and inside of that, perhaps I have the article on the right side, this time an article with a class of span9. I like the 9 and 3, I think that looks good, but of course you could divide those columns into whatever numbers you wanted to use. Here is another article, /article and maybe time we put the aside over on the right side, so aside class of span3, so maybe we have some more information about that article over on the aside, and I can close that, and I can close the section.
So once again, just go to File > Save, and if I take a look at my web browser, you'll see that now I have a second row of information. We have our article on the left side of the screen, and over on the right side, we have more information about the article, that's that aside that I put in. It's in this case displaying in a right column. Okay, so the very last thing that we ought to do is add a footer to this web page. So I hop back into Dreamweaver here, HTML5 gives us a great footer tag for doing this. So in this case, footer will have a class, and I am just going to give this a span of 12 so that it goes all the way across the page, and maybe I have some text in here, Copyright, and some bottom navigation, go here /footer, whatever it happens to be that we want to putting in for that particular footer.
And then you should make sure that your /div is down here at the bottom. That /div closes the container-fluid from all the way at the top of the page, and we'll go ahead and save this one more time, File > Save, preview this in Firefox, and you'll see that we have a footer that's in place at the bottom of the web page. Finally, you might be wondering about the HTML5 markup that I just put into place, and that is currently being used in the web page that you just built. Bootstrap as a system and a framework indicates that it's mostly backwards compatible to IE7, however, sometimes you are going to find backwards compatibility issues with older browsers, particularly if you're working with these new HTML5 semantic tags that I just demonstrated, like header, footer, aside, article, and others.
Sign up for a Premium Membership to download courses for Internet-free viewing.
Watch offline with your iOS, Android, or desktop app.Start Your Free Trial
After signing up, download the course here or from the iOS/Android App.