"bootstrap 4 form ,Registration Form , css form , css htm form,"
Bootstrap 4.1.1 Snippet by sumanweb

Post to Facebook Tweet this

<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 ----------> <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html lang="en"> <head> <!-- Standard Meta --> <meta charset="utf-8"/> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"> <!-- Site Properties --> <title>Bootstrap 4 Register Form</title> <!-- Stylesheets --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css"> </head> <body> <main> <div class="container form-content"> <div class="header_content"> <h2> Suman Web Desgin </h2> </div> <!-- form card login --> <div class="card col-md-8 main-form" id="login-form"> <div class="card-header"> <h3 class="mt-2"> Registration Form </h3> </div> <div class="card-body"> <form class="form row" role="form" autocomplete="off" id="formLogin" novalidate="" method="POST"> <div class="form-group col-md-6"> <label for="uname1">Name</label> <input type="text" class="form-control" name="uname1" id="uname1" required=""> </div> <div class="form-group col-md-6"> <label for="name">Father Name </label> <input type="text" class="form-control" name="uname1" required=""> </div> <div class="form-group col-md-6"> <label for="name"> Mobile No. </label> <input type="number" class="form-control" name="uname1" required=""> </div> <div class="form-group col-md-6"> <label>Bus Facilicty Aviliable From</label> <select id="inputState" class="form-control"> <option> Choose...</option> <option> Kunadi</option> <option>Jawahar Nagar</option> <option>Baran Road</option> </select> </div> <div class="form-group col-md-6"> <label for="uname1">Present Class </label> <input type="text" class="form-control" name="uname1" id="uname1" required=""> </div> <div class="form-group col-md-6"> <label for="name">Coaching </label> <input type="text" class="form-control" name="uname1" required=""> </div> <button type="submit" class="btn btn-success btn-lg col-md-6 " id="btnLogin"> Submit </button> </form> </div> </div> <!--/Container--> </div> </main> <!-- *****Suman Web**** --> </body> </html>
main { padding: 40px 15px; background: linear-gradient(4deg, #5f13869e 17%, #0e73e0a8 69%), url(http://eskipaper.com/images/bubbles-wallpaper-10.jpg); background-position: center; background-size: cover; background-attachment: fixed; } .form-group label{ font-weight:500; } .main-form { margin: 0 auto; } .card-header { background-color: transparent; text-align: center; } .btn-lg.col-md-6 { margin: 10px auto!important; display: block; } .form-content { margin-bottom:60px; } .form-content .form-control { border-radius: 0; } .container.form-content .btn{ min-width: 140px; font-size: 16px; font-weight: 600; color: #fff; cursor: pointer; height: 40px; text-align: center; border: none; background-size: 300% 100%; border-radius: 50px; moz-transition: all .4s ease-in-out; -o-transition: all .4s ease-in-out; -webkit-transition: all .4s ease-in-out; transition: all .4s ease-in-out; } .container.form-content .btn{ background-image: linear-gradient(to right, #dc3545, #FCEE21, #dc3545, #dc3545); box-shadow: 0 4px 15px 0 rgba(2, 2, 2, 0.16); box-shadow: 0 4px 15px 0 rgba(2, 2, 2, 0.16); } .container.form-content .btn:hover { background-position: 100% 0; moz-transition: all .4s ease-in-out; -o-transition: all .4s ease-in-out; -webkit-transition: all .4s ease-in-out; transition: all .4s ease-in-out; } .header_content h2{ font-size:40px; font-weight:bold; margin-bottom:20px; } .header_content{ text-align:center; padding:40px; color:#fff; }

Questions / Comments: