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

Creating new rows and cells

From: Up and Running with Bootstrap 3

Video: Creating new rows and cells

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.

Creating new rows and cells

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 up here at, just after the body tag on line 12, I'm going to go ahead and add a div with class of container. And then I'm going to take everything all the way down here down the page to just before the JavaScript and I'm going to indent that a little bit so I can read this a little bit more easily, and then down here around like 64 or so I'm going to put in a slash div that will close my container. And I can even put a comment in about that closed container. Just in case I get confused. As you know, we have lots and lots of divs that we stacked in here and it's easy to get lost.

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.

Show transcript

This video is part of

Image for Up and Running with Bootstrap 3
Up and Running with Bootstrap 3

37 video lessons · 26704 viewers

Jen Kramer
Author

 
Expand all | Collapse all
  1. 5m 25s
    1. Welcome
      58s
    2. Using the exercise files
      1m 19s
    3. Installing Sublime Text 2
      3m 8s
  2. 29m 0s
    1. What is Bootstrap?
      8m 1s
    2. Downloading and unzipping Bootstrap 3
      4m 31s
    3. Examining Bootstrap file structure
      4m 34s
    4. Adding CSS to a Bootstrap HTML file
      4m 35s
    5. Adding JavaScript to a Bootstrap HTML file
      7m 19s
  3. 44m 38s
    1. Exploring Bootstrap's grid system
      9m 10s
    2. Creating new rows and cells
      14m 5s
    3. Adjusting column widths using offset
      5m 2s
    4. Changing column order using push and pull
      5m 34s
    5. Nesting columns
      3m 43s
    6. Creating a JumboTron-style layout
      3m 41s
    7. Challenge: Working with grids
      1m 31s
    8. Solution: Working with grids
      1m 52s
  4. 53m 34s
    1. Exploring basic typography: The small and blockquote tags
      4m 29s
    2. Exploring Bootstrap's responsive classes including .hidden and .visible
      4m 44s
    3. Styling buttons using btn classes
      4m 43s
    4. Styling images with responsiveness and decorative touches
      5m 22s
    5. Incorporating Bootstrap 3 glyph icons
      3m 28s
    6. Creating a thumbnail gallery
      6m 2s
    7. Styling tabular data
      5m 3s
    8. Overriding core CSS with custom styles
      12m 53s
    9. Challenge: Styling panels and callouts
      2m 17s
    10. Solution: Styling panels and callouts
      4m 33s
  5. 27m 41s
    1. Implementing location breadcrumbs
      6m 38s
    2. Using tabs and pills for navigation
      6m 58s
    3. Developing a responsive navigation bar
      9m 9s
    4. Challenge: Modify the "pancake" button
      1m 3s
    5. Solution: Modify the "pancake" button
      3m 53s
  6. 37m 45s
    1. Implementing dropdowns within a navigation bar
      5m 5s
    2. Tabbing within the same page
      15m 45s
    3. Accordion panels with collapse functionality
      11m 37s
    4. Challenge: Tooltips
      1m 59s
    5. Solution: Tooltips
      3m 19s
  7. 3m 0s
    1. Next steps towards advanced Bootstrap
      3m 0s

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.

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 3.

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 preferences from 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.

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.