"Elegant Login Page"
Bootstrap 4.1.1 Snippet by SamimOnline

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html> <head> <title>Login Page</title> <!--Made with love by Mutiullah Samim --> <!--Bootsrap 4 CDN--> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <!--Fontawesome CDN--> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous"> <!--Custom styles--> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <div class="container"> <div class="d-flex justify-content-center h-100"> <div class="card"> <div class="card-header"> <h3>Sign In</h3> <div class="d-flex justify-content-end social_icon"> <span><i class="fab fa-facebook-square"></i></span> <span><i class="fab fa-google-plus-square"></i></span> <span><i class="fab fa-twitter-square"></i></span> </div> </div> <div class="card-body"> <form> <div class="input-group form-group"> <div class="input-group-prepend"> <span class="input-group-text"><i class="fas fa-user"></i></span> </div> <input type="text" class="form-control" placeholder="username"> </div> <div class="input-group form-group"> <div class="input-group-prepend"> <span class="input-group-text"><i class="fas fa-key"></i></span> </div> <input type="password" class="form-control" placeholder="password"> </div> <div class="row align-items-center remember"> <input type="checkbox">Remember Me </div> <div class="form-group"> <input type="submit" value="Login" class="btn float-right login_btn"> </div> </form> </div> <div class="card-footer"> <div class="d-flex justify-content-center links"> Don't have an account?<a href="#">Sign Up</a> </div> <div class="d-flex justify-content-center"> <a href="#">Forgot your password?</a> </div> </div> </div> </div> </div> </body> </html>
/* Made with love by Mutiullah Samim*/ @import url('https://fonts.googleapis.com/css?family=Numans'); html,body{ background-image: url('http://getwallpapers.com/wallpaper/full/a/5/d/544750.jpg'); background-size: cover; background-repeat: no-repeat; height: 100%; font-family: 'Numans', sans-serif; } .container{ height: 100%; align-content: center; } .card{ height: 370px; margin-top: auto; margin-bottom: auto; width: 400px; background-color: rgba(0,0,0,0.5) !important; } .social_icon span{ font-size: 60px; margin-left: 10px; color: #FFC312; } .social_icon span:hover{ color: white; cursor: pointer; } .card-header h3{ color: white; } .social_icon{ position: absolute; right: 20px; top: -45px; } .input-group-prepend span{ width: 50px; background-color: #FFC312; color: black; border:0 !important; } input:focus{ outline: 0 0 0 0 !important; box-shadow: 0 0 0 0 !important; } .remember{ color: white; } .remember input { width: 20px; height: 20px; margin-left: 15px; margin-right: 5px; } .login_btn{ color: black; background-color: #FFC312; width: 100px; } .login_btn:hover{ color: black; background-color: white; } .links{ color: white; } .links a{ margin-left: 4px; }

Related: See More

Paper Kit 2
My Awesome Login Page
Elegant Bootstrap 4 message chat box template
Simple & Clean 404 Error Page style

Questions / Comments:

hello im so interested in the elegant login form is anywhere to convert the html file in haml file for my rails app? help please!

elie (-2) - 5 years ago - Reply -2

Hello, thanks for your interest. You can convert HTML to HAML here at http://htmltohaml.com

SamimOnline (-1) - 5 years ago - Reply 1

I just love this elegant login form

PaariDhanush (-3) - 5 years ago - Reply -3

How set CDs and Js files in my webpage in above example

Koli (-5) - 4 years ago - Reply -5

a

Danush93 () - 2 years ago - Reply 0

The list is Great, well designed and very creative thinking. I suggest a website that we can get more knowledge about web developing, It helped me to success my various projects. https://w3schoolweb.com/

Use this link to access.

Danush93 () - 2 years ago - Reply 0

The list is Great, well designed and very creative thinking. I suggest a website that we can get more knowledge about web developing, It helped me to success my various projects. https://w3schoolweb.com/

Use this link to access.

Danush93 () - 2 years ago - Reply 0

The list is Great, well designed and very creative thinking. I suggest a website that we can get more knowledge about web developing, It helped me to success my various projects. https://w3schoolweb.com/

Use this link to access.

Danush93 () - 2 years ago - Reply 0

poggers

MartinB () - 3 years ago - Reply 0

poggers

MartinB () - 3 years ago - Reply 0

poggers

MartinB () - 3 years ago - Reply 0

poggers

MartinB () - 3 years ago - Reply 0

poggers

MartinB () - 3 years ago - Reply 0

poggers

MartinB () - 3 years ago - Reply 0

poggers

MartinB () - 3 years ago - Reply 0

Bro thanks for share this login, it was very useful for me, i really apreciate your work. THANKS

Masters2397 () - 4 years ago - Reply 0

It's very helpful to me.. thank you sir

satyabali () - 4 years ago - Reply 0

Hi,

I have been looking for something like this Elegant Login Page for some time now.

The one question that puzzles me as I have a little knowledge about website development is where to place the code?

Elsherif () - 4 years ago - Reply 0

Hi,

I have been looking for something like this Elegant Login Page for some time now.

The one question that puzzles me as I have a little knowledge about website development is where to place the code?

Elsherif () - 4 years ago - Reply 0

can i use this with php?

jane0228 () - 5 years ago - Reply 0

yes you can, i used it with php, just put your php code at the begining with php tags and save the file as "login.php"

Masters2397 () - 4 years ago - Reply 0