title: Centered text and left aligned button in panel heading using Twitter Bootstrap
body: <p>I am trying to center some text in the heading of a panel, along with a left-aligned button on the same row. The approach I'm currently taking works sort of OK for small widths, but as soon as the window gets to .col-sm territory (>750px) the text is no longer centered and instead seems to align right. Plus I'm not actually sure if this approach of trying to overlap a col-xs-1 and col-md-12 is really centering the text even for small window widths. </p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-sm-3"&gt;&lt;/div&gt;
          &lt;div class="col-sm-8"&gt;
              &lt;div class="panel panel-primary"&gt;
                  &lt;div class="panel-heading"&gt;
                      &lt;div class="container" style="padding:0;"&gt;
                          &lt;div class="row"&gt;
                              &lt;div class="col-xs-1"&gt;
                                  &lt;button type="button" class="btn btn-default btn-sm"&gt;Button&lt;/button&gt;
                              &lt;/div&gt;
                              &lt;div class="col-md-12" style="text-align:center"&gt;Heading&lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is a <a href="https://jsfiddle.net/r9zo180f/8/" rel="nofollow">JSFiddle</a>.</p>