In bootstrap 3, why isn't button aligning to the bottom of the column as the CSS states? - css

Question

I'm using Bootstrap 3 and I'm trying to align a button to the bottom of a column. The only way I can seem to accomplish this is by assigning an explicit height and using absolute positioning. Since I don't want all columns to behave this way, I'm wondering if there's something built into Bootstrap 3 that would allow me to do this?
.m-t {
margin-top: 15px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-lg-12">
<div class="panel blank-panel">
<div class="panel-body">
<form>
<div class="form-group">
<div class="col-sm-3 m-t">
<label for="fname">First Name</label>
<input type="text" id="fname" class="form-control">
</div>
<div class="col-sm-3 m-t">
<label for="lname">Last Name</label>
<input type="text" id="lname" class="form-control">
</div>
<div class="col-sm-2 m-t">
<label for="gender">Gender</label>
<select class="form-control">
<option value="" selected>Please Select</option>
<option value="1">Female</option>
<option value="2">Male</option>
<option value="3">Unspecified</option>
</select>
</div>
<div class="col-sm-2 m-t">
<label for="birthDate" class="control-label">Date of Birth</label>
<div class="input-group date" id="birthDateDiv">
<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
<input type="text" placeholder="mm/dd/yyyy" class="form-control" id="birthDate" name="birthDate" value="">
</div>
</div>
<div class="col-sm-2 m-t" style="display: flex; justify-content: flex-start; align-items: flex-end;">
<button class="btn btn-sm btn-primary" type="submit" id="addPerson">Add Person</button>
</div>
</div>
</form>
</div>
</div>
</div>

Answer 1

Basically need to add the missing label for the spacing. I've added also .form-control to the .btn as to allow for better display in mobile. Also consider hiding the dummy label on mobile using .hidden-sm or similar.
.m-t {
margin-top: 15px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-lg-12">
<div class="panel blank-panel">
<div class="panel-body">
<form>
<div class="form-group">
<div class="col-sm-3 m-t">
<label for="fname">First Name</label>
<input type="text" id="fname" class="form-control">
</div>
<div class="col-sm-3 m-t">
<label for="lname">Last Name</label>
<input type="text" id="lname" class="form-control">
</div>
<div class="col-sm-2 m-t">
<label for="gender">Gender</label>
<select class="form-control">
<option value="" selected>Please Select</option>
<option value="1">Female</option>
<option value="2">Male</option>
<option value="3">Unspecified</option>
</select>
</div>
<div class="col-sm-2 m-t">
<label for="birthDate" class="control-label">Birth</label>
<div class="input-group date" id="birthDateDiv">
<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
<input type="text" placeholder="mm/dd/yyyy" class="form-control" id="birthDate" name="birthDate" value="">
</div>
</div>
<div class="col-sm-2 m-t" style="">
<label for="dummy" class="control-label"> </label>
<button class="btn btn-primary form-control" type="submit" id="addPerson">Add Person</button>
</div>
</div>
</form>
</div>
</div>
</div>

Answer 2

If you want to align button to bottom, you should apply css settings to form-group. In other words:
<div class="form-group" style="display: flex; align-items: flex-end;">

Answer 3

Bootstrap 3 is deprecated.
Solution: Adapt to Bootstrap 5.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" rel="stylesheet" />
<div class="col-lg-12">
<div class="panel blank-panel">
<div class="panel-body">
<form>
<div class="form-group d-flex flex-wrap">
<div class="col-md-3 col-8 mt-3 px-2 ms-md-auto mx-auto">
<label for="fname">First Name</label>
<input type="text" id="fname" class="form-control">
</div>
<div class="col-md-3 col-8 mt-3 px-2 ms-md-auto mx-auto">
<label for="lname">Last Name</label>
<input type="text" id="lname" class="form-control">
</div>
<div class="col-md-2 col-8 mt-3 px-2 ms-md-auto mx-auto">
<label for="gender">Gender</label>
<select class="form-select">
<option value="" selected>Please Select</option>
<option value="1">Female</option>
<option value="2">Male</option>
<option value="3">Unspecified</option>
</select>
</div>
<div class="col-md-2 col-8 mt-3 px-2 ms-md-auto mx-auto">
<label for="birthDate" class="control-label">Date of Birth</label>
<div class="input-group date" id="birthDateDiv">
<input id="dateofbirth" class="form-control" type="date" />
</div>
</div>
<div class="col-md-1 col-8 mt-3 px-2 ms-md-auto mx-auto" style="display: flex; justify-content: flex-start; align-items: flex-end;">
<button class="btn btn-sm btn-primary" type="submit" id="addPerson">Add Person</button>
</div>
</div>
</form>
</div>
</div>
</div>