Position components inside a bootstrap panel-heading

Question

Using bootstrap, how can horizontally align components within a panel-heading? In order to have: title : aligned to left, btn1 : centered, btn2 : aligned to the right.

<div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title">title</h3>

            <button class="btn">btn1</button>

            <button class="btn">btn2</button>
        </div>

        <div class="panel-body">
            text
        </div>
    </div>
</div>

I have tried to create a bootstrap class "row" and columns, but the row goes outside the panel-heading since the panel is inside another col-md-6:

Answer 1

A right way to go with .row and .col is like this

<div class="panel panel-default container-fluid">
    <div class="panel-heading row">
        <div class="col-xs-4"><h3 class="panel-title">title</h3></div>
        <div class="col-xs-4 text-center"><button class="btn">btn1</button></div>
        <div class="col-xs-4"><button class="btn pull-right">btn2</button></div>
    </div>
    <div class="panel-body">
        text
    </div>
</div>

http://jsfiddle.net/j7u53eav/3

Answer 2

Using Ch.Idea's answer as a jumping-off point, you can add a row class to your panel-heading. However, you do not need to make the panel a container-fluid.

Since the Bootstrap row class adds negative margins, you just need to remove them. Assuming every time a row is added to a panel-heading you would want this behaviour, it's as simple as adding some CSS:

.panel-heading.row {
  margin: 0
}

Since columns already have padding, you can take it further by removing the left and right from the row as well:

.panel-heading.row {
  margin: 0;
  padding-left: 0;
  padding-right: 0;
}

And for the sake of thoroughness, a modified copy of Ch.Idea's work:

<div class="panel panel-default">
    <div class="panel-heading row">
        <div class="col-xs-4"><h3 class="panel-title">title</h3></div>
        <div class="col-xs-4 text-center"><button class="btn">btn1</button></div>
        <div class="col-xs-4"><button class="btn pull-right">btn2</button></div>
    </div>
    <div class="panel-body">
        text
    </div>
    <table class="table">
      <!-- insert rest of table here -->
    </table>
</div>

And a modified jsfiddle showing full-width tables:

http://jsfiddle.net/my7axd1b/3/