Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to align 2 buttons in twitter bootstrap in one div

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.

like image 997
Constantine Gladky Avatar asked Jan 13 '14 10:01

Constantine Gladky


2 Answers

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>
like image 153
rmagnum2002 Avatar answered Sep 28 '22 05:09

rmagnum2002


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

like image 44
NoobEditor Avatar answered Sep 28 '22 05:09

NoobEditor