Forums

This topic contains 2 replies, has 2 voices, and was last updated by  therockstar 7 months, 1 week ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #272519

    therockstar
    Participant

    Good day everyone,

    Hope you all are doing well.

    I am building product grid page however i am facing some bootstrap grid issues.

    Here is the example of my code https://codepen.io/romi/pen/mKmbPd

    How do I make it align nicely, three product in one row?

    Thanks in advance

    #272526

    Paulie_D
    Moderator

    You don’t have three products in each row…you have 12 products in a single wrapping row.

    The issue is that because BS3 uses floats if the items aren’t all the same height you can get this stagger stepping since item 2 is taller than item 3 etc.

    I’d suggest breaking the 1 row with 12 items into 4 rows of 3 each (oh, and you should be using a .container wrapping div as well) or updating to something that makes the items the same height like BS4 which uses flexbox.

    #272559

    therockstar
    Participant

    Thanks Paulie appreciated your advice I managed to solve the issuse using Flexbox approach.

    Cheers!

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

icon-link icon-logo-star icon-search icon-star