How can I add text on the left and right of my Panel Title?

Question

I'm using Twitter Bootstrap to take away a lot of the CSS work for me. I want to use their Panels for a sort of "Post" by a User. I'd like to have the Title section include Edit/Delete Hyperlinks on the RIGHT side of the Title, while the Title itself is aligned on the left.

I've tried this with no success:

<div class="row">
    <div class="panel panel-primary">
        <div class="panel-heading">
            <h3 class="panel-title">@vModel.Title <span class="text-right">Hey</span></h3>
        </div>
        <div class="panel-body">
            @vModel.Blog
        </div>
    </div>
</div>

Title should be aligned on the left (as it does by default) but I want the additional text "Hey" to show up on the RIGHT side.

EDIT: http://getbootstrap.com/dist/css/bootstrap.css

Answer 1

Twitter bootstrap has two class which can help you.

First is .text-right and second is .pull-right so add this two class and see.

Answer 2

tiny clearfix does it

<div class="panel panel-default">
    <div class="panel-heading">
         <div class="panel-title pull-left">
             Works fine for me!
         </div>
        <div class="panel-title pull-right">Text on the right</div>
        <div class="clearfix"></div>
    </div>
    <div class="panel-body">Panel content</div>
</div>

You can try it here http://jsfiddle.net/b1Lec5ge/

Answer 3

Add float:right and remove text-align: right

.text-right {
  float:right;
}