How to make Bootstrap buttons in separate forms inline (horizontally aligned)? -


i'm trying following bootstrap buttons on same horizontal line:

<a class="btn btn-success btn-lg checkout" href="/foo/buy">   <i class="glyphicon glyphicon-shopping-cart"></i> $50.00 </a>  <form action="/subscriptions" accept-charset="utf-8" method="post">   <div class="btn-group">     <button class="btn btn-default btn-lg" type="submit">       <i class="glyphicon glyphicon-eye-open"></i> watch     </button>     <a class="btn btn-default btn-lg" href="/foo/watchers">       <span>1</span>     </a>   </div> </form>  <form action="/wishlists" accept-charset="utf-8" method="post">   <div class="btn-group">     <button class="btn btn-default btn-lg" type="submit">       <i class="glyphicon glyphicon-gift"></i> add wishlist     </button>     <a class="btn btn-default btn-lg" href="/foo/wishlists">       <span>1</span>     </a>   </div> </form> 

here's jsfiddle of it.

i've tried adding using .form-horizontal , .form-inline classes (although suspect intra-form styling), doing display: inline, can't seem work (i'm bad @ css).

add

style="float:left; width: auto" 

to form selector


Comments

Popular posts from this blog

Android : Making Listview full screen -

javascript - Parse JSON from the body of the POST -

javascript - Chrome Extension: Interacting with iframe embedded within popup -