How to center text in panel-heading alongside a button pulled into the right

Question

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:

1. The button wasn't horizontally aligned with the text
2. 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

Here's my code:

<div class='container'>
    <div class='panel panel-default'>
        <div class='panel-heading'>
            <div class='panel-heading text-center'>
                <h4>Present Schedule<button class='btn pull-right btn-danger' onclick="location.href='past_sched.php'">Go to Past Schedule</button></h4>
            </div>
        </div>
    </div>
</div>

Here's a jsfiddle of the result: https://jsfiddle.net/63c0wn66/3/

Answer 1

Try this code. Put button outside h4

HTML

<div class='container'>
  <div class='panel panel-default'>
    <div class='panel-heading text-center panel-relative'>
    <button class='btn btn-danger btn-right' onclick="location.href='past_sched.php'">Go to Past Schedule</button>
      <h4>Present Schedule</h4>
    </div>
  </div>
</div>

CSS

.panel-relative{
  position: relative;
}
.btn-right{
  position: absolute;
  right: 15px;
}

https://jsfiddle.net/63c0wn66/7/