<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 ----------> <div id="Payment_box" class="box"> <h1>Make Your Payment</h1> <form action="" > <div class="row"> <label class="col-lg-4" for="user">Card Holder's Name : </label> <input class="col-lg-8" type="text" name="username" ></div> <div class="row"> <label class="col-lg-4" for="CardNo">Card No. : </label> <input class="col-lg-8" type="number" name="cno."></div> <div class="row"> <label class="col-lg-4" for="expirydate">Expiration Date : </label> <input class="col-lg-8" type="month" name="expirydate"></div> <div class="row"> <label class="col-lg-4" for="cvv">Card CVV No. : </label> <input class="col-lg-8" type="password" name="cvv" maxlength="4"></div> <div class="row"> <input class="button col-lg-8 ms-auto " type="submit" value="Pay" ></div> </form> </div>

body{ background-color: #BEF5AD; background-image: url('https://www.pngwing.com/en/free-png-bmlzb'); background-repeat: no-repeat; font-family: 'Merriweather', serif; } h1{ text-align: center; margin-bottom: 3rem; font-family: 'Montserrat', sans-serif; } .box{ background-color:#DAFFCD; width:50%; margin:5% auto; padding:4% 4%; box-shadow: 10px 6px 10px 6px rgba(0, 0, 0, 0.2), 20px 6px 20px 6px rgba(0, 0, 0, 0.19); } input{ border-radius: .5rem; border-color:black; border-width:2px; } label{ text-align:left; font-size:1rem; } .row{ margin:2rem; } .button{ background-color:#40f904; } .button:hover{ background-color:#BEF5AD; }