Best way to make Bootstrap responsive based on parent div?

Question

I need a container in bootstrap to be responsive based on the parent div instead of a media query. I can\'t figure out the best way without to do it, particularly without us

Answer 1

By using the elementQuery polyfill you should be able to accomplish this. Here is the repo on gitHub, here is an article on Smashing Magazine that explains more about the concept and here is a CodePen the author created to demonstrate how to use it.

Essentially you use CSS to define breakpoints based on the parent div. Here is an example of the syntax:

header[min-width~="500px"] {
    background-color: #eee;
}

Here is a relevant quote from the Smashing Article:

Introducing the element query. An element query is similar to a media query in that, if a condition is met, some CSS will be applied. Element query conditions (such as min-width, max-width, min-height and max-height) are based on elements, instead of the browser.