bootstrap btn group not working - html

Question

When I try class="btn-group" the buttons aren't joined anymore. They are separate.
<div class="btn-group btn-group-xs">
<form action="{{ route('requisitions.update' , ['id' => $requisition->id]) }}" method="post">
{{ method_field('PATCH') }}
{{ csrf_field() }}
<button type="submit" class="btn btn-success btn-xs">Confirmation</button>
</form>
<form action="{{ route('requisitions.destroy' , ['id' => $requisition->id]) }}" method="post">
{{ method_field('PATCH') }}
{{ csrf_field() }}
<button type="submit" class="btn btn-danger btn-xs">Disapproval</button>
</form>
</div>

Answer 1

You should follow the standard way as bootstrap
https://getbootstrap.com/docs/4.1/components/button-group/
try to wrap this code some thing like this in a div having class "btn-toolbar"
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group btn-group-xs" role="group">
<form method="post">
<button type="submit" class="btn btn-success btn-xs">Confirmation</button>
</form>
<form method="post">
<button type="submit" class="btn btn-danger btn-xs">Disapproval</button>
</form>
</div>
</div>
Example#2
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group mr-2" role="group" aria-label="First group">
<button type="button" class="btn btn-secondary">1</button>
<button type="button" class="btn btn-secondary">2</button>
<button type="button" class="btn btn-secondary">3</button>
<button type="button" class="btn btn-secondary">4</button>
</div>
</div>