Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Now that you know a bit about Bootstrap's styling, now it's time for yet another challenge. So here's what I'd like you to take a look at in this particular challenge. So first of all, in the page that I'm about to show you, in your Exercise Files folder. Its 03_09 the html file, copy it into your Bootstrap folder. If you take a look at that, what I'd like for you to do is to style the left column as a panel. And a panel is a specific kind of Bootstrap styling, you're going to need to go to the Bootstrap website, take a look at their documentation.
And here's the URL for it. Read about panels and see if you can figure out how to style that left column to be a little bit more attractive in the form of a panel. Then the next thing that I'd like you to do, is to take the four boxes that stretch across the bottom of the page, and I'd like you to turn these into thumbnails. Even though there's no images present, the thumbnail, remember from the Thumbnails video that I did a little bit earlier, puts a nice little box around each one of these with captions and things. And so I'd like you to implement those as thumbnails just to draw a little bit more attention to those little boxes of information So to be a little bit more specific about this, if you come to the webpage here, it's the one we've been working on so far.
These are the boxes down here on the bottom. I'd like you to treat those all as individual thumbnails. And even though there's no images here, you can still treat these as little boxes of text as thumbnails. Notice that you are going to encounter one little problem here as you work on this. As you make your screen narrower, because these are all different sizes. Look, that you've got a little wrapping problem that's going on here. So, what's happening is that the text here in Vaccinations is a little longer than the text in Checkups. So Senior Pets, which is supposed to be aligned right here under Vaccinations, actually winds up getting pushed over to the right.
And Diet Plans winds up on another line because there was room for it on the second line. So, that's another little thing that you're going to have to look into. You take a look at Bootstraps grid documentation. You might find this problem directly addressed. I estimate that this challenge will take you about ten minutes to solve. Maybe it might be a little bit more time. It might take some of you more like 20 minutes. If you have a little bit less experience with HTML and CSS, you may have a little bit more to read. And I'll show you my solution to this challenge in the next video.
Get unlimited access to all courses for just $25/month.Become a member
58 Video lessons · 59998 Viewers
61 Video lessons · 92675 Viewers
82 Video lessons · 104181 Viewers
56 Video lessons · 107160 Viewers
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.