4

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/

jarjarjinx
  • 57
  • 1
  • 1
  • 5

2 Answers2

9

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/

Anoop John
  • 464
  • 3
  • 8
  • Oh I see, it's working but somehow the text is getting centered between the left side of the heading and the left side of the button instead of getting centered from both sides of the panel heading. – jarjarjinx Apr 22 '16 at 05:47
  • For that you have to absolute position the button. I have updated the code. – Anoop John Apr 22 '16 at 05:52
1

1) Put your button outside h4
2) Apply for h4 property display: inline-block 

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

.myClass {
  display: inline-block;
}

JSFiddle

Igor Ivancha
  • 3,413
  • 4
  • 30
  • 39
  • Thank you for your input, I wanted to at least give you an upvote but unfortunately I still have a low reputation. Hopefully if I get it up to the necessary value, I'll give you an upvote. – jarjarjinx Apr 22 '16 at 07:19
  • @jarjarjinx, I think it'll be helpfull for you: http://stackoverflow.com/questions/20718577/how-css-positions-work-why-absolute-elements-stack-up-on-each-other-instead-of – Igor Ivancha Apr 22 '16 at 15:11
  • Thank you so much, every bit of information counts. I try to learn a new thing everyday, hoping to be a better person than the one I was yesterday. – jarjarjinx Apr 23 '16 at 06:02