Bootstrap Registration Form

by adminkit

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css">
<div class="container-fluid">
  <div class="row">
    <div class="col-12 col-lg-6 align-self-center">
      <div class="m-3 m-lg-5">

        <div class="text-center mt-4">
          <h1 class="h3">Get started</h1>
          <p class="lead">
            Start creating the best possible user experience for your customers.
          </p>
        </div>

        <form>
          <div class="mb-3">
            <label class="form-label">Name</label>
            <input class="form-control" type="text" name="name" placeholder="Enter your name" />
          </div>
          <div class="mb-3">
            <label class="form-label">Email</label>
            <input class="form-control" type="email" name="email" placeholder="Enter your email" />
          </div>
          <div class="mb-3">
            <label class="form-label">Password</label>
            <input class="form-control" type="password" name="password" placeholder="Enter password" />
          </div>
          <div class="text-center mt-4">
            <button type="submit" class="btn btn-block btn-success">Sign up</button>
          </div>

          <div class="text-center text-muted mt-2">
            Already have an account? <a href="#">Sign in</a>
          </div>
        </form>
      </div>
    </div>
    <div class="col-12 col-lg-6 d-none d-lg-flex col-img">
    </div>
  </div>
</div>

CSS

.col-img {
  /* background: scroll center url('https://source.unsplash.com/-4kwrnRrk-E/800x800'); */
  background: scroll center url('https://images.unsplash.com/photo-1587613757703-eea60bd69e66?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=800&h=800&fit=crop&ixid=eyJhcHBfaWQiOjF9');
  background-size: cover;
  min-height: 100vh;
}

.btn {
  border-radius: 5em;
}