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


Tags: html,css,twitter-bootstrap

Problem :

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>


Solution :

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>

    CSS Howto..

    How to change height of a dynamically embedded gist?

    How do I edit the VIM Omni Completion so that all CSS properties do not end in a colon?

    How to set color of the Button with jQuery UI?

    How to style just one type of input field without also affecting other input types with CSS

    how to apply css class condtionally in angularjs

    How to change symbol(character) of iconmoon font by CSS?

    In CSS, how to select a particular tag under mutiple ids?

    How to vertically center div in floated div?

    How to ONLY target Chrome DevTools window in CSS?

    CSS: How to switch two background images with fading transition?

    How does Twitter put labels inside textboxes?

    How to make other line indent using css?

    How to Fix this CSS and Center the Menu Horizontally?

    How to change css by using tag or class name in typescript?

    How To Make CSS Animations Ease Back To Position When No Longer Hovering?

    JSSOR slider: Image Gallery demo keeps showing highlight image on mobile

    How-to set background-position-x?

    How can I make an div span the entire width of my screen

    Only show text on image when you hover - wordpress theme

    How to auto adjust menus height according to container height

    How to put a space between the hover effect in this situation css html php?

    I have a video background on my bootstrap page - how can I make it “fixed”?

    How to fade, animate and change text, word in title / sentence

    How to generate a elongated hexagon shape with two circular sides?

    jQuery on click shows div but it flickers and disappears

    How to modify twitter widget in css

    How to get a tight div when heights differ? [duplicate]

    How to color path elements in SVG?

    how to overwrite css style in asp.net page?

    bootstrap navbar how to give it a max width