Bootstrap 4 x 4 Grid Collapse

Hi There,
I was hoping that someone might be able to help me as I am really stuck on a bootstrap display issue.

I am working on a website that has a 1250px wide layout. This layout sits within a “wrapper” container that has a 40px margin to the width of the web browser. Within this “wrapper”

I would like to get a centred 4 by 4 grid of 275px wide containers to collapse nicely. By nicely I mean:

@media(min-width: 1200px) for all the 4 containers to be visible.
@media(max-width: 900px) wide then the grid would snap to 3 x 6
@media(max-width: 600px) wide then the grid would snap to 2 x 8
@media(max-width: 300px) then the grid would snap to 1 x 16

My grid item css is like this:

.container-gallery {
width: 275px;
padding: 5px, 5px;
float: left;

At the moment when the browser is resized my .container-gallery grid items work for the smallest of the two media queries but they overlap on top of each other between about 600px to until about 1150px wide.

Is there a way to to force this snap to happen using media queries?

Thanks to anyone who could point me in the right direction as I am a newbie with all of this bootstrap responsive thing.

View Replies: View Best Answer
TheRealSean replied on at Permalink Best Answer Reply
Not sure if you are still working on this?

But you would need to do the relative queries within the media queries.

I would do this by adjusting the widths at the predifined sizes, I have created a quick example over here

You may also want to include the min-width,
@media(max-width(900px) min-width(600px)){

This example of course does not have the padding or margins on the divs so would need adjusting to suit but should do it.

edit; added full page pen,
ricknfa replied on at Permalink Reply
Hi Sean,
I found out that the problems I was having was due to a css override issue. Thanks for taking the time to help out and also for the heads up on
Very cool website.