How do you group buttons within different form tags together in Twitter's Bootstrap?
Right now what I get is:
<div class="btn-group">
<!--More button-->
<form action="search.php" method="POST">
<input type="hidden" name="some name" value="same value">
<button style="float:left" class="btn" type="submit"><i class="icon-search"></i> More</button>
</form>
<!--Edit button-->
<form action="edit_product.php" method="post">
<button class="btn btn-primary" type="submit" name="product_number" value="some value"><i class="icon-cog icon-white"></i> Edit</button>
</form>
<!--delete button-->
<button data-toggle="modal" href="#error_delete" class="btn btn-danger"><i class="icon-trash icon-white"></i> Delete</button>
</div>
If you'd rather not use scripting you can use hidden inputs (or any inline element, such as <i></i>
) to create the proper first:child and last:child relationships:
Fiddle demo
<form class="btn-group">
<button class="btn">Button One</button>
<input type="hidden" class="btn"><!-- fake sibling to right -->
</form>
<form class="btn-group">
<i></i><!-- fake sibling to left -->
<button class="btn">Button Two</button>
</form>
In the latest versions of Bootstrap 2 I did have to add one bit of CSS override:
form.btn-group + form.btn-group {margin-left: -5px;}
You can use JQuery to achieve it.
<form id="form1" action="search.php" method="POST">
<input type="hidden" name="some name" value="same value">
</form>
<form id="form2" action="edit_product.php" method="post">
</form>
<div class="btn-group">
<button id="more" style="float:left" class="btn" type="submit"><i class="icon-search"></i> More</button><!--More button-->
<button id="edit" class="btn btn-primary" type="submit" name="product_number" value="some value"><i class="icon-cog icon-white"></i> Edit</button>
<button data-toggle="modal" href="#error_delete" class="btn btn-danger"><i class="icon-trash icon-white"></i> Delete</button>
</div>
And with JQuery:
$("#more").click(function() {
$("#form1").submit();
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With