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=…


This content originally appeared on DEV Community and was authored by Simon Köhler

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


This content originally appeared on DEV Community and was authored by Simon Köhler


Print Share Comment Cite Upload Translate Updates
APA

Simon Köhler | Sciencx (2021-08-17T14:14:28+00:00) Sign Up Form like Instagram with Bootstrap 5.1.0. Retrieved from https://www.scien.cx/2021/08/17/sign-up-form-like-instagram-with-bootstrap-5-1-0/

MLA
" » Sign Up Form like Instagram with Bootstrap 5.1.0." Simon Köhler | Sciencx - Tuesday August 17, 2021, https://www.scien.cx/2021/08/17/sign-up-form-like-instagram-with-bootstrap-5-1-0/
HARVARD
Simon Köhler | Sciencx Tuesday August 17, 2021 » Sign Up Form like Instagram with Bootstrap 5.1.0., viewed ,<https://www.scien.cx/2021/08/17/sign-up-form-like-instagram-with-bootstrap-5-1-0/>
VANCOUVER
Simon Köhler | Sciencx - » Sign Up Form like Instagram with Bootstrap 5.1.0. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/08/17/sign-up-form-like-instagram-with-bootstrap-5-1-0/
CHICAGO
" » Sign Up Form like Instagram with Bootstrap 5.1.0." Simon Köhler | Sciencx - Accessed . https://www.scien.cx/2021/08/17/sign-up-form-like-instagram-with-bootstrap-5-1-0/
IEEE
" » Sign Up Form like Instagram with Bootstrap 5.1.0." Simon Köhler | Sciencx [Online]. Available: https://www.scien.cx/2021/08/17/sign-up-form-like-instagram-with-bootstrap-5-1-0/. [Accessed: ]
rf:citation
» Sign Up Form like Instagram with Bootstrap 5.1.0 | Simon Köhler | Sciencx | https://www.scien.cx/2021/08/17/sign-up-form-like-instagram-with-bootstrap-5-1-0/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts