Trying to troubleshoot css alignment

This is a two parter. I'm trying to fix some alignment issues on checkboxes in our MVC view. We're using Bootstrap.

I'm trying to use css and divs to make a table type layout of checkboxes. Something like this:

{empty space} Display Required
Title {checkbox} {checkbox}

First off, I'm trying to use jsfiddle.net to work on the section of markup I'm having trouble with.

  <div class="form-horizontal" style="display: inline-block; ">

    <div class="form-group col-md-12">
      <div class="form-group">
        <div class="col-md-offset-3 col-md-3">
          <div class="checkbox">
            <label class="control-label" for="Display">Display</label>
          </div>
        </div>
        <div class="col-md-3">
          <div class="checkbox">
            <label class="control-label" for="Required">Required</label>
          </div>
        </div>
      </div>

    </div>

    <div class="form-group col-md-12">
      <div class="col-md-3">
        <label class="control-label col-md-2" for="Title">Title</label>
      </div>
      <div class="col-md-3 center-block">
        <input checked="checked" data-val="true" data-val-required="The TitleDisplay field is required." disabled="True" id="TitleDisplay" name="TitleDisplay" type="checkbox" value="true">
        <input name="TitleDisplay" type="hidden" value="false">

      </div>
      <div class="col-md-3 center-block">
        <input checked="checked" data-val="true" data-val-required="The TitleRequired field is required." disabled="True" id="TitleRequired" name="TitleRequired" type="checkbox" value="true">
        <input name="TitleRequired" type="hidden" value="false">

      </div>

    </div>

But I can't get jsfiddle to even look like what I see on the screen. It's coming out like this:

Display
Required
Title
{checkbox}
{checkbox}

Second, how can I get the checkbox to be centered under the header (Display, Required)?