A simple example of a sign-up form similar to Instagram's sign-up form using Bootstrap 5, which predominantly uses Bootstrap's built-in classes, as well as floating labels for form fields.
Here's the compiled HTML:
<section class="py-4">
<div class="container">
<div class="row d-flex align-items-center justify-content-center">
<div style="max-width:420px;">
<form action="#" class="bg-white border py-4 px-5" method="get">
<div class="text-center mb-3">
<i class="fab fa-bootstrap fa-5x text-secondary mb-2"></i>
<p class="text-muted fw-bold">
Sign up to see photos and videos from your friends.
</p>
</div>
<div class="mb-3">
<a class="btn btn-primary d-block bg-gradient" href="#"><i class="fab fa-facebook"></i> Log in with facebook</a>
<p class="my-3 text-center or">
OR
</p>
</div>
<div class="form-floating mb-3">
<input class="form-control" name="email" placeholder="Mobile Number or Email" required="" type="email" /><label>Mobile Number or Email</label>
</div>
<div class="form-floating mb-3">
<input class="form-control" name="fullname" placeholder="Full Name" required="" type="text" /><label>Full Name</label>
</div>
<div class="form-floating mb-3">
<input class="form-control" name="username" placeholder="Username" required="" type="text" /><label>Username</label>
</div>
<div class="form-floating mb-3">
<input class="form-control" name="password" placeholder="Password" required="" type="password" /><label>Password</label>
</div>
<div class="mb-2">
<button class="btn btn-primary fw-bold w-100 bg-gradient" href="#" type="submit">Sign Up</button>
</div>
<div class="small text-center">
By signing up, you agree to our Terms , Data Policy and Cookies Policy.
</div>
</form>
<div class="bg-white py-4 px-5 text-center border mt-4">
<p class="m-0">
Have an account? <a href="#">Log In</a>
</p>
</div>
</div>
</div>
</div>
</section>
CSS
Here is the only used additional class ".or", which ensures that there is a smooth line after the word "or". This snippet can also be used for other projects when a visual separator is needed.
.or{
position: relative;
}
.or:before{
content: '';
height: 1px;
background: linear-gradient(to right,silver,silver,rgba(255,255,255,0),rgba(255,255,255,0),silver,silver);
position: absolute;
left: 0;
top: 50%;
width: 100%;
z-index: 0;
}
Top comments (0)