Topic: How can I align vertically a card
hudjoubert asked 5 years 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 years 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.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Free
- Premium support: No
- Technology: MDB Angular
- MDB Version: 8.3.1
- Device: Web
- Browser: Chrome
- OS: Windows
- Provided sample code: No
- Provided link: No