What's the difference between media queries and Bootstrap? [closed]

Question

Strange To Bug my mind that, what makes the difference between CSS3 Media Queries and Bootstrap. I've Been Into so many Websites but everyone says that, both are for responsiveness of the website. If it is for same cause, why both are existing for responsiveness. I feel some major difference is there in between these two. Who ranks first among both in usage? Media Queries or Bootstrap? Stuck without clearance in my mind. Seeking for the explanation!!!

Answer 1

Think of bootstrap as the frame or skeleton of the site, it helps your layout to rearrange at certain preset breakpoints to appear in different ways on different screen sizes or devices. It achieves this through the use of media queries that rearrange certain elements of the layout at various pixel sizes.

It's not really recommended to edit the core bootstrap files, so you can write your media queries in your own CSS to restyle your content. They are used to apply CSS styles to elements at certain conditions, for example this would alter the font-size once the screen width dips below 414px.

p {
font-size: 12px
}

@media screen and (max-width: 414px) {
        p {
            font-size: 16px;
        }
}

This can be used for a huge number of purposes, a good use is increase the size of elements for easier use on a mobile sized device.

So to pull it all together you may use bootstrap to break your 3 column layout into a one column full width layout for mobile devices. And then you can apply styles that are specific to that layout only using a media query.

Answer 2

Media queries are the CSS mechanism for applying different styles depending on screen size, orientation, and other properties.

Bootstrap is a style and feature framework that leverages media queries, among many other things.

The two are not comparable or competitive in any way. You might as well ask which is better, engines or cars.