How to display Bootstrap grid view with elements inlined in the same block?

Question

I am using bootstrap "list grid products view" sample and grid elements are displayed fine when description and picture height is the same.

Working sample: https://codepen.io/ajaypatelaj/pen/zIBjJ

Problem comes in when description, price and picture are of different height and do not display elements in line:

https://codepen.io/getkitchendeal/pen/gRgGeG

i tried to fix with=>

display: inline-block;
vertical-align: top;

score 0 · Accepted Answer · answered Jun 17 '17 at 15:07

0

There is a way to fix this, but it's ugly. It's called the clearfix hack. Check out this thread What does the clearfix class do in css?

answered Jun 17 '17 at 15:07

Jonathan

2,700
4
23
41

1

Thank you, i ended up using clearfix class and adding row class dynamically (https://stackoverflow.com/questions/27211799/angular-ng-repeat-add-bootstrap-row-every-3-or-4-cols) – Kitchen Deal Jun 17 '17 at 16:41

score 0 · Answer 2 · answered Jun 17 '17 at 15:15

0

What I would do here is fix min-height for each block for grid system.

Create a new css rule:

.list-group-item .thumbnail {
    min-height: inherit;
}

And add another one in .thumbnail

.thumbnail {
    margin-bottom: 20px;
    padding: 0px;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    min-height: 400px; #new rule
}

answered Jun 17 '17 at 15:15

Ramon Marques

3,046
2
23
34

Thank you, your solution did work and i have updated the codepen code:(https://codepen.io/getkitchendeal/pen/gRgGeG) – Kitchen Deal Jun 17 '17 at 16:31

How to display Bootstrap grid view with elements inlined in the same block?

2 Answers2