Join Jen Kramer for an in-depth discussion in this video Adding a hero unit, part of Up and Running with Bootstrap 2.
A hero unit is a big area usually spanning the width of a web page that intends to draw user attention.…For example, I'm looking at the lynda.com homepage, and this site is not built with…a Bootstrap framework, but if it was, this particular area at the top of the page where…you see the text here and the video over on the side, this would be considered a hero…unit, and we're going to try implementing one of these in the new document that I'm…starting for this particular video.…So if you go to the new document that I've given you in your exercise files, open that…up, we're going to go ahead and add a hero unit to this particular page.…
So, we're starting from the very beginning of a Bootstrap document here. So as we've…done before, we're going to start by adding a div with a class of container-fluid…to have that big wrapping div that goes all the way around the web page, and I'll close…that down here at the bottom.…And then just as we've been doing all along, we have to start a row, so I'll have a div…
- 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
Q: I am trying to create the image carousels shown in this course, and they are not functioning properly. The custom.css file seems to be missing from the exercise files and I think this is the reason. Can you provide it?
<div>A: custom.css isn't created until the carousel indicators are added. However, these styles have to do with the way the indicators look, and nothinghas to do with the way the carousel functions.</div><div> </div><div>Are you sure you're working with Bootstrap 2.x? You download that from here:
<a target="_blank" href="http://getbootstrap.com/2.3.2/">http://getbootstrap.com/2.3.2/</a>. The carousel changed radically between Bootstrap 2.x and Bootstrap 3, and this course might not work with version 3.</div>