<div class="rtl-form">
<h1>Tolmatol Login</h1>
<form action="">
<input type="text" name="" id="name" class="form-control" placeholder="Username">
<input type="password" name="" id="pass" class="form-control" placeholder="Password">
<div class="row mt-3">
<div class="col-md-6"><label for="check"><input type="checkbox" name="" id="check" class="btn"> Remember Me</label></div>
<div class="col-md-6 text-right"><button class="btn btn-sm btn-primary">Sign In</button></div>
</div>
</form>
<a href="" class="link">Forget Password..?</a>
<button class="btn btn-block btn-outline-primary btn-lg mt-5">Create free account</button>
<hr class="mt-5 mb-5">
<div class="btns-login">
<button class="btn btn-sm btn-block btn-facebook">Sign in with Facbook</button>
<button class="btn btn-sm btn-block btn-google">Sign in with Google</button>
<button class="btn btn-sm btn-block btn-twitter">Sign in with Twitter</button>
<button class="btn btn-sm btn-block btn-linkdin">Sign in with Linkdin</button>
</div>
</div>
body { background: url(Bootstrap-Snippets-right-side-login-form.jpg); background-size:cover;}
.rtl-form { width:480px; background:#fff; padding:15px 30px; float: right; min-height: 105vh;}
.rtl-form h1 { text-align: center; font-size: 25px; padding: 30px 0px; color: #666;}
.rtl-form input[type="text"], input[type="password"] { margin:20px 0px 0px; }
.rtl-form button { font-weight: 500; padding:5px 15px;}
.btns-login button.btn { color:#fff; font-weight: 500;}
.btn-google { background: #da573b; border:solid 1px #be5238; }
.btn-google:hover { background: #be5238; border:solid 1px #9b4631;}
.btn-twitter { background: #1daee3; border:solid 1px #3997ba; }
.btn-twitter:hover { background: #3997ba; border:solid 1px #347b95; }
.btn-facebook { background: #4c699e; border:solid 1px #47618d; }
.btn-facebook:hover { background: #47618d; border:solid 1px #3c5173; }
.btn-linkdin { background: #4875B4; border:solid 1px #466b99; }
.btn-linkdin:hover { background: #466b99; border:solid 1px #3b5a7c; }