Nested columns in panel heading

Question

I wanted my panel heading to contain some text and a button, the former being left-aligned and the latter, right-aligned. But as soon as I apply the class row to my panel header, it breaks out of the parent div and takes up what I believe to be the container width.

Here's the code I'm using:

<div class="panel panel-primary">
    <div class="panel-heading row">
        <h4 class="col-md-11">Manage Your Subscriptions</h4>
        <div>
            <a href="#" class="btn btn-default col-md-1" >Log out</a>
        </div>
    </div>
    <div class="panel-body">
    </div>
</div>

And here's the result:

How can I correct this?

Answer 1

It seems to me like you just need to move the "row" to be inside the "panel-heading" rather than on the same level, as they both have relative CSS positioning properties. I tried the following code:

    <div class="panel panel-primary">
        <div class="panel-heading">
            <div class="row">
                <h4 class="col-md-11">Manage Your Subscriptions</h4>
                <div class="col-md-1">
                    <a href="#" class="btn btn-default" >Log out</a>
                </div>
            </div>
        </div>
        <div class="panel-body">
            Stackoverflow rocks!
        </div>
    </div>

and it gave me this output (which is what you're looking for, I hope):

I hope that helps

EDIT: I tried using "pull-right" as others have suggested and it seems to create more troubles as it messes the top/bottom margins as well since it makes the display block relative to container (Which I would generally recommend against doing, even if it works for you).

EDIT2: moved the "col-md-1" class into an encapsulating "div" to solve the button's margins' issue.

Answer 2

May be you need something like following?

<div class="panel panel-primary">
  <div class="panel-heading">
    <div class="row">
      <div class="col-md-10 col-sm-10">
        <h4>Manage Your Subscriptions</h4>
      </div>
      <div class="col-md-2 col-sm-2">
        <a href="#" class="btn btn-default pull-right" >Log out</a>
      </div>
    </div>
  </div>
  <div class="panel-body">
  </div>
</div>

Let me know if it works