How to assign additional stylings with Bootstrap for different screen sizes

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.

1 Like

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.

1 Like

@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 p margins?

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 p.

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?