Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Exploring the fluid grid and creating new rows

From: Up and Running with Bootstrap 2

Video: Exploring the fluid grid and creating new rows

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.

Exploring the fluid grid and creating new rows

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.

Modernizr is a JavaScript solution that can help make HTML5 backwards compatible with older browsers. It's not perfect, nor is it the only solution to make this work, but it is a solution that's widely used, and when you might want to try if you find your Bootstrap work is producing bugs in older browsers that you wind up having to support. You can find this by going to modernizr.com, and this particular website will explain everything that you need to know about Modernizr. Modernizr itself is beyond the scope of this course, but you can find it covered in other titles at lynda.com. Modernizr is indeed compatible with Bootstrap.

Show transcript

This video is part of

Image for Up and Running with Bootstrap 2
Up and Running with Bootstrap 2

32 video lessons · 19766 viewers

Jen Kramer
Author

 

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Join now "Already a member? Log in

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Up and Running with Bootstrap 2.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

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.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.