Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

nicholas maddren
nicholas maddren
12,793 Points
Posted by nicholas maddren
nicholas maddren
12,793 Points

What is the point in Bootstrap media queries?

Why does bootstrap include media queries? Doesn't the grid system already solve the problem of developing a mobile responsive site?

Thanks :)

3 Answers

Florian Goussin
Florian Goussin
8,925 Points
Florian Goussin
Florian Goussin
8,925 Points

The grid system and the media queries work together.

The grid system allow you to have a web site which resize correctly for many devices.

But the point is also to have a adaptive layout for each device. So if you need to change part of the layout for a target design you are supposed use the media queries.

For ex you can hide some extra elements in a mobile version of your site.

Eric Ellenbrook
Eric Ellenbrook
9,006 Points
Eric Ellenbrook
Eric Ellenbrook
9,006 Points

The media queries set breakpoints in the grid system so things can smoothly change.

For example if you have a grid of four items across, that might not look good on a tablet so the media query is there to change items of 25% width at 4 across to items at 50% width at two across. That might not look on mobile so it changes items to 100% width at 1 across.

The grid system is fluid but there still need to be breakpoints in the grid in order to make things look good on other devices.

Like how the "Tips for asking questions" section is on the right on a large screen but on bottom for a mobile device or tablet.

nicholas maddren
nicholas maddren
12,793 Points
nicholas maddren
nicholas maddren
12,793 Points

So are you not adding the breaking points with the grid system? For example if I add:

.col-md-4

Then give it another class of:

.col-ld-6

Will that not change the breaking points?

Eric Ellenbrook
Eric Ellenbrook
9,006 Points
Eric Ellenbrook
Eric Ellenbrook
9,006 Points

Here is a good post about it: http://stackoverflow.com/questions/19592968/bootstrap-3-breakpoints-and-media-queries