I'm using Bootstrap 3.0 and can't seem to figure out how to add padding / space between panels.
<div class="row">
<div class="col-xs-4 panel">
<div class="panel-body">
<h4>First Cell</h4>
</div>
</div>
<div class="col-xs-4 panel">
<div class="panel-body">
<h4>Second Cell</h4>
</div>
</div>
<div class="col-xs-4 panel">
<div class="panel-body">
<h4>Third Cell</h4>
</div>
</div>
</div>
I have tried adding a class and setting the width to 30% but it only works if you have two panels and pull the one right. If I add a margin then it throws the responsiveness off and the last cell drops to the next line.
How can I responsively add a gap between the panels?
We set padding-right and padding-left on each column, and use negative margin to offset that at the start and end of each row to align content. Gutters start at 1.5rem ( 24px ) wide. This allows us to match our grid to the padding and margin spacers scale. Gutters can be responsively adjusted.
If you need to separate rows in bootstrap, you can simply use . form-group . This adds 15px margin to the bottom of row.
I'd be inclined to not combine .panel and .col*:
http://jsfiddle.net/isherwood/xTc7a/1/
<div class="row">
<div class="col-xs-4">
<div class=" panel">
<div class="panel-body">
<h4>First Cell</h4>
</div>
</div>
</div>
<div class="col-xs-4">
<div class=" panel">
<div class="panel-body">
<h4>Second Cell</h4>
</div>
</div>
</div>
<div class="col-xs-4">
<div class=" panel">
<div class="panel-body">
<h4>Third Cell</h4>
</div>
</div>
</div>
</div>
change the html like below,
<div class="row">
<div class="col-xs-4">
<div class="panel">
<div class="panel-body">
<h4>First Cell</h4>
</div>
</div>
</div>
<div class="col-xs-4">
<div class="panel">
<div class="panel-body">
<h4>Second Cell</h4>
</div>
</div>
</div>
<div class="col-xs-4">
<div class="panel">
<div class="panel-body">
<h4>Third Cell</h4>
</div>
</div>
</div>
</div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With