Bootstrap Snippet User profile form requirement input using HTML Bootstrap

"User profile form requirement input"
Bootstrap 4.0.0 Snippet by hitdcenter

4.0.0

1.1K 0 Fav

Post to Facebook Tweet this

<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>  <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content=""> <meta name="author" content=""> <title>User profile form requirement</title> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha256-3dkvEK0WLHRJ7/Csr0BZjAWxERc5WH7bdeUya2aXxdU= sha512-+L4yy6FRcDGbXJ9mPG8MT/3UCDzwR9gPeyFNMCtInsol++5m3bk2bXWKdZjvybmohrAsn3Ua5x8gfLnbE1YkOg==" crossorigin="anonymous">   <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha256-7s5uDGW3AHqw6xtJmNNtr+OBRJUlgkNJEo78P4b0yRw= sha512-nNo+yCHEyn0smMxSswnf/OnX6/KwJuZTlNZBjauKhTK0c+zT+q5JOCx0UFhXQ6rJR9jg6Es8gPuD2uZcYDLqSw==" crossorigin="anonymous">  <style> body { padding-top: 70px; /* Required padding for .navbar-fixed-top. Remove if using .navbar-static-top. Change if height of navigation changes. */ } .othertop{margin-top:10px;} </style>    </head> <body> <div class="container"> <div class="row"> <div class="col-md-10 "> <form class="form-horizontal"> <fieldset>  <legend>User profile form requirement</legend>  <div class="form-group"> <label class="col-md-4 control-label" for="Name (Full name)">Name (Full name)</label> <div class="col-md-4"> <div class="input-group"> <div class="input-group-addon"> <i class="fa fa-user"> </i> </div> <input id="Name (Full name)" name="Name (Full name)" type="text" placeholder="Name (Full name)" class="form-control input-md"> </div> </div> </div>  <div class="form-group"> <label class="col-md-4 control-label" for="Upload photo">Upload photo</label> <div class="col-md-4"> <input id="Upload photo" name="Upload photo" class="input-file" type="file"> </div> </div>  <div class="form-group"> <label class="col-md-4 control-label" for="Date Of Birth">Date Of Birth</label> <div class="col-md-4"> <div class="input-group"> <div class="input-group-addon"> <i class="fa fa-birthday-cake"></i> </div> <input id="Date Of Birth" name="Date Of Birth" type="text" placeholder="Date Of Birth" class="form-control input-md"> </div> </div> </div>  <div class="form-group"> <label class="col-md-4 control-label" for="Father">Father's name</label> <div class="col-md-4"> <div class="input-group"> <div class="input-group-addon"> <i class="fa fa-male" style="font-size: 20px;"></i> </div> <input id="Father" name="Father" type="text" placeholder="Father's name" class="form-control input-md"> </div> </div> </div>  <div class="form-group"> <label class="col-md-4 control-label" for="Mother">Mother's Name</label> <div class="col-md-4"> <div class="input-group"> <div class="input-group-addon"> <i class="fa fa-female" style="font-size: 20px;"></i> </div> <input id="Mother" name="Mother" type="text" placeholder="Mother's Name" class="form-control input-md"> </div> </div> </div>  <div class="form-group"> <label class="col-md-4 control-label" for="Gender">Gender</label> <div class="col-md-4"> <label class="radio-inline" for="Gender-0"> <input type="radio" name="Gender" id="Gender-0" value="1" checked="checked"> Male </label> <label class="radio-inline" for="Gender-1"> <input type="radio" name="Gender" id="Gender-1" value="2"> Female </label> <label class="radio-inline" for="Gender-2"> <input type="radio" name="Gender" id="Gender-2" value="3"> Other </label> </div> </div>  <div class="form-group"> <label class="col-md-4 control-label" for="radios">Marital Status:</label> <div class="col-md-4"> <label class="radio-inline" for="radios-0"> <input type="radio" name="radios" id="radios-0" value="1" checked="checked"> Married </label> <label class="radio-inline" for="radios-1"> <input type="radio" name="radios" id="radios-1" value="2"> Unmarried </label> </div> </div>   <div class="form-group"> <label class="col-md-4 control-label col-xs-12" for="Permanent Address">Permanent Address</label> <div class="col-md-2 col-xs-4"> <input id="Permanent Address" name="Permanent Address" type="text" placeholder="District" class="form-control input-md "> </div> <div class="col-md-2 col-xs-4"> <input id="Permanent Address" name="Permanent Address" type="text" placeholder="Area" class="form-control input-md "> </div> </div> <div class="form-group"> <label class="col-md-4 control-label" for="Permanent Address"></label> <div class="col-md-2 col-xs-4"> <input id="Permanent Address" name="Permanent Address" type="text" placeholder="Street" class="form-control input-md "> </div> </div> <div class="form-group"> <label class="col-md-4 control-label col-xs-12" for="Temporary Address">Temporary Address</label> <div class="col-md-2 col-xs-4"> <input id="Temporary Address" name="Temporary Address" type="text" placeholder="District" class="form-control input-md "> </div> <div class="col-md-2 col-xs-4"> <input id="Temporary Address" name="Temporary Address" type="text" placeholder="Area" class="form-control input-md "> </div> </div> <div class="form-group"> <label class="col-md-4 control-label" for="Temporary Address"></label> <div class="col-md-2 col-xs-4"> <input id="Temporary Address" name="Temporary Address" type="text" placeholder="Street" class="form-control input-md "> </div> </div>  <div class="form-group"> <label class="col-md-4 control-label" for="Primary Occupation">Primary Occupation</label> <div class="col-md-4"> <div class="input-group"> <div class="input-group-addon"> <i class="fa fa-briefcase"></i> </div> <input id="Primary Occupation" name="Primary Occupation" type="text" placeholder="Primary Occupation" class="form-control input-md"> </div> </div> </div>  <div class="form-group"> <label class="col-md-4 control-label" for="Secondary Occupation (if any)">Secondary Occupation (if any)</label> <div class="col-md-4"> <div class="input-group"> <div class="input-group-addon"> <i class="fa fa-briefcase"></i> </div> <input id="Secondary Occupation (if any)" name="Secondary Occupation (if any)" type="text" placeholder="Secondary Occupation (if any)" class="form-control input-md"> </div> </div> </div>  <div class="form-group"> <label class="col-md-4 control-label" for="Skills">Skills</label> <div class="col-md-4"> <div class="input-group"> <div class="input-group-addon"> <i class="fa fa-graduation-cap"></i> </div> <input id="Skills" name="Skills" type="text" placeholder="Skills" class="form-control input-md"> </div> </div> </div>  <div class="form-group"> <label class="col-md-4 control-label" for="Phone number ">Phone number </label> <div class="col-md-4"> <div class="input-group"> <div class="input-group-addon"> <i class="fa fa-phone"></i> </div> <input id="Phone number " name="Phone number " type="text" placeholder="Primary Phone number " class="form-control input-md"> </div> <div class="input-group othertop"> <div class="input-group-addon"> <i class="fa fa-mobile fa-1x" style="font-size: 20px;"></i> </div> <input id="Phone number " name="Secondary Phone number " type="text" placeholder=" Secondary Phone number " class="form-control input-md"> </div> </div> </div>  <div class="form-group"> <label class="col-md-4 control-label" for="Email Address">Email Address</label> <div class="col-md-4"> <div class="input-group"> <div class="input-group-addon"> <i class="fa fa-envelope-o"></i> </div> <input id="Email Address" name="Email Address" type="text" placeholder="Email Address" class="form-control input-md"> </div> </div> </div>  <div class="form-group"> <label class="col-md-4 control-label" for="Availability time">Availability time</label> <div class="col-md-4"> <div class="input-group"> <div class="input-group-addon"> <i class="fa fa-clock-o"></i> </div> <input id="Availability time" name="Availability time" type="text" placeholder="Availability time" class="form-control input-md"> </div> </div> </div>  <div class="form-group"> <label class="col-md-4 control-label" for="Available Service Area">Available Service Area</label> <div class="col-md-4"> <div class="input-group"> <div class="input-group-addon"> <i class="fa fa-street-view"></i> </div> <input id="Available Service Area" name="Available Service Area" type="text" placeholder="Available Service Area" class="form-control input-md"> </div> </div> </div>  <div class="form-group"> <label class="col-md-4 control-label" for="Citizenship No.">Citizenship No.</label> <div class="col-md-4"> <div class="input-group"> <div class="input-group-addon"> <i class="fa fa-sticky-note-o"></i> </div> <input id="Citizenship No." name="Citizenship No." type="text" placeholder="Citizenship No." class="form-control input-md"> </div> </div> </div>  <div class="form-group"> <label class="col-md-4 control-label" for="Languages Known">Languages Known</label> <div class="col-md-4"> <div class="checkbox"> <label for="Languages Known-0"> <input type="checkbox" name="Languages Known" id="Languages Known-0" value="1"> Nepali </label> </div> <div class="checkbox"> <label for="Languages Known-1"> <input type="checkbox" name="Languages Known" id="Languages Known-1" value="2"> Newari </label> </div> <div class="checkbox"> <label for="Languages Known-2"> <input type="checkbox" name="Languages Known" id="Languages Known-2" value="3"> English </label> </div> <div class="checkbox"> <label for="Languages Known-3"> <input type="checkbox" name="Languages Known" id="Languages Known-3" value="4"> Hindi </label> </div> <div class="othertop"> <label for="Languages Known-4"> </label> <input type="input" name="LanguagesKnown" id="Languages Known-4" placeholder="Other Language"> </div> </div> </div>  <div class="form-group"> <label class="col-md-4 control-label" for="License No.">License No.</label> <div class="col-md-4"> <div class="input-group"> <div class="input-group-addon"> <i class="fa fa-sticky-note-o"></i> </div> <input id="License No." name="License No." type="text" placeholder="License No." class="form-control input-md"> </div> </div> </div>  <div class="form-group"> <label class="col-md-4 control-label" for="Owns Vehicle">Owns Vehicle?</label> <div class="col-md-4"> <div class="checkbox"> <label for="Owns Vehicle-0"> <input type="checkbox" name="Owns Vehicle" id="Owns Vehicle-0" value="1"> 4 wheeler </label> </div> <div class="checkbox"> <label for="Owns Vehicle-1"> <input type="checkbox" name="Owns Vehicle" id="Owns Vehicle-1" value="2"> Bike </label> </div> <div class="checkbox"> <label for="Owns Vehicle-2"> <input type="checkbox" name="Owns Vehicle" id="Owns Vehicle-2" value="3"> Bicycle </label> </div> </div> </div>  <div class="form-group"> <label class="col-md-4 control-label" for="Working Experience (time period)">Working Experience (time period)</label> <div class="col-md-4"> <div class="input-group"> <div class="input-group-addon"> <i class="fa fa-clock-o"></i> </div> <input id="Working Experience (time period)" name="Working Experience" type="text" placeholder="Enter time period " class="form-control input-md"> </div> </div> </div>  <div class="form-group"> <label class="col-md-4 control-label" for="Overview (max 200 words)">Overview (max 200 words)</label> <div class="col-md-4"> <textarea class="form-control" rows="10" id="Overview (max 200 words)" name="Overview (max 200 words)">Overview</textarea> </div> </div> <div class="form-group"> <label class="col-md-4 control-label" ></label> <div class="col-md-4"> <a href="#" class="btn btn-success"><span class="glyphicon glyphicon-thumbs-up"></span> Submit</a> <a href="#" class="btn btn-danger" value=""><span class="glyphicon glyphicon-remove-sign"></span> Clear</a> </div> </div> </fieldset> </form> </div> <div class="col-md-2 hidden-xs"> <img src="http://websamplenow.com/30/userprofile/images/avatar.jpg" class="img-responsive img-thumbnail "> </div> </div> </div>  <script src="js/jquery.js"></script>  <script src="js/bootstrap.min.js"></script> </body> </html>

Related: See More

Rotating CSS Card

Rotating CSS Card

plus minus counter input

plus minus counter input

Simple input spinner controls

Simple input spinner controls

Instagram Style User Online

Instagram Style User Online

Questions / Comments:

Posting GuidelinesFormatting