Vertical Alignment on card-header with bootstrap

Question

I have a card and a title as a card-header. I would like the title to be aligned vertically below. I have tried align-text-bottom but it didn’t work. Follows the code:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="card">
  <h5 class="card-header align-text-bottom">Filtro por data</h5>
  <div class="card-body">
    <div class="row">
      <div class="col-md-3">
        <div class="form-group">
          <label>Conta Corrente </label>
          <dx-select-box placeholder="Selecione Conta..." [items]="contasCorrente" displayExpr="descricao" valueExpr="id" [searchEnabled]="true" formControlName="contaCorrenteId">
          </dx-select-box>
          <span class="text-danger" *ngIf="displayMessage.contaCorrenteId">
                      <p [innerHTML]="displayMessage.contaCorrenteId"></p>
                    </span>
        </div>
      </div>

      <div class="col-md-3">
        <div class="form-group">
          <label class="control-label" for="dataEmissaoInicial">Data Emissão Inicial</label>
          <dx-date-box type="date" width="100%" displayFormat="dd/MM/yyyy" formControlName="dataEmissaoInicial" (onValueChanged)="definirValor($event)"></dx-date-box>
          <span class="text-danger" *ngIf="displayMessage.dataEmissaoInicial">
                      <p [innerHTML]="displayMessage.dataEmissaoInicial"></p>
                    </span>
        </div>
      </div>

      <div class="col-md-3">
        <div class="form-group">
          <label class="control-label" for="dataEmissaoFinal">Data Emissão Final</label>
          <dx-date-box [min]="minDate" [max]="maxDate" type="date" width="100%" displayFormat="dd/MM/yyyy" formControlName="dataEmissaoFinal" (onValueChanged)="definirValor($event)"></dx-date-box>
          <span class="text-danger" *ngIf="displayMessage.dataEmissaoFinal">
                      <p [innerHTML]="displayMessage.dataEmissaoFinal"></p>
                    </span>
        </div>
      </div>

      <div class="col-md-3">
        <button type="button" style="margin-top: 27px" class="btn btn-block btn-success" (click)="filtrarConciliacao()">
                    <i class="fa fa-refresh"></i> Filtrar </button>
      </div>
    </div>
  </div>
</div>

Currently it is like this:

I’d like it to stay that way:

Answer 1

The easiest way to format this is by using the padding bootstrap native. See

In case I used the class pb-1 which decreases the padding-bottom, and increased the padding-top with pt-3 to equalize what I removed at the bottom, the result was like this

Follow the image code above:

<link rel="stylesheet" type="text/css" media="screen" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" />

<div class="card">
    <h5 class="card-header align-text-bottom pb-1 pt-3">Filtro por data</h5>
    <div class="card-body">
      <div class="row">
        <div class="col-md-3">
          <div class="form-group">
            <label>Conta Corrente </label>
            <dx-select-box placeholder="Selecione Conta..." [items]="contasCorrente" displayExpr="descricao" valueExpr="id" [searchEnabled]="true" formControlName="contaCorrenteId">
            </dx-select-box>
            <span class="text-danger" *ngIf="displayMessage.contaCorrenteId">
                        <p [innerHTML]="displayMessage.contaCorrenteId"></p>
                      </span>
          </div>
        </div>

        <div class="col-md-3">
          <div class="form-group">
            <label class="control-label" for="dataEmissaoInicial">Data Emissão Inicial</label>
            <dx-date-box type="date" width="100%" displayFormat="dd/MM/yyyy" formControlName="dataEmissaoInicial" (onValueChanged)="definirValor($event)"></dx-date-box>
            <span class="text-danger" *ngIf="displayMessage.dataEmissaoInicial">
                        <p [innerHTML]="displayMessage.dataEmissaoInicial"></p>
                      </span>
          </div>
        </div>

        <div class="col-md-3">
          <div class="form-group">
            <label class="control-label" for="dataEmissaoFinal">Data Emissão Final</label>
            <dx-date-box [min]="minDate" [max]="maxDate" type="date" width="100%" displayFormat="dd/MM/yyyy" formControlName="dataEmissaoFinal" (onValueChanged)="definirValor($event)"></dx-date-box>
            <span class="text-danger" *ngIf="displayMessage.dataEmissaoFinal">
                        <p [innerHTML]="displayMessage.dataEmissaoFinal"></p>
                      </span>
          </div>
        </div>

        <div class="col-md-3">
          <button type="button" style="margin-top: 27px" class="btn btn-block btn-success" (click)="filtrarConciliacao()">
                      <i class="fa fa-refresh"></i> Filtrar </button>
        </div>
      </div>
    </div>
  </div>