Join Jen Kramer for an in-depth discussion in this video Exploring Bootstrap media queries and device-specific styling, part of Up and Running with Bootstrap 2.
One of the last things you might want to do working with your grids in responsive design…inside of Bootstrap is you may wish to have some particular parts of the layout visible…only on a desktop or visible only on a tablet, visible only on a phone, or you may want to…hide on one of those devices, and Bootstrap includes some classes that will allow you…to do exactly that.…I am at getbootstrap.com, and I'm under the Scaffolding tab under Responsive design, and…if you'll just scroll on down here a little bit on this page, you'll see a very useful…chart here under Responsive utility classes.…
So this explains to you exactly how these particular classes work and what particular…devices using those classes will produce content that's visible or invisible on certain devices.…We're going to put those to work here in just a second.…So, what I would like to do is I'd like to set up a row on the web page that we've been working…on so far, and I'm going to have it set up such that I'm going to have some text that's…
- 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>