Q:

Combine button group with forms - Bootstrap 3

I am trying to incorporate into a button group 2 forms and a page redirect, using Bootstrap 3 and Laravel 5.2.
I cannot get the buttons to format correctly, primarily because two of them are wrapped by a "form" element.
My HTML is as follows:
<div class="btn-group pull-left">
    <a class="btn btn-primary btn-sm" href="{!! route('client.create') !!}">
        <i class="ion-plus"></i>&nbsp;&nbsp;New
    </a>

    {!! Form::open(['route' => 'client.allVisible', 'method' => 'post']) !!}
       <input name="visibility" class="hidden" value="true">
       <button type="submit" class="btn btn-primary btn-sm">
           <i class="ion-ios-eye"></i>&nbsp;&nbsp;Visible
       </button>
    {!! Form::close() !!}

    {!! Form::open(['route' => 'client.allVisible', 'method' => 'post']) !!}
       <input name="visibility" class="hidden" value="false">
       <button type="submit" class="btn btn-primary btn-sm">
           <i class="ion-ios-locked"></i>&nbsp;&nbsp;Hidden
       </button>
    {!! Form::close() !!}
</div>

Is this possible without using jQuery? Thanks!

A:

The below link has a working solution that should work for you
How to group buttons in different forms tags in Bootstrap
Create multiple BTN Form Groups
http://jsfiddle.net/isherwood/TRjEp/
<br />
<form class="btn-group">
    <button class="btn">Button One</button>
    <input type="hidden" class="btn" />
</form>
<form class="btn-group inline">
    <input type="hidden" class="btn" />
    <button class="btn">Button Two</button>
</form>
<form class="btn-group inline">
    <input type="hidden" class="btn" />
    <button class="btn">Button Three</button>
</form>

Additional CSS:
.btn-group+.btn-group {
    margin-left: -5px;
}

The code seems to work with that HIDDEN Btn, not sure why.

