Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Login Form Design in Angular Material
.login-form-flex {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
.button-flex-container {
display: flex;
width: 100%;
justify-content: flex-end;
}
<div class="login-form-flex">
<mat-card>
<mat-card-title>
Login
</mat-card-title>
<mat-card-content>
<mat-form-field>
<input matInput placeholder="User Name">
</mat-form-field>
<br/>
<mat-form-field>
<input type="password" matInput placeholder="Password"/>
</mat-form-field>
</mat-card-content>
<mat-card-actions>
<div class="button-flex-container">
<button mat-raised-button color="primary">Login</button>
</div>
</mat-card-actions>
</mat-card>
</div>
@tarikguney

This comment has been minimized.

Copy link
Owner Author

tarikguney commented Jan 11, 2019

The CSS uses FlexBox properties to align content. The login form is centered in the screen both horizontally and vertically.

The following shows how the login looks like in a browser:

image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.