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

stdout
June 23, 2015
106 views
3 votes
3 Answers

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.

Tags: css twitter-bootstrap

Answers

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>

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>

- AngularJR
- June 23, 2015 at 3:23 am
- 0 votes
0
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>
```
Login or Signup to reply.

Please signup or login to give your own answer.

Click here to cancel reply.