<div ng-if="$ctrl.loading">
  <loading-spinner/>
</div>
<div class="row" ng-if="!$ctrl.loading">
  <div class="col-sm-offset-3 col-sm-9">
    <dl class="dl-horizontal">
      <dt><span translate>Username</span>:</dt>
      <dd ng-bind="$ctrl.profile.username"></dd>

      <dt>
        <a ui-sref="tos.index" target="_blank">
          <span translate>Terms</span>
        </a>
        <span translate>accepted</span>:
      </dt>
      <dd>
        {{ ::$ctrl.profile.agreement_date | dateTime }}
      </dd>
    </dl>
  </div>
  <div class="text-center">
    <button class="btn btn-warning"
            ng-click="$ctrl.disableProfile()"
            ng-if="$ctrl.profile.is_active">Disable profile</button>
    <button class="btn btn-success"
            ng-click="$ctrl.enableProfile()"
            ng-if="!$ctrl.profile.is_active">Enable profile</button>
    <button class="btn btn-info"
            ng-click="$ctrl.syncProfile()">Sync profile</button>
  </div>
</div>

<div ng-if="$ctrl.loading">
  <loading-spinner/>
</div>
<div class="row" ng-if="!$ctrl.loading">
  <div class="col-sm-offset-3 col-sm-9">
    <dl class="dl-horizontal">
      <!-- default dl-horizontal dt width is 160px.
           Add 13px to display Terms of Service and move content 13px right to maintain previous appearance -->
      <dt style='width:173px; margin-right:13px'><span translate>Username</span>:</dt>
      <dd ng-bind="$ctrl.profile.username"></dd>

      <dt style='width:173px; margin-right:13px'>
        <a ui-sref="tos.index" target="_blank">
          <span translate>Terms of Service</span>
        </a>
        <span translate>accepted</span>:
      </dt>
      <dd>
        {{ ::$ctrl.profile.agreement_date | dateTime }}
      </dd>
    </dl>
  </div>
  <div class="text-center">
    <button class="btn btn-warning"
            ng-click="$ctrl.disableProfile()"
            ng-if="$ctrl.profile.is_active">Disable profile</button>
    <button class="btn btn-success"
            ng-click="$ctrl.enableProfile()"
            ng-if="!$ctrl.profile.is_active">Enable profile</button>
    <button class="btn btn-info"
            ng-click="$ctrl.syncProfile()">Sync profile</button>
  </div>
</div>

Tweak dl-horizontal theme for Terms of Services
Tweak dl-horizontal theme for Terms of Services [WAL-759]

There is an option with div and bootstrap grid system which is not
responsive as dl-horizontal tag.
