How can I align vertically a card

web
mobile

Topic: How can I align vertically a card

hudjoubert asked 5 months ago

Expected behavior

I'm triyng align a card vertically on center for a Login page, but everything I do is not working.

Actual behavior My card only stay on top.

Resources (screenshots, code snippets etc.)

<div class="container">
  <div class="row justify-content-center align-items-center">
    <div class="col-md-5 col-sm-8">
      <mdb-card class="card-login">
        <form class="text-center p-5">
          <img
            src=".././assets/sense.png"
            class="img-fluid mb-4"
            alt="Responsive image"
          />

          <!-- Matricula -->
          <input
            [(ngModel)]="usuario.matricula"
            name="matricula"
            type="text"
            id="defaultLoginFormEmail"
            class="form-control mb-2 input-field"
            placeholder="Matricula"
          />

          <!-- Senha -->
          <input
            [(ngModel)]="usuario.password"
            name="senha"
            type="password"
            id="defaultLoginFormPassword"
            class="form-control mb-2 input-field"
            placeholder="Senha"
          />

          <button
            mdbBtn
            class="my-1 login-btn"
            type="submit"
            mdbWavesEffect
            (click)="fazerLogin()"
          >
            Entrar
          </button>
        </form>
      </mdb-card>
    </div>
  </div>
</div>

Bartosz Termena staff answered 5 months ago

Dear @hudjoubert

Add to your container height:100vh

Below full example:

<div class="container" style="height: 100vh;">
  <div class="row justify-content-center align-items-center h-100">
    <div class="col-md-5 col-sm-8">
      <mdb-card class="card-login">
        <form class="text-center p-5">
          <img src=".././assets/sense.png" class="img-fluid mb-4" alt="Responsive image" />

          <!-- Matricula -->
          <input
            [(ngModel)]="usuario.matricula"
            name="matricula"
            type="text"
            id="defaultLoginFormEmail"
            class="form-control mb-2 input-field"
            placeholder="Matricula"
          />

          <!-- Senha -->
          <input
            [(ngModel)]="usuario.password"
            name="senha"
            type="password"
            id="defaultLoginFormPassword"
            class="form-control mb-2 input-field"
            placeholder="Senha"
          />

          <button mdbBtn class="my-1 login-btn" type="submit" mdbWavesEffect (click)="fazerLogin()">
            Entrar
          </button>
        </form>
      </mdb-card>
    </div>
  </div>
</div>

Hope it helps!

Best Regards, Bartosz.


Please insert min. 20 characters.
Status

Answered

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: Angular
  • MDB Version: 8.3.1
  • Device: Web
  • Browser: Chrome
  • OS: Windows
  • Provided sample code: No
  • Provided link: No