<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <script src="https://use.fontawesome.com/f59bcd8580.js"></script> <div class="container"> <div class="row pt-4 mb-4"> <div class="col-10 col-md-6 mx-auto d-flex align-items-center justify-content-between"> <div class="number-circle number-active d-flex align-items-center justify-content-center font-weight-bold"> <i class="fa fa-check"></i> </div> <div class="line-bar line-bar-active"></div> <div class="number-circle d-flex align-items-center justify-content-center font-weight-bold">2</div> <div class="line-bar"></div> <div class="number-circle d-flex align-items-center justify-content-center font-weight-bold">3</div> </div> </div> <div class="row"> <div class="col-10 col-md-6 shadow-new p-4 bg-light mx-auto"> <h5>Step One</h5> <div class="divider3"></div> <form> <div class="row pt-2"> <div class="col-md-6"> <div class="form-group"> <input type="text" class="form-control" placeholder="Page Name"> </div> </div> <div class="col-md-6"> <div class="form-group"> <input type="text" class="form-control" placeholder="Page Name"> </div> </div> </div> <div class="row"> <div class="col-md-6"> <div class="form-group"> <input type="text" class="form-control" placeholder="Email"> </div> </div> <div class="col-md-6"> <div class="form-group"> <input type="text" class="form-control" placeholder="Website"> </div> </div> </div> <div class="form-group"> <input type="text" class="form-control" placeholder="Address"> </div> <div class="row"> <div class="col-md-6"> <div class="form-group"> <input type="text" class="form-control" placeholder="Phone"> </div> </div> <div class="col-md-6"> <div class="form-group"> <div class="form-group"> <input type="text" class="form-control" placeholder="Page Name"> </div> </div> </div> </div> <div class="row"> <div class="col-md-6"> <div class="form-group"> <div class="form-group"> <input type="text" class="form-control" placeholder="Page Name"> </div> </div> </div> <div class="col-md-6"> <div class="form-group"> <div class="form-group"> <input type="text" class="form-control" placeholder="Page Name"> </div> </div> </div> </div> <button type="submit" class="btn btn-primary d-block w-100">Next <i class="fa fa-long-arrow-right" aria-hidden="true"></i></button> </form> </div> </div> </div> <div class="container text-center small text-muted mt-4 mb-5"> Design by <a href="https://bootstraplily.com/" target="_blank">www.bootstraplily.com</a> </div>

.add-new-page { background-color: #96c946; width: 70px; height: 70px; border-radius: 100%; position: absolute; right: 10px; bottom: 10px; box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.15); } .shadow-new { box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.15); } .add-new-page i { font-size: 24px; color: #fff; } .number-circle { width: 30px; height: 30px; border-radius: 30px; font-size: 12px; background-color: #F06; color: #fff; font-weight: bold; box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.15); } .line-bar { height: 6px; width: 42%; background-color: #F06; } .number-active { background-color: #94cd5d; } .line-bar-active { background-color: #94cd5d; background-image: url(background-line.png); } ::placeholder{ font-size:12px; font-weight:bold; }