Bootstrap to display dynamic checkboxes in 3 columns

I am using Bootstrap 3 in my Angular 4 app to create a form. In the form, I need to render checkboxes on the basis of data returned from a web service call. So, I need to iterate over the data and render a checkbox for every value received.

The display for these checkboxes is bit messed up as in the screenshot below -

Is there a way to display these checkboxes in 3 columns. Something like this (looks much cleaner)
My current code is as below

<div class="container-fluid">
  <div class="row">
    <div class="col-xs-12">
      <form [formGroup]="myForm">

        <div class="row">
          ...
        </div>
        <div class="row">
          ...
        </div>
        <div class="row">
          <div class="col-xs-8">
            <div class="form-group">
              <label for="options" class="col-xs-4">Options</label>
              <div class="checkbox"  formGroupName="options" *ngFor="let option of options">
               <div class="col-xs-4">
                <input id="{{option}}" formControlName="{{option}}" type="checkbox" 
                         [checked]=false> {{option}}
               </div>
              </div>
            </div>
          </div>
          <div class="col-xs-4">
            <div class="form-group">
              <label for="name" class="col-xs-4">Name</label>
              <div class="col-xs-8">
                <input type="text" id="name" formControlName="name" class="form-control input-sm">
              </div>
            </div>
          </div>
        </div>
        <div class="row">
        ...
        </div>
      </form>
    </div>
  </div>
</div>

Select allOpen in new window

I have come across some examples with static checkboxes  which render in 3 columns. But I am not able to make out how to apply it to dynamically generated checkboxes.