1

Tenho um card e um título como card-header. Gostaria que o título ficasse alinhado vertical inferior. Já tentei align-text-bottom mas não funcionou. Segue o código:

<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>

Atualmente está assim:

inserir a descrição da imagem aqui

Eu gostaria que ficasse assim:

inserir a descrição da imagem aqui

1 Resposta 1

0

A forma mais fácil de formatar isso é usando as classes de padding nativas do Bootstrap. Veja

inserir a descrição da imagem aqui

No caso eu usei a classe pb-1 que diminui o padding-bottom, e aumentei o padding-top com pt-3 para equalizar o que removi na parte inferior, o resultado ficou assim

inserir a descrição da imagem aqui

Segue o código da imagem acima:

<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>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .