Styling an indented h4 element in Bootstrap

I have a h4 element, which I don't really want to change because I want to keep the h4 styling (note: I assume that the question generalises to other h* elements and most other elements).

It's a label on a form and I want to indent the label a little If I forego the h4 and turn it into a div then I can simply apply col-xs-offset-3 and it gets indented. But if I apply the same class to the element as an h4 then nothing happens.

I tried wrapping the h4 in a div and applying the class to the outer div but that also did nothing.

Naturally I could roll my own styling for the indentation, but that doesn't seem like the bootstrap way?

What is the idiomatic way to achieve this?

Here's the HTML I'm using:

<!-- language: lang-html -->

<div id="page-wrapper" data-ng-app="app" data-ng-controller="controller">
  <div class="row">
    <div class="col-lg-12">
      <h1 class="page-header">Title</h1>
    </div>
  </div>

  <div class="row">
    <div class="col-lg-12">
      <div class="panel panel-default">
        <div class="panel-body">
          <div class="sub-row">
            <div class="padded-row col-lg-4">
              <h4>Template</h4>                        
              <div class="col-xs-10">
                <angucomplete-alt input-class="form-control form-control-small col-xs-3"
                                  match-class="valid"
                                  other="attributes" />
              </div>
              <button class="btn btn-blue btn-slim" ng-click="reset()">Clear</button>
            </div>
          </div>
        </div>

The only 'idiomatic' way of using offset grid columns is like this:

Container > Row > Column:

Where all of those classes should be applied to <div> elements. If you want to modify a column, you should attach the class to the new div column and place all the contents inside of it. This provides a structured and semantic approach to your markup like this:

<!-- begin snippet: js hide: false --> <!-- language: lang-css -->

.block { border: 1px solid grey; }

<!-- language: lang-html -->

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<div class="container">
  <div class="row">
    <div class="col-xs-8 col-xs-offset-2 block">
      <!-- Contents Go Here -->
      <h3>Offset Div</h3>
    </div>
  </div>
</div>

<!-- end snippet -->

Beyond that, if you just want to indent a particular element, feel free to build your own classes and CSS rules - bootstrap won't help or hurt you in creating additional stylings.