Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Bootstrap 4 - Minimalist material design vertical, horizontal centered login form
<!DOCTYPE html>
<html>
<head>
<title>Login</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
@import url('https://fonts.googleapis.com/css?family=Quicksand:400,500');
body {
background-color: #f1f5f8;
font-family: 'Quicksand', sans-serif;
}
.min-vh-100 {
min-height: 100vh !important;
/* IE11 - https://stackoverflow.com/a/25386261 */
height: 100px;
}
a {
color: inherit;
text-decoration: none;
}
.rounded-full {
border-radius: 1.25em;
}
.form-control {
outline: none;
border: none;
border-bottom: 1px solid #d9d9d9;
border-radius: 0;
padding: .375rem 0;
font-size: 1.25em;
}
.form-control:focus {
box-shadow: none;
border-bottom: 1px solid #7f7f7f;
}
label {
font-size: 0.85em;
font-weight: 500;
}
.custom-control-label {
font-size: 1em;
}
.btn {
font-weight: 500;
}
.btn:focus {
box-shadow: none;
border: 2px solid;
}
.btn:hover {
box-shadow: none;
background-color: transparent;
color: inherit;
border: 2px solid;
}
.error {
color: #dc3545;
}
.form-control.has-error {
border-color: #dc3545;
}
/* ........ */
</style>
</head>
<body>
<div id="app">
<div class="container mx-auto min-vh-100 d-flex justify-content-center align-items-center">
<div class="mb-4 col-lg-4 col-md-7 col-sm-10">
<!-- <h1 class="text-center uppercase mb-3">RECTS</h1> -->
<div class="d-flex justify-content-center mb-3">
<img src="http://bmatovu.com/wp-admin/images/wordpress-logo.svg" class="px-2" height="100px">
</div>
<form method="POST" action="#login" class="bg-white shadow rounded p-4">
<input type="hidden" name="_token" value="">
<div class="form-group mb-3">
<label class="required" for="email">Username</label>
<input class="form-control" id="username" name="username" type="username" placeholder="Or email address..." required autofocus>
<!-- <small class="error" role="alert">Wrong username or password.</small> -->
</div>
<div class="form-group mb-1">
<label class="" for="password">Password</label>
<input class="form-control" id="password" name="password" type="password" required>
<!-- <small class="error">Provider your account password.</small> -->
</div>
<div class="d-flex justify-content-end mb-3">
<a class="small" href="#forgot-password">
Forgot Password?
</a>
</div>
<div class="mb-3">
<button class="btn btn-block btn-outline-dark rounded-full" type="submit">Sign In</button>
</div>
</form>
</div>
</div>
<div class="w-100 mt-n8">
<p class="text-center">
&copy;<a href="#bsmart" class="">B'Smart Technology</a> All rights reserved.
</p>
</div>
</div>
</body>
</html>
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.