CODEWITHSUNDEEP
twitter-bootstrap
Abe Voelker
Abe Voelker

Reputation: 31574

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

I'm trying to get the following Bootstrap buttons to be on the 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 to wishlist
    </button>
    <a class="btn btn-default btn-lg" href="/foo/wishlists">
      <span>1</span>
    </a>
  </div>
</form>

Here's a JSFiddle of it.

I've tried adding using the .form-horizontal and .form-inline classes (although I suspect those are for intra-form styling), as well as doing display: inline, but can't seem to get it to work (I'm bad at CSS).

Upvotes: 0

Views: 520

Answers (1)

Paweł Smołka
Paweł Smołka

Reputation: 638

add 

style="float:left; width: auto"

to your form selector

Upvotes: 1

Related Questions