Bootstrap 4 button in row alignment

Question

I have two buttons in a bootstrap 4 flex row that refuse to align vertically. I want to align bottom with the inputs on the same row.

The fiddle is here.

The code:

<div class="container">
<div class="card-header">SEIZED BY</div>
<div class="card-body d-flex flex-column">
    <div class="row form-group">
        <div class="col-md-2">
            <label class="control-label control-label-left" for="OC">O/C</label>
            <input id="OC" type="text" class="form-control textbox" data-role="text">
        </div>
        <div class="col-md-3">
            <label class="control-label control-label-left" for="SeizedByName">Name</label>
            <input id="SeizedByName" type="text" class="form-control textbox" data-role="text">
        </div>
        <div class="col-md-5">
            <label class="control-label control-label-left">Station</label>
            <input type="text" class="form-control typeahead" name="query" id="query" placeholder="Type Station" data-provide="typeahead" autcomplete="off">
        </div>
        <div class="col-md-2">
            <button type="button" class="mt-auto btn btn-primary align-item-centre" data-toggle="modal" data-target="#signature">
                Signature
            </button>
        </div>
    </div>
    <br>
    <div class="row form-group">
        <div class="col-md-2">
            <label class="control-label control-label-left" for="OC">Witness</label>
            <input id="Witness" type="text" class="form-control textbox" data-role="text">
        </div>
        <div class="col-md-3">
            <label class="control-label control-label-left" for="SeizedByName">Name</label>
            <input id="WitnessName" type="text" class="form-control textbox" data-role="text">
        </div>
        <div class="col-md-5">
            <label class="control-label control-label-left">Station</label>
            <input type="text" class="form-control typeahead" name="query" id="query1" placeholder="Type Station" data-provide="typeahead" autcomplete="off">
        </div>
        <div class="col-md-2">
            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#signature">
                Witness Signature
            </button>
        </div>
    </div>
</div>

I have tried adding mt-auto to the <button> element as per this Stack Overflow answer but it ad no apparent effect.

d-flex and flex-column are already added to card-body.

I would like the solution to use bootstrap helper utilities. The buttons also touch the inputs on small screens.

score 3 · Answer 1 · edited May 06 '19 at 02:44

Maybe you can use this code align-items-end in each group of form-group:

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

  <div class="container">
<div class="card-header">SEIZED BY</div>
<div class="card-body d-flex flex-column">
    <div class="row form-group  align-items-end">
        <div class="col-md-2">
            <label class="control-label control-label-left" for="OC">O/C</label>
            <input id="OC" type="text" class="form-control textbox" data-role="text">
        </div>
        <div class="col-md-3">
            <label class="control-label control-label-left" for="SeizedByName">Name</label>
            <input id="SeizedByName" type="text" class="form-control textbox" data-role="text">
        </div>
        <div class="col-md-5">
            <label class="control-label control-label-left">Station</label>
            <input type="text" class="form-control typeahead" name="query" id="query" placeholder="Type Station" data-provide="typeahead" autcomplete="off">
        </div>
        <div class="col-md-2 ">
            <button type="button" class="mt-auto btn btn-primary align-item-centre" data-toggle="modal" data-target="#signature">
                Signature
            </button>
        </div>
    </div>
    <br>
    <div class="row form-group align-items-end">
        <div class="col-md-2">
            <label class="control-label control-label-left" for="OCQID">Witness</label>
            <input id="Witness" type="text" class="form-control textbox" data-role="text">
        </div>
        <div class="col-md-3">
            <label class="control-label control-label-left" for="SeizedByName">Name</label>
            <input id="WitnessName" type="text" class="form-control textbox" data-role="text">
        </div>
        <div class="col-md-5">
            <label class="control-label control-label-left">Station</label>
            <input type="text" class="form-control typeahead" name="query" id="query1" placeholder="Type Station" data-provide="typeahead" autcomplete="off">
        </div>
        <div class="col-md-2">
            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#signature">
                Witness Signature
            </button>
        </div>
    </div>
</div>

and the result:

enter image description here

That worked. Any tips for the margin/padding on top of button on sm screen sizes? — Radika Moonesinghe, May 05 '19 at 09:02
I have found that it works on lg and xs - but on sm and md the buttons extend beyond the card right hand edge. — Radika Moonesinghe, May 06 '19 at 07:11

score 0 · Answer 2 · answered May 05 '19 at 07:48

0

You can use .align-items-baseline after using .flex row.

answered May 05 '19 at 07:48

Arindam Sarkar

224
1
13

Bootstrap 4 button in row alignment

2 Answers2