title: How to center text in panel-heading alongside a button pulled into the right
body: <p>I created a panel heading in bootstrap and tried to center its text while having a button that's supposedly on the same horizontal axis as the text but pulled in the right but my output was:</p>
  
  <ol>
  <li>The button wasn't horizontally aligned with the text</li>
  <li>The text is centered between the left of the heading and the left of the button instead of being centered between the left and right side of the heading</li>
  </ol>
  
  <p>Here's my code:</p>
  
  <pre><code>&lt;div class='container'&gt;
      &lt;div class='panel panel-default'&gt;
          &lt;div class='panel-heading'&gt;
              &lt;div class='panel-heading text-center'&gt;
                  &lt;h4&gt;Present Schedule&lt;button class='btn pull-right btn-danger' onclick="location.href='past_sched.php'"&gt;Go to Past Schedule&lt;/button&gt;&lt;/h4&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here's a jsfiddle of the result: <a href="https://jsfiddle.net/63c0wn66/3/" rel="nofollow">https://jsfiddle.net/63c0wn66/3/</a></p>