CODEWITHSUNDEEP
htmltwitter-bootstrap
user8808874
user8808874

Reputation:

bootstrap btn group not working

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>

btn-group

Upvotes: 1

Views: 4003

Answers (1)

Mujahid
Mujahid

Reputation: 127

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>

Upvotes: 2

Related Questions