Nesting with fluid grids

On occasion, you may want to segment a portion of the grid that you're working with into smaller pieces.…For example, here's the web page that we built so far in this particular chapter, and inside…of the Content area, maybe we'd like to have two information boxes appear side by side,…underneath the two articles that are present.…Unfortunately, since that particular part of the web page has a span of nine, in other…words nine columns, I can't make two evenly-sized boxes, because one will be four columns…wide and one would be five columns wide.…

However, there is another approach that we can take to this.…We could nest another row inside of the row so that we would have 12 columns to work with…and then divide those 12 columns into 2 pieces of 6 columns each.…This is called a nested row inside of Bootstrap.…So I'm going to go ahead and implement one of these now.…If you go back into Dreamweaver and open up your HTML web page, and I'm going to scroll…on down past that second article here, and I'm going to add some more code.…

Resume Transcript Auto-Scroll

Author

Released

10/12/2012

Bootstrap is a free web development tool from Twitter that, with a little bit of CSS and JavaScript experience, makes building websites quick, intuitive, and fun. Author Jen Kramer explores its 12-column grid layout; typography and icon libraries; fully functional components like nav bars, buttons, and tabs; and much more. This course also shows how to add JavaScript extras like dropdown menus, modal windows, and photo carousels.

Topics include:

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

Making the nav bar responsive with JavaScript

Adding dropdown menus to the nav bar, tabs, and pill

Skill Level Beginner

2h 38m

Duration

462,892

Views

Show MoreShow Less

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?

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.

Are you sure you're working with Bootstrap 2.x? You download that from here: http://getbootstrap.com/2.3.2/. The carousel changed radically between Bootstrap 2.x and Bootstrap 3, and this course might not work with version 3.