Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Bootstrap Row - right justified

I have a <h1> title that that is in a <div> row. I want to fully extend the <h1> styling but place a button at the right side of the row.

I cannot figure out how to set the <span> value correctly to have the button stay on the right, but also extend the full amount of the row.

The only idea I have is to place the <h1> in a div .span6 and then place the button in another div span pulled-right, but that leaves an ugly white space between the <h1> title styling and the button.

Also it needs to be fluid in case we have 2 buttons on the right.

This is just a sample of what I trying to do.

like image 300
Matthew Friedman Avatar asked Feb 20 '23 08:02

Matthew Friedman


1 Answers

Your original question was a bit unclear, so I had to guess if something like this was what you were after.

<div class="container">
  <div class="row">
    <a href="#" class="btn pull-right">Button 2</a>
    <a href="#" class="btn pull-right">Button 1</a>
    <h1>My fancy title</h1>
  </div>
</div>

After you edited the jsfiddle example, I'd say that my solution should work if you're using bootstrap. For some reason your css has .pull-right{float:none;} in it that's causing pull-right not to work.

Here's a simple demonstration of your code with only changes being the button being before the h1 and .pull-right{float:right;} added to the end of css

http://jsfiddle.net/Arkkimaagi/KFsM6/1/

like image 194
Mikko Tapionlinna Avatar answered Mar 05 '23 17:03

Mikko Tapionlinna