Responsiveness CSS media query or container?

Question

Is it similar in using media query in CSS to using container utility in CSS bootstrap? I find the media query somewhat ridiculous in its implementation?

Media query: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

Answer 1

Introduction: Bootstrap is based on normal css (which include the media queries you posted) combined with js and html. But you have some classes and components (html tags) already customized in order to help you. Now it depends on what you mean by similar. You can use pure html, css and vanilla js to accomplish everything bootstrap offers (since this is what bootstrap is based on). But a lot of bootstrap features have a lot of code behind, so it would be quite complicated for some of them.

The response: Since the containers from bootstrap are based on css + js + html (some of them containing media queries as well) your html container won't behave the same by default (you can accomplish similar results only with some extra code).

The mdn link you posted is showing the normal behavior of css media queries. You can use them to extend bootstrap features or to create a custom html element that fits your needs (depending on the case, it can be easier to create the component from scratch rather than modify one with a lots of unneeded features behind).

Getting back to the question: some of the customized bootstrap elements have some media queries integrated (or some other custom options, including js) that might not work with pure css or they would be pretty hard to achieve. This is why the answer is kind of generic (as the question)

Conclusion: even though bootstrap might seem way easier in some cases I strongly advise you to try to understand the basics of css (media queries included). On the long term, this would help you a lot when you need to customize a component or create a new customizable component yourself. Also an advice: if you ever need to customize a component try to avoid !important rulles in css. To accomplish this try to also understand css specificity.