Join Jen Kramer for an in-depth discussion in this video Nesting with fluid grids, part of Learning Bootstrap 2.
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.…
Author
Jen Kramer
Released
10/12/2012- 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
Duration
Views
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?
-
Introduction
-
Welcome47s
-
Using the exercise files1m 8s
-
-
1. Getting Started with Bootstrap
-
What is Bootstrap?2m 3s
-
-
2. The Grid System in Bootstrap
-
Nesting with fluid grids5m 57s
-
Adding a hero unit6m 10s
-
Creating a thumbnail gallery6m 51s
-
3. CSS Overview
-
Exploring basic typography4m 18s
-
Including blockquotes4m 26s
-
Including lists4m 52s
-
Styling buttons6m 6s
-
Incorporating images5m 34s
-
Incorporating icons3m 55s
-
-
4. Navigation Systems
-
Adding breadcrumbs8m 33s
-
-
5. JavaScript Effects
-
Tabbing within the same page7m 46s
-
Creating modal windows7m 11s
-
Creating a photo carousel6m 44s
-
Conclusion
-
Other resources38s
-
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.
Share this video
Embed this video
Video: Nesting with fluid grids