Join Jen Kramer for an in-depth discussion in this video Understanding the difference between default and fluid grids, part of Up and Running with Bootstrap 2.
Bootstrap ships with a 12-column grid system that comes in two varieties.…I am on the Bootstrap website at getbootstrap.com, and if you click on the Scaffolding tab here…on the top of the page, and you click on the link on the left side for the grid system,…you'll see the Bootstrap's default grid system.…As shown here, this is the default 940 wide grid.…It's designed to adapt somewhat via adaptive layout to different screen widths.…The numbers indicate how many columns wide each box is.…
In the first row, there is only one column per box, the next row is grouped into a few columns.…If you roll your mouse over each box here in the documentation, there is a tooltip that…will come up to tell you how wide each box is.…That tooltip only works in the documentation, it's not going to work on your live site.…Now you might be wondering, I just told you this is a 12-column grid, but yet when you…look at this example here on the Bootstrap website, you'll see that it's only 9 columns, why is that?…Well, the whole entire getbootstrap.com site is built in Bootstrap itself.…
- 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>