hussain hussain - 3 months ago 31
CSS Question

How can i display all buttons to right in bootstrap panel heading?

I want to display buttons to the right in bootstrap

panel-heading
i tried to add pull-right class on all buttons but its breaking some css rules on
panel-body
, How can i display all buttons on right side in bootstrap
panel-heading
?

main.html

<div class="col-md-11">
<div ng-show="showMessage">
<p class="recordMessage">File is being recorded to the server ,once you stop recording it will prompt for cancel or download. </p>
</div>
<div class="panel panel-default">
<div class="panel-heading">DIT LOGS
<div class="pull-right" style="padding-right: 300px">
<button type="button" class="btn btn-danger btn-rad btn-lg"><span class="glyphicon glyphicon-record"></span></button>
<button type="button" class="btn btn-primary btn-rad btn-lg"><span class="glyphicon glyphicon-stop"></span></button>
<button type="button" class="btn btn-success btn-rad btn-lg"><span class="glyphicon glyphicon-search"></span></button>
<button type="button" class="btn btn-info btn-rad btn-lg"><span class="glyphicon glyphicon-folder-open"></span></button>
</div>
</div>
<div class="panel-body display-logs" scroll-bottom="event">
<ul style="list-style: none;">
<li ng-repeat="message in event track by $index" ng-class="{lastItem: $last}"><span><strong>Log:</strong></span><span>{{message}}</span></li>
</ul>
</div>
</div>
</div>

Answer

try putting them in an other div

<div class="panel-heading">DIT LOGS
    <div class="pull-right">
        <button type="button" class="btn btn-danger btn-rad btn-xs"><span class="glyphicon glyphicon-record"></span></button>
        <button type="button" class="btn btn-primary btn-rad btn-xs"><span class="glyphicon glyphicon-stop"></span></button>
        <button type="button" class="btn btn-success btn-rad btn-xs"><span class="glyphicon glyphicon-search"></span></button>
        <button type="button" class="btn btn-info btn-rad btn-xs"><span class="glyphicon glyphicon-folder-open"></span></button>
    </div>
</div>