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