DEV Community

Cover image for Sign Up Form like Instagram with Bootstrap 5.1.0
Simon Köhler
Simon Köhler

Posted on

6 2

Sign Up Form like Instagram with Bootstrap 5.1.0

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>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

Image of Datadog

The Essential Toolkit for Front-end Developers

Take a user-centric approach to front-end monitoring that evolves alongside increasingly complex frameworks and single-page applications.

Get The Kit

Top comments (0)

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more