"Form"
Bootstrap 3.0.0 Snippet by ihsanafridi63

Post to Facebook Tweet this

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.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> </head> <body> <div class="container cont"> <div class="col-md-6 col-sm-8 col-xs-12 col-md-offset-3 col-sm-offset-2 main"> <form action="#" method="post" class="form-horizontal"> <legend><b style="color:#fff">REGISTRATION FORM</b></legend> <div class="form-group"> <label class="col-md-3 control-label">NAME:</label> <div class="col-md-9"> <input type="text" class="form-control"> </div> </div> <div class="form-group"> <label class="col-md-3 control-label">EMAIL:</label> <div class="col-md-9"> <input type="text" class="form-control"> </div> </div> <div class="form-group"> <label class="col-md-3 control-label">PASSWORD:</label> <div class="col-md-9"> <input type="text" class="form-control"> </div> </div> <div class="form-group"> <label class="col-md-3 control-label">CONTACT #:</label> <div class="col-md-9"> <input type="text" class="form-control"> </div> </div> <div class="form-group"> <label class="col-md-3 control-label">COUNTRY:</label> <div class="col-md-9"> <select class="form-control"> <option>Pakistan</option> <option>China</option> <option>Australia</option> <option>Pakistan</option> <option>China</option> <option>Australia</option> </select> </div> </div> <div class="form-group"> <label class="col-md-3 control-label">Address:</label> <div class="col-md-9"> <textarea class="form-control" width="100%"></textarea> </div> </div> <div class="form-group" > <label class="col-md-3 control-label">OCCUPATION:</label> <div class="col-md-9"> <label class="checkbox-inline"> <input type="checkbox">Driver </label> <label class="checkbox-inline"> <input type="checkbox">Driver </label> <label class="checkbox-inline"> <input type="checkbox">Driver </label> <label class="checkbox-inline"> <input type="checkbox">Driver </label> </div> </div> <div class="form-group" > <label class="col-md-3 control-label">City:</label> <div class="col-md-9"> <label class="radio-inline"> <input type="radio">Peshawar </label> <label class="radio-inline"> <input type="radio">Karachi </label> <label class="radio-inline"> <input type="radio">Kohat </label> </div> </div> <div class="form-group"> <div class="col-md-5 col-md-offset-7"> <button class="btn btn-warning pull-right"> <span class="glyphicon glyphicon-repeat">Reset</span> </button> <button class="btn btn-primary pull-right save"> <span class="glyphicon glyphicon-floppy-disk ">Save</span> </button> </div> </div> </form> </div> </div> <script> $(document).ready(function(){ }); </script> </body> </html>
html, body { height:100%; } .form-control{ background:transparent; border-top:2px inset gray; border-left:2px inset gray; color:white; } option{ background-color:#f60; opacity:0.9; color:white !important; } select{ background-color:transparent !important; color:#fff !important; border-top:1px inset gray !important; border-left:1px inset gray !important; } body{ background:url(https://static.pexels.com/photos/248797/pexels-photo-248797.jpeg); background-color:rgba(0,0,0,0.5); background-blend-mode:multiply; background-size:auto; background-repeat:no-repeat; } .main{ background:transparent; border-top-left-radius:5px; border-top-right-radius:30px; border-bottom-right-radius:10px; border-bottom-left-radius:30px; padding:10px; border:1px solid gray; box-shadow:2px 2px 10px gray; color:white !important; }.btn{ border-radius:0px !important; background:transparent !important; } .save{ margin-right:10px; } .btn:hover{ background:#f60 !important; } .control-label{ text-align:left !important; } .cont{ min-height:100%; min-width:100%; display:flex; align-items:center; }

Related: See More

Vuetify Material Dashboard
login-form
Login Form
Contact Form

Questions / Comments: