0

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?

Ahmad
  • 8,811
  • 11
  • 76
  • 141
  • Are you talking about the vertical spacing? Generally that's covered by putting the relevant tags around the content such as form-group, label, or whatever is going in those columns, otherwise you would create a custom class and add some bottom margin. – Christina Jul 28 '14 at 21:04
  • yes vertical spacing between rows, I know form-group is for forms, I asked for a bootstrap class in such occasions! – Ahmad Jul 29 '14 at 07:13

1 Answers1

1

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).

Francis Booth
  • 676
  • 6
  • 11