Centered text and left aligned button in panel heading using Twitter Bootstrap - css

Question

I am trying to center some text in the heading of a panel, along with a left-aligned button on the same row. The approach I'm currently taking works sort of OK for small widths, but as soon as the window gets to .col-sm territory (>750px) the text is no longer centered and instead seems to align right. Plus I'm not actually sure if this approach of trying to overlap a col-xs-1 and col-md-12 is really centering the text even for small window widths.
<div class="container">
<div class="row">
<div class="col-sm-3"></div>
<div class="col-sm-8">
<div class="panel panel-primary">
<div class="panel-heading">
<div class="container" style="padding:0;">
<div class="row">
<div class="col-xs-1">
<button type="button" class="btn btn-default btn-sm">Button</button>
</div>
<div class="col-md-12" style="text-align:center">Heading</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Here is a JSFiddle.

Answer 1

stdout, Hi there. You can actually have the Heading in the center if you like.
I mean actually centered in the full width. Your example is offset by 1 col.
I do it without that extra col offset and the button still to the left.
Have a look at this example in my Fiddle to see how the Header text is actually centered in the whole div.
It has a lot let cols/row etc.
I left one of the other examples above so you can see the difference.
Here is the CSS used for this example.
<style>
.align-left{
float:left !important;
}
.center-text-vert{
line-height:30px; /*height of the button*/
}
.center {
text-align: center;
margin-right: 55px; /*width from the left to the far right of the button */
}
</style>
<div class="container">
<div class="row ">
<div class="col-sm-8 col-sm-offset-2 ">
<div class="panel panel-primary ">
<div class="panel-heading">
<div class="center-text-vert">
<button type="button" class="btn btn-default btn-sm align-left">Button</button>
<div class="center">
Heading
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Answer 2

Try removing the container inside you panel and use pull-left class for your button and text-center class for your heading and see if that works for you.
<div class="container">
<div class="row">
<div class="col-sm-3"></div>
<div class="col-sm-8">
<div class="panel panel-primary">
<div class="panel-heading">
<div class="row">
<div class="col-xs-1">
<button type="button" class="btn btn-default btn-sm pull-left">Button</button>
</div>
<div class="col-xs-11 text-center">Heading</div>
</div>
</div>
</div>

Answer 3

What I guess you want is for the title to be full width at xs size and only take up a portion of the screen at sm and higher. To do that, remove the empty column and instead apply an offset. Also, note there are 12 columns so offsetting by 3 (i.e. 3 columns on the left and 3 on the right) means the middle column can only be 6 wide. I've set this one to be offset by 2 as an example. I've also fixed the inner columns to add up to 12 (although you should not nest container classes:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-sm-offset-2 col-sm-8">
<div class="panel panel-primary">
<div class="panel-heading">
<div class="row">
<div class="col-xs-1">
<button type="button" class="btn btn-default btn-sm">Button</button>
</div>
<div class="col-md-11" style="text-align:center">Heading</div>
</div>
</div>
</div>
</div>
</div>
</div>