Estoy haciendo un formulario y necesito que los botones queden a la altura de los <select>
. Necesito que siempre estén pegado al borde de abajo del div que lo contiene Esto hará que siempre queden alineados con los <select>
, esta característica tanto en versiones mobile como desktop.
.btn-bottom-right {
position: absolute;
right: 0;
bottom: 20% !important;
}
.btn-bottom-left {
position: absolute;
left: 0;
bottom: 20% !important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<div class="row">
<div class="col-sm-3">
<div class="form-group">
<label for="fs7 m-0 text-secondary">
Razón social
<span class="text-danger">*</span>
</label>
<select class="form-control form-control-sm">
<option value="0" selected disabled>Selecciona una razón social</option>
</select>
</div>
</div>
<div class="col-sm-3">
<div class="form-group">
<label for="fs7 m-0 text-secondary">
Sucursal
<span class="text-danger">*</span>
</label>
<select class="form-control form-control-sm">
<option value="0" selected disabled>Selecciona una sucursal</option>
</select>
</div>
</div>
<div class="col-sm-3">
<div class="form-group">
<label for="fs7 m-0 text-secondary">
Departamento
<span class="text-danger">*</span>
</label>
<select class="form-control form-control-sm">
<option value="NEW_CAR">Autos nuevos</option>
</select>
</div>
</div>
<div class="col-sm-3">
<div class="clearfix">
<button class="btn btn-sm btn-outline-secondary btn-bottom-left">
<i class="fas fa-search"></i> Buscar
</button>
<button class="btn btn-sm btn-outline-secondary btn-bottom-right">
<i class="fas fa-eraser"></i> Limpiar
</button>
</div>
</div>
</div>
Le agregué ese código de CSS. En el viewport sm de bootstrap 4 se ve bien, se empareja justo como lo necesito, pero se desbarata cuando es un móvil.
Me gustaría buscar una solución limpia con CSS, sin espacios, paddings o margins al tanteo.