Search code examples
htmlcssbootstrap-4grid-layout

Why aren't my DIV's responding to row and columns break points?

I'm creating a row of highlighted products on my website. On desktop view I have 5 products. When I get to a medium size device, I want there to be 2 products and finally on mobile, 1 product. After reading Bootstrap's documentation on Grid System and Rows here I added the row-cols syntax and nothing happens. I'm sure I'm missing something but I can't figure out what it is. Also, in the codepen project I'm showing here, the product's info (image and text) get squeezed.

Here's my CodePen.

This is what it looks like in my computer, desktop view (it looks fine)

This is what it looks like in my computer, desktop view (it looks fine)

This is what it looks like in my computer when I make the screen size smaller. Not good.

This is what it looks like in my computer when I make the screen size smaller. Not good.

Solution

  • Make changes to this version and u will have ur grid. And make sure u will use Bootstrap 4

    <div class="container">
    <div class="row justify-content-center">
        <div class="col-sm-6 col-md-2">this</div>
        <div class="col-sm-6 col-md-2">is</div>
        <div class="col-sm-6 col-md-2">example</div>
        <div class="col-sm-6 col-md-2">use</div>
        <div class="col-sm-6 col-md-2">this</div>
    </div>
</div>