0

I am using bootstrap 3 for grid layout.

enter image description here

Problem arises when resizing enter image description here

I have used following classes in a column: 

col-sm-4 col-ms-6 col-xs-12 col-md-3

The expected behaviour is that the whole row should be pushed when column height increases.

I searched for similar issue here and found this but it didn't help Similar question

bring2dip
  • 886
  • 2
  • 11
  • 22
  • 1
    If you're able to use v4.x of Bootstrap its flexbox Grid approach will alleviate this issue without the need for additional code. Otherwise I recommend following the advice of Nadeem Gorsi whose answer is *perfect* for Bootstrap 3. – Robert May 30 '18 at 13:48
  • @RobertC Right now I'm not planning for the upgrade to v4.x. However, thank you for your suggestions. – bring2dip May 30 '18 at 15:12
  • it seems `col-ms-6` is not valid class of bootstrap 3. https://getbootstrap.com/docs/3.3/css/#grid-options – Banzay May 30 '18 at 20:44
  • @Banzay I have used a custom class for mid small range – bring2dip May 31 '18 at 02:04

1 Answers1

1

Create one <div class="row"></div> for every four columns or products/items.

Or User This after every 4 items (divs you are using for your products)

<div class="clearfix"></div>
TechNerdXp
  • 358
  • 2
  • 6
  • 22
  • If I programmed to add clearfix after every fourth element, when I resize to smaller devices which renders 3 columns then it clears the float after the fourth item. So it doesn't work this way either. changing after how many numbers to add clearfix when resizing I think would be inefficient. – bring2dip May 30 '18 at 15:31
  • 1
    you can remove clearfix on smaller devices using javascript/jQuery. – TechNerdXp May 30 '18 at 15:35
  • I was searching for only CSS hack.i have not used jquery in the project and I am also not using javascript for handling the responsiveness of the site. The above answer works well when there are four columns so I upvoted the answer. I appreciate your answer, unfortunately, it doesn't provide me the solution. – bring2dip May 30 '18 at 15:47
  • Then create your custom clearfix like myClearfix to work on only your desired media query. – TechNerdXp May 30 '18 at 15:53
  • I think this solution is good enough but is too crude, though it has to be extended with `visible-**-*` class : https://getbootstrap.com/docs/3.3/css/#responsive-utilities-classes since you want to use pure bootstrap 3 – Banzay May 30 '18 at 20:55