bootstrap 4.3 btn group not working

When I try class="btn-group" the buttons aren't joined anymore. They are separate.

<div class="btn-toolbar justify-content-between">
    <form action="{{ route('orders.destroy', ['id' => $order->id]) }}" method="post">
        {{ method_field('UPDATE') }}
        {{ csrf_field() }}
        <div class="btn-group-sm">
            <button type="submit" class="btn btn-success">ok</button>
        </div>
    </form>
    <form action="{{ route('orders.destroy', ['id' => $order->id]) }}" method="post">
        {{ method_field('UPDATE') }}
        {{ csrf_field() }}
        <div class="btn-group-sm">
            <button type="submit" class="btn btn-danger">del</button>
        </div>
    </form>
</div>

mozew

6 years ago

Level 6

I want to create group buttons like this example https://getbootstrap.com/docs/4.3/components/button-group/

Cronix

6 years ago

Level 67

Could be because you are using 2 separate forms with a button from each form. They aren't using forms in theirs (or have extra divs in them). The form tag (and divs) might be adding extra padding and stuff. You'd need to make your html more like theirs. You can't just put anything in there and have it look the same.

Also, your first form action is wrong. (an update going to a DESTROY method)... both of your forms are set to go to the destroy method. One should be going to the update method...

make it more like they show

<div class="btn-group" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-secondary">Left</button>
  <button type="button" class="btn btn-secondary">Middle</button>
  <button type="button" class="btn btn-secondary">Right</button>
</div>

and don't add extra stuff

Please or to participate in this conversation.