Beniamino_Baggins Beniamino_Baggins - 6 months ago 25
CSS Question

bootstrap columns without rows padded more than columns with rows

I'm using the bootstrap grid system to lay out a modal.

The part of the modal that displays shops cannot have rows, because it is simply a foreach shop in shops, so I can't insert rows in between them. This is fine except that it seems to add more padding when the columns are not inside rows, which causes my shops to not be vertically aligned with the content above. Here is what I mean (the shops are the solid white divs):

enter image description here

The shops are padded further in than the content above them. The shops are not in a row.

code for one shop:

<script type="text/html" id="shop-template">
<div class="col-sm-6" style="">
<div style="height: 200px;width:100%; background: #fff;border-radius:15px;padding: 25px;">
<h6 class="medium-text shop-info"
data-bind="text: name" >
</h6>
<h6 class="medium-text shop-info"
data-bind="text: suburb"
style="">
</h6>
<h6 class="medium-text shop-info"
data-bind="text: streetNumber" style="display:inline;">
</h6>
<h6 class="medium-text shop-info"
data-bind="text: street" style="display:inline;">
</h6>
<h6 class="medium-text shop-info"
data-bind="text: country" >
</h6>
<h6 class="medium-text shop-info"
data-bind="text: postalCode" >
</h6>
</div>
</div>
</script>


How do I make the shops vertically aligned with the content above?

Answer

You don't need to divide them up into multiple rows - just putting one single row element around them should take care of the padding issue.

There is only room for two col-sm-6 columns next to each other, so the following ones will go below in pairs of two anyway.

(Maybe a little extra top/bottom margin for the columns, or - padding for the outer row might need adding for it to look good.)