Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Bootstrap 4 - Minimalist material design vertical, horizontal centered login form
<!DOCTYPE html>
<link href="" rel="stylesheet">
<style type="text/css">
@import url(',500');
body {
background-color: #f1f5f8;
font-family: 'Quicksand', sans-serif;
.min-vh-100 {
min-height: 100vh !important;
/* IE11 - */
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;
/* ........ */
<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="" class="px-2" height="100px">
<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 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 class="d-flex justify-content-end mb-3">
<a class="small" href="#forgot-password">
Forgot Password?
<div class="mb-3">
<button class="btn btn-block btn-outline-dark rounded-full" type="submit">Sign In</button>
<div class="w-100 mt-n8">
<p class="text-center">
&copy;<a href="#bsmart" class="">B'Smart Technology</a> All rights reserved.
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.