Bootstrap 4 Login Form with glass effect using html5 / css3 / bootstrap
Description
Bootstrap4 Login form
Step1 :- go to getbootstrap.com
step2 :- copy template code.
Step2-A:-
please add angle brackets.
div class="container"
div class="row"
div class="col-md-8 offset-md-2"
div class="login-form"
/div
/div
/div
step3:- copy form code
step4:- add style.
body{
background-image: url("https://cdn.pixabay.com/photo/2019/09/24/16/05/storm-4501645_1280.jpg");
background-repeat: no-repeat, repeat;
background-position: center; /* Center the image */
background-size: cover; /* Resize the background image to cover the entire container */
padding-top: 50px;
}
.login-form{
background:#1a11117a;
margin-top: 100px;
margin-bottom: 100px;
padding: 100px;
border-radius: 50px;
color: white;
box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
}
.login-heading{
text-align: center;
margin-top: 20px;
}
.container{
background: #09090a4f;
border-radius: 50px;
box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.38);
}
h1{
text-align: center;
font-size: 16px;
letter-spacing: 1px;
}
.btn-primary {
color: #fff;
background-color: #007bff4d;
border-color: #1f456d;
width: 100%;
}
Comments