bootstrap class to provide vertical spacing for rows of a table?

969 Views Asked by At

I use bootstrap 3 grid system as the following

   <div class="row ">
    <div class="col-md-4 ">label1:</div>
    <div class="col-md-6"> {{{  $value1 }}} </div>
  </div>
   <div class="row ">
    <div class="col-md-4 " >label2:</div>
    <div class="col-md-6"> {{{  $value2 }}} </div>
  </div>

but rows are very tight together and I need some vertical spacing between two adjacent rows. I know form-group class works for forms, I look for such a class for rows of table or I should use form-group?

1

There are 1 best solutions below

0
On

A more semantic structure would be to use Bootstrap's horizontal description lists.

<dl class="dl-horizontal">
  <dt>label1:</dt>
  <dd> {{{  $value1 }}} </dd>
  <dt>label2:</dt>
  <dd> {{{  $value2 }}} </dd>
</dl>

They have the added advantage of auto-truncating the description with an ellipsis (...) if the description becomes too long to display.

Bootstrap CSS docs:
http://getbootstrap.com/css/#type-lists
(and scroll down to Horizontal description).