Adding controls/buttons to a panel-heading and pull-right on the right side - Bootstrap 3
When we want to add a button or some controls on the right side at to top of panel in Bootstrap 3, we always see the consequence as below: And the code in HTML might be like that: ........(other code) <div class="panel"> <div class="panel-heading"> <h3 class="panel-title">Social Website</h3> <button type="button" class="btn btn-default btn-xs pull-right"> <span class="glyphicon glyphicon-plus text-primary"></span> <span class="text-primary"><strong>Add</strong></span> </button> </div> <div class="panel-body"> Body </div> .........(other code) If you want to fix the position problem, you have two very very .... easy solutions as below: Sample 1: <div class="panel panel-info" style="word-break:break-all