How to align 2 buttons in twitter bootstrap in one div

Question

I use twitter bootstrap 2 version.

<div class="span4">
    <a href="http://test.com" class="btn">&{'main.menu.with.me'}</a>            
    <a href="http://test2.com" class="btn btn-info pull-right">&{'main.menu.raise.request'}</a>
</div>

I need to put 2 buttons to the right with space between them. But if I put pull-right to both there is no space between them, I injecting   doesn't help.

Answer 1

not very good at html, but I'd do something like this:

bootstrap 2:

<div class="span4">
 <div class='pull-right'>
   <a href="http://test.com" class="btn">&{'main.menu.with.me'}</a>         
   <a href="http://test2.com" class="btn btn-info">&{'main.menu.raise.request'}</a>
 </div>
</div>

in this case you'd want a div.clearfix after the one with pull-right and there is no css involved unless you want more space between buttons then bootstrap already has.

(update 4.08.2016) bootstrap 3:

<div class='btn-toolbar'>
  <a href="http://test.com" class="btn">&{'main.menu.with.me'}</a>         
  <a href="http://test2.com" class="btn btn-info">&{'main.menu.raise.request'}</a>
</div>

Answer 2

simply add pull-right to both the buttons

the, to give space :

.btn{
    margin-right:10px;
}

Also, keep in mind that, pulling right would change the order of the buttons...so better swap according to your layout (i have done that in my fiddle example)

fiddle demo