Designing bootstrap sign-up forms with floating label

So Hello guys ! Whats up ! , this is Ritesh , I m back with this tutorial along with codes , if any doubt please comment and share this post , So lets start , you have probably seen in google when we enter input in form the label floats upper , If you notice that its good other wise today we achieve this by Designing Bootstrap sign-up form with floating label.




Paste The first box code in your html file & second in your style.css file.



<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap  CDN -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<title>Bootstrap floating input Registeration form</title>
</head>
<body>
<div class="container">
<h3>Sign up</h3>
<form>
<div class="row">
<div class="col-md-12 col-sm-12 col">
<div>
<input type="text" name="" required="">
<label>
Name
</label>
</div>
<div>
<input type="text" name="" required="">
<label>
Username
</label>
</div>
<div>
<input type="text" name="" required="">
<label>Email id</label>
</div>
<div>
<input type="password" name="" required="">
<label>Password</label>
</div>
<div>
<input type="password" name="" required="">
<label>Re-Enter Password</label>
</div>
<input type="submit" value="Create my account" name="">
</div>
</div>
</form>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>


body
{
margin: 0;
padding: 0;
background: url(image/back.jpg);
background-repeat: no-repeat;
background-size: cover;
height:100vh;

}

.container
{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 400px;
background: #fff;
padding: 45px;
box-sizing: border-box;
border :1px solid rgba(0,0,0,.1);
-webkit-box-shadow: -1px 6px 63px 5px rgba(0,0,0,0.35);
    -moz-box-shadow: -1px 6px 63px 5px rgba(0,0,0,0.35);
    box-shadow: -1px 6px 63px 5px rgba(0,0,0,0.35);

}
.container h3
{
text-align: center;
margin: 0 0 40px;
padding: 0;
color: #008000;
letter-spacing: 2px;
}
.container input
{
padding: 5px;
margin-bottom: 30px;
width: 100%;
box-sizing: border-box;
box-shadow: none;
outline: none;
border:none;
border-bottom: 1px solid #008000;
}
.container input[type="submit"]
{
border-radius: 25px;
font-size: 20px;
height: 40px;
cursor : pointer;
margin-bottom: 0;
}

.container form div
{
position: relative;
}
.container form div label
{
position: absolute;
top: 3px;
pointer-events: none;
left: 0;
transition: .5s;
}
.container input:focus ~label,
.container input:valid ~label
{
left: 0;
top: -20px;
color: #008000;
font-size: 12px;
font-weight: bold;
}
.container input:focus,
.container input:valid
{
border-bottom: 1px solid #008000;
}





Download the source code from here :-
Share this post to your friend if you like this and help them also good bye see you in next post.


Designing bootstrap sign-up forms with floating label Designing bootstrap sign-up forms with floating label Reviewed by Ritesh Vishwakarma on May 12, 2019 Rating: 5

No comments:

Powered by Blogger.