Leandro Faria Leandro Faria - 2 months ago 9
CSS Question

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:

enter image description here

Resized browser:

enter image description here

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%&#x25B2;</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%&#x25B2;</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%&#x25B2;</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%&#x25B2;</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%&#x25B2;</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%&#x25B2;</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%&#x25B2;</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%&#x25B2;</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%&#x25B2;</span>
<div class="chart" style="height:105px;" id="forecasted-sales-chart"></div>
</div>
</div>
<!--/col-md-4-->

</div>
<!--/row-->

</div>
<!--container-fluid-->





Thanks!!

Answer

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%&#x25B2;</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%&#x25B2;</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%&#x25B2;</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%&#x25B2;</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%&#x25B2;</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%&#x25B2;</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%&#x25B2;</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%&#x25B2;</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%&#x25B2;</span>
        <div class="chart" style="height:105px;" id="forecasted-sales-chart"></div>
      </div>
    </div>
    <!--/col-md-4-->

  </div>
  <!--/row-->

</div>
<!--container-fluid-->