Bootstrap buttons group not displayed properly in footer of a panel - html

Question

I am using Bootstrap and can't find my problem where button groups in not aligned properly when inserten in right hand side of the panel footer.
My code id:
<div class="container">
<div class="col-md-6">
<div class="panel panel-primary">
<div class="panel-heading"><b>My Title</b><span class="pull-right">123</span></div>
<div class="panel-body">
Just a test text<br>
</div>
<div class="panel-footer">
Some information herre
<div class="btn-group pull-right">
<button type="button" class="btn btn-primary dropdown-toggle " data-toggle="dropdown">
Group of buttons <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><span class="glyphicon glyphicon-edit"></span> Edit </li>
<li><span class="glyphicon glyphicon-trash"></span> Delete</li>
<li class="divider"></li>
<li><span class="glyphicon glyphicon-list-alt"></span> PDF</li>
</ul>
</div>
</div>
</div>
</div>
</div><!-- /.container -->
To demonstrate a problem please take a look at working code:
http://jsfiddle.net/69r7s63w/

Answer 1

Actually the easiest and cleanest way is to add a clearfix class to your footer:
<div class="panel-footer clearfix">
Demo: http://jsfiddle.net/r819f85u/
You don't need to add any extra markup to archive this. If you have multiple instances like this, you can even override panel-footer to let take effect automatically, but you'd better use Less/Sass/... version, otherwise will be complicated to add an clearfix effect.
Below is an example by using Sass:
// Overriding must be written or imported after Bootstrap
.panel-footer {
#include clearfix;
}

Answer 2

If you use containers it will fit better within the footer.
<div class="row">
<div class="col-xs-6">
<p>
Some information herre
</p>
</div>
<div class="col-xs-6">
<!-- Single button -->
<div class="btn-group pull-right">
<button type="button" class="btn btn-primary dropdown-toggle " data-toggle="dropdown">Group of buttons <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<li><span class="glyphicon glyphicon-edit"></span> Edit </li>
<li><span class="glyphicon glyphicon-trash"></span> Delete</li>
<li class="divider"></li>
<li><span class="glyphicon glyphicon-list-alt"></span> PDF</li>
</ul>
</div>
</div>
</div>
Updated fiddle

Answer 3

You can also change the size of the button to btn-sm or btn-xs. Also I'm not entirely sure why but making the button float right causes it to not be able to stretch heights within a container, usually I see
<div class="clearfix"></div>
put at the end of float elements which will stretch the container.

Answer 4

You need to adjust line height of text Some information here, since it is not wrapped under any div or so..
Just change
Some information here to <span class="footer-text">Some information here</span> and then adjust the line height of .footer-text class using following CSS
.footer-text{
line-height:33px;
}
Fiddle here : http://jsfiddle.net/rahulrulez/69r7s63w/1/
Updated Solution with best practices
Change HTML to this :
<div class="container">
<div class="col-xs-6 footer-text">Some information herre</div>
<!-- Single button -->
<div class="col-xs-6 pull-right">
<button type="button" class="btn btn-primary dropdown-toggle " data-toggle="dropdown">
Group of buttons <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><span class="glyphicon glyphicon-edit"></span> Edit </li>
<li><span class="glyphicon glyphicon-trash"></span> Delete</li>
<li class="divider"></li>
<li><span class="glyphicon glyphicon-list-alt"></span> PDF</li>
</ul>
</div>
</div>
http://jsfiddle.net/rahulrulez/69r7s63w/3/