Leandro Faria
Reputation: 445
Spacing between boxes using bootstrap responsive scheme
I have a this layout based on bootstrap.
I've manually added a margin between the rows, but when I resize the page I want the columns to have vertical spacing between them as well.
How should I do this?
Full-size browser:
Resized browser:
Ans here's the code:
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row top-buffer">
<!-- VISITORS -->
<div class="col-md-4">
<div class="widget-body widget-white fixed-h-single-number-chart-sm">
<span class="light-grey">VISITORS</span> <span class="badge badge-question" data-container="body" data-toggle="tooltip" data-placement="right" title="Number of unique visitors to your web site"><small>?</small></span>
<br />
<span class="single-number-md">4,700</span>
<small>visitors</small>
<span class="badge alert-success" data-container="body" data-toggle="tooltip" data-placement="right" title="Previous 30 days">10%▲</span>
<div class="chart" style="height:105px;" id="visitors-chart"></div>
</div>
</div>
<!--/col-md-4-->
<!-- TRIALS IN PROGRESS -->
<div class="col-md-4">
<div class="widget-body widget-white fixed-h-single-number-chart-sm">
<span class="light-grey">TRIALS IN PROGRESS</span> <span class="badge badge-question" data-container="body" data-toggle="tooltip" data-placement="right" title="Number of trials in progress"><small>?</small></span>
<br />
<span class="single-number-md" data-toggle="counterup">235</span>
<small>trials</small>
<span class="badge alert-success" data-container="body" data-toggle="tooltip" data-placement="right" title="Previous 30 days">7%▲</span>
<div class="chart" style="height:105px;" id="trials-in-progress-chart"></div>
</div>
</div>
<!--/col-md-4-->
<!-- NEW CUSTOMERS -->
<div class="col-md-4">
<div class="widget-body widget-white fixed-h-single-number-chart-sm">
<span class="light-grey">NEW CUSTOMERS</span> <span class="badge badge-question" data-container="body" data-toggle="tooltip" data-placement="right" title="Number of new customers acquired this month"><small>?</small></span>
<br />
<span class="single-number-md">56</span>
<small>customers</small>
<span class="badge alert-success" data-container="body" data-toggle="tooltip" data-placement="right" title="Previous 30 days">2%▲</span>
<div class="chart" style="height:105px;" id="new-customers-chart"></div>
</div>
</div>
<!--/col-md-4-->
</div>
<!--/row-->
<div class="row top-buffer">
<!-- VISITORS TO TRIALS -->
<div class="col-md-4">
<div class="widget-body widget-white fixed-h-single-number-chart-sm">
<span class="light-grey">VISITORS TO TRIALS</span> <span class="badge badge-question" data-container="body" data-toggle="tooltip" data-placement="right" title="Percentage of visitors that have signed up for trial accounts"><small>?</small></span>
<br
/>
<span class="single-number-md" data-toggle="counterup">5%</span>
<small>conversion</small>
<span class="badge alert-success" data-container="body" data-toggle="tooltip" data-placement="right" title="Previous 30 days">7%▲</span>
<div class="chart" style="height:105px;" id="visitors-to-trials-chart"></div>
</div>
</div>
<!--/col-md-4-->
<!-- TRIALS TO PURCHASE -->
<div class="col-md-4">
<div class="widget-body widget-white fixed-h-single-number-chart-sm">
<span class="light-grey">TRIALS TO PURCHASE <span class="badge badge-question" data-container="body" data-toggle="tooltip" data-placement="right" title="Percentage of trials converted to purchases"><small>?</small></span></span>
<br />
<span class="single-number-md">17%</span>
<small>conversion</small>
<span class="badge alert-success" data-container="body" data-toggle="tooltip" data-placement="right" title="Previous 30 days">9%▲</span>
<div class="chart" style="height:105px;" id="trials-to-purchase-chart"></div>
</div>
</div>
<!--/col-md-4-->
<!-- TOTAL CUSTOMERS -->
<div class="col-md-4">
<div class="widget-body widget-white fixed-h-single-number-chart-sm">
<span class="light-grey">TOTAL CUSTOMERS</span> <span class="badge badge-question" data-container="body" data-toggle="tooltip" data-placement="right" title="Number of total active customers"><small>?</small></span>
<br />
<span class="single-number-md">488</span>
<small>customers</small>
<span class="badge alert-success" data-container="body" data-toggle="tooltip" data-placement="right" title="Previous 30 days">2%▲</span>
<div class="chart" style="height:105px;" id="total-customer-chart"></div>
</div>
</div>
<!--/col-md-4-->
</div>
<!--/row-->
<div class="row top-buffer bottom-buffer">
<!-- FTE SALES REPS -->
<div class="col-md-4">
<div class="widget-body widget-white fixed-h-single-number-chart-sm">
<span class="light-grey">FTE SALES REPRESENTATIVES </span> <span class="badge badge-question" data-container="body" data-toggle="tooltip" data-placement="right" title="Percentage of visitors that have signed up for trial accounts"><small>?</small></span>
<br
/>
<span class="single-number-md" data-toggle="counterup">6</span>
<small>sales reps</small>
<span class="badge alert-success" data-container="body" data-toggle="tooltip" data-placement="right" title="Previous 30 days">20%▲</span>
<div class="chart" style="height:105px;" id="fte-sales-reps-chart"></div>
</div>
</div>
<!--/col-md-4-->
<!-- QUOTA PER SALES REP -->
<div class="col-md-4">
<div class="widget-body widget-white fixed-h-single-number-chart-sm">
<span class="light-grey">QUOTA PER SALES REP <span class="badge badge-question" data-container="body" data-toggle="tooltip" data-placement="right" title="Percentage of trials converted to purchases"><small>?</small></span></span>
<br />
<span class="single-number-md">$4,200</span>
<small>dollars</small>
<span class="badge alert-success" data-container="body" data-toggle="tooltip" data-placement="right" title="Previous 30 days">9%▲</span>
<div class="chart" style="height:105px;" id="quota-per-sales-rep-chart"></div>
</div>
</div>
<!--/col-md-4-->
<!-- FORECASTED SALES -->
<div class="col-md-4">
<div class="widget-body widget-white fixed-h-single-number-chart-sm">
<span class="light-grey">FORECASTED SALES </span> <span class="badge badge-question" data-container="body" data-toggle="tooltip" data-placement="right" title="Number of total active customers"><small>?</small></span>
<br />
<span class="single-number-md">$25,200</span>
<small>dollars</small>
<span class="badge alert-success" data-container="body" data-toggle="tooltip" data-placement="right" title="Previous 30 days">2%▲</span>
<div class="chart" style="height:105px;" id="forecasted-sales-chart"></div>
</div>
</div>
<!--/col-md-4-->
</div>
<!--/row-->
</div>
<!--container-fluid-->Thanks!!
Upvotes: 2
Views: 847
Answers (2)
DaniP
Reputation: 38262
Try with a little media query like this:
@media (max-width:992px) {
.top-buffer > div {
margin-top:10px;
}
}
Or if suits your styles you can target the widget class:
@media (max-width:992px) {
.widget-body {
margin-top:10px;
}
}
Check this BootplyDemo
Upvotes: 2
ckuijjer
Reputation: 13814
Can't you simply add a margin-bottom: 30px on your widget class and remove it from the rows?
.widget-body {
margin-bottom: 30px;
}
.widget-white {
background-color: #fff;
}
.container-fluid {
background-color: #eee;
}<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row top-buffer">
<!-- VISITORS -->
<div class="col-md-4">
<div class="widget-body widget-white fixed-h-single-number-chart-sm">
<span class="light-grey">VISITORS</span> <span class="badge badge-question" data-container="body" data-toggle="tooltip" data-placement="right" title="Number of unique visitors to your web site"><small>?</small></span>
<br />
<span class="single-number-md">4,700</span>
<small>visitors</small>
<span class="badge alert-success" data-container="body" data-toggle="tooltip" data-placement="right" title="Previous 30 days">10%▲</span>
<div class="chart" style="height:105px;" id="visitors-chart"></div>
</div>
</div>
<!--/col-md-4-->
<!-- TRIALS IN PROGRESS -->
<div class="col-md-4">
<div class="widget-body widget-white fixed-h-single-number-chart-sm">
<span class="light-grey">TRIALS IN PROGRESS</span> <span class="badge badge-question" data-container="body" data-toggle="tooltip" data-placement="right" title="Number of trials in progress"><small>?</small></span>
<br />
<span class="single-number-md" data-toggle="counterup">235</span>
<small>trials</small>
<span class="badge alert-success" data-container="body" data-toggle="tooltip" data-placement="right" title="Previous 30 days">7%▲</span>
<div class="chart" style="height:105px;" id="trials-in-progress-chart"></div>
</div>
</div>
<!--/col-md-4-->
<!-- NEW CUSTOMERS -->
<div class="col-md-4">
<div class="widget-body widget-white fixed-h-single-number-chart-sm">
<span class="light-grey">NEW CUSTOMERS</span> <span class="badge badge-question" data-container="body" data-toggle="tooltip" data-placement="right" title="Number of new customers acquired this month"><small>?</small></span>
<br />
<span class="single-number-md">56</span>
<small>customers</small>
<span class="badge alert-success" data-container="body" data-toggle="tooltip" data-placement="right" title="Previous 30 days">2%▲</span>
<div class="chart" style="height:105px;" id="new-customers-chart"></div>
</div>
</div>
<!--/col-md-4-->
</div>
<!--/row-->
<div class="row top-buffer">
<!-- VISITORS TO TRIALS -->
<div class="col-md-4">
<div class="widget-body widget-white fixed-h-single-number-chart-sm">
<span class="light-grey">VISITORS TO TRIALS</span> <span class="badge badge-question" data-container="body" data-toggle="tooltip" data-placement="right" title="Percentage of visitors that have signed up for trial accounts"><small>?</small></span>
<br
/>
<span class="single-number-md" data-toggle="counterup">5%</span>
<small>conversion</small>
<span class="badge alert-success" data-container="body" data-toggle="tooltip" data-placement="right" title="Previous 30 days">7%▲</span>
<div class="chart" style="height:105px;" id="visitors-to-trials-chart"></div>
</div>
</div>
<!--/col-md-4-->
<!-- TRIALS TO PURCHASE -->
<div class="col-md-4">
<div class="widget-body widget-white fixed-h-single-number-chart-sm">
<span class="light-grey">TRIALS TO PURCHASE <span class="badge badge-question" data-container="body" data-toggle="tooltip" data-placement="right" title="Percentage of trials converted to purchases"><small>?</small></span></span>
<br />
<span class="single-number-md">17%</span>
<small>conversion</small>
<span class="badge alert-success" data-container="body" data-toggle="tooltip" data-placement="right" title="Previous 30 days">9%▲</span>
<div class="chart" style="height:105px;" id="trials-to-purchase-chart"></div>
</div>
</div>
<!--/col-md-4-->
<!-- TOTAL CUSTOMERS -->
<div class="col-md-4">
<div class="widget-body widget-white fixed-h-single-number-chart-sm">
<span class="light-grey">TOTAL CUSTOMERS</span> <span class="badge badge-question" data-container="body" data-toggle="tooltip" data-placement="right" title="Number of total active customers"><small>?</small></span>
<br />
<span class="single-number-md">488</span>
<small>customers</small>
<span class="badge alert-success" data-container="body" data-toggle="tooltip" data-placement="right" title="Previous 30 days">2%▲</span>
<div class="chart" style="height:105px;" id="total-customer-chart"></div>
</div>
</div>
<!--/col-md-4-->
</div>
<!--/row-->
<div class="row top-buffer bottom-buffer">
<!-- FTE SALES REPS -->
<div class="col-md-4">
<div class="widget-body widget-white fixed-h-single-number-chart-sm">
<span class="light-grey">FTE SALES REPRESENTATIVES </span> <span class="badge badge-question" data-container="body" data-toggle="tooltip" data-placement="right" title="Percentage of visitors that have signed up for trial accounts"><small>?</small></span>
<br
/>
<span class="single-number-md" data-toggle="counterup">6</span>
<small>sales reps</small>
<span class="badge alert-success" data-container="body" data-toggle="tooltip" data-placement="right" title="Previous 30 days">20%▲</span>
<div class="chart" style="height:105px;" id="fte-sales-reps-chart"></div>
</div>
</div>
<!--/col-md-4-->
<!-- QUOTA PER SALES REP -->
<div class="col-md-4">
<div class="widget-body widget-white fixed-h-single-number-chart-sm">
<span class="light-grey">QUOTA PER SALES REP <span class="badge badge-question" data-container="body" data-toggle="tooltip" data-placement="right" title="Percentage of trials converted to purchases"><small>?</small></span></span>
<br />
<span class="single-number-md">$4,200</span>
<small>dollars</small>
<span class="badge alert-success" data-container="body" data-toggle="tooltip" data-placement="right" title="Previous 30 days">9%▲</span>
<div class="chart" style="height:105px;" id="quota-per-sales-rep-chart"></div>
</div>
</div>
<!--/col-md-4-->
<!-- FORECASTED SALES -->
<div class="col-md-4">
<div class="widget-body widget-white fixed-h-single-number-chart-sm">
<span class="light-grey">FORECASTED SALES </span> <span class="badge badge-question" data-container="body" data-toggle="tooltip" data-placement="right" title="Number of total active customers"><small>?</small></span>
<br />
<span class="single-number-md">$25,200</span>
<small>dollars</small>
<span class="badge alert-success" data-container="body" data-toggle="tooltip" data-placement="right" title="Previous 30 days">2%▲</span>
<div class="chart" style="height:105px;" id="forecasted-sales-chart"></div>
</div>
</div>
<!--/col-md-4-->
</div>
<!--/row-->
</div>
<!--container-fluid-->Upvotes: 1
Related Questions
- padding/margin between bootstrap boxes not working
- Html css space between divs using bootstrap
- Bootstrap 3 - spacing issues
- Bootstrap - Giving Small Spacing Between Columns
- Vertical gap between Bootstrap columns
- Bootstrap: Too Much Spacing (Not Responsive)
- Space between elements using bootstrap
- Bootstrap Row spacing issue
- Margin between my boxes CSS
- Difficulties with DIV spacing