Please see my Bootstrap test here: https://codepen.io/El_Escandalo/pen/pojNjJM
I made a simple test that will make my divs stack when the screen is smaller than a large screen. But how do I add additional stylings specific to when it’s a smaller screen?
For example, if my divs are stacked (because the screen is smaller), I don’t want them directly on top of each other- I want some margin vertically between them. This margin isn’t necessary when they are side-by-side. So how can I specify different stylings based on the screen size?
I think you need to use media queries.
Bootstrap will fill the container that it’s in so yes, you’ll see that things are butted against each other. But if you have a paragraph within each of those columns there would be some margin.
I may not have explained that properly so someone with more Bootstrap knowledge please chime in.
I created a pen, based on yours, that show what I mean. The only thing I did differently was to create a
div within each of your existing ones and put in a paragraph. I also removed the height restriction in CSS.
@Roma Thanks for doing that! But it seems like there should be some option for styling-dependent-on-screen-size other than relying on inherit styling properties such as the
I could envision wanting to make multiple formatting changes depending on whether it’s a small vs large screen, more than could be achieved than simply framing the sections in a
I realize you can do this with media queries but I guess I was thinking that the whole point of Bootstrap is to “handle” a lot of what media queries do?