Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
The next part of Bootstrap I'd like to look at is something called the Jumbotron. And if you go to the lynda.com homepage and you've never signed into the lynda.com website, you will actually see a webpage that looks like this. And, you notice that great big huge honking picture here on the lynda.com homepage with some text and a button that says Getting started. If lynda.com was coded with Bootstrap, that area of the webpage would be called the Jumbotron. Lynda.com's not coded with Bootstrap. But this is the effect that we're after when we use the Jumbotron in Bootstrap.
So I'm going to show you how to add this to your website next. So I am back at file 02_06. This is from your Exercise Files folder. Copy the HTML over into your Bootstrap folder on your desktop. And we're going to scroll on down here to row 2. So row 2 here starts at line 24, and this is where we're going to put the Jumbotron. So if you right click anywhere on this page and choose Open in Browser, you'll see how the page is currently looking just to refresh your memory.
We've got this picture on the top here with the, "We treat your pets like our own" and a little bit of blah, blah. All of that is the Jumbotron. Underneath that we have our four boxes of information here. And as I make this page smaller okay, so remember that these boxes are rearranging themselves further down on the page. But there's just not much going on here in this middle area, which would really lend itself well to a Jumbotron. So, I'm going to go ahead and add that now. Back in Sublime Text here, some of you who have worked with Bootstrap 2 will notice that at line 25, I have a div with a class of row.
But then I have another div the way I have saved row 3, where I have another div that's calling for various parts of the grid system. And why is that? Well, in Bootstrap 3, if you have a row that's supposed to occupy all 12 columns at any particular dimension You do not have to include this div with a class of these various grid systems. You don't have to include that anywhere at all. So that's why that little bit of code is missing from there. It's assumed when you work with a Jumbotron that it's also going to encompass 12 columns on your page.
I mean that's the point of a Jumbotron is to be really, really big and very obvious. What we need to do here then to implement our Jumbotron is really quite simple. Instead of saying a div with a class of row, we're just going to say a div with a class of Jumbotron. Go ahead and save that. And if you refresh your web browser, you'll see that lo and behold we have a Jumbotron. That's all there is to it. So, here's our Jumbotron at a very large screen dimension. And, as I start to narrow the screen down here, you'll see that just like everything else in Bootstrap, this is adapting nicely to the smaller dimensions.
Alright, so one of the things that we might do to make this Jumbotron look a little bit nicer, is to take this image and maybe float it. We probably want to float it over to the right maybe, or the left, and wrap the text around it to make it look a little bit more nice. And Bootstrap does have classes for that. And we can go ahead an add those. Right here in the Jumbotron itself we could add a class. Of pull-right. And this is a class that's designed to float images. If we wanted it to go to the left, guess what the class would be? That's right, pull-left. So, go ahead and save that.
And if we refresh our web page There we go. So that looks a little bit better. We now have a nice little image over here off to the right side of the page. One of the other things you might want to do is round the corners on that image, for example. Maybe you want to round the corners on a number of images. There might be other things you'd like to do. I'm going to get to some of that other styling in later videos. But that's basically it in Bootstrap. That's how you make a Jumbotron, which used to be called the Hero Unit.
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.
Your file was successfully uploaded.