Position components inside a bootstrap panel-heading - html

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/