CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3
ChrisArmstrong
ChrisArmstrong

Reputation: 2521

Proper way to align right panel element inside Bootstrap header

I've been spinning my wheels on trying to get a div panel element to appear on the top right of the page, on the same line as the h1 element:

<div class="container">
        <div class="page-header">
            <h1>
                <img src="logo.png"> Page title
            </h1>
            <div class="panel panel-primary">
            ...content...
            </div>
        </div>
        ...
</div>

I'm a bit of an amateur with CSS/HTML, but I've tried the pull-left/right classes along with every permutation of display/position, etc. The outcome is always garbled. Any suggestions?

Upvotes: 0

Views: 3242

Answers (2)

Christina
Christina

Reputation: 34652

I wouldn't use the .page-header for this, it doesn't clear and it's meant for text. Use the grid system so that you can set a size for your panel as they are not a set width and requires a wrapper to have a width. It will layout very cleanly this way.

Just a note: when you use the .pull-right and .pull-left classes on anything in Bootstrap these cover all viewport sizes and the results can look pretty yucky as the viewport gets smaller.

DEMO: http://jsbin.com/sadup/1

<div class="container">
   <div class="row">
      <div class="col-sm-8">
        <img src="http://placehold.it/200x75/444444/FFFFFF&text=logo" class="img-responsive" alt="Logo">
      </div>
      <!--/.col-sm-8 -->
      <div class="col-sm-4">
         <div class="panel panel-primary">
            <div class="panel-heading">
               <h3 class="panel-title">Panel title</h3>
            </div>
            <div class="panel-body">
               Panel content
            </div>
         </div>
      </div>
      <!--/.col-sm-4 -->

   </div>
   <!--/.row -->

</div>
<!--/.container -->

Upvotes: 0

thirdtiu
thirdtiu

Reputation: 91

you have to add pull-left to the h1 too.. to have both of them floated..

also add a .cleafix class to the page-header div

<div class="container">
    <div class="page-header clearfix">
        <h1 class="pull-left">
            <img src="logo.png"> Page title
        </h1>
        <div class="panel panel-primary pull-right">
        ...content...
        </div>
    </div>
    ...
 </div>

Upvotes: 2

Related Questions