Sign Up Form like Instagram with Bootstrap 5.1.0

#codepen #bootstrap #html #forms

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;
}