<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 ----------> <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'> <div class"form-Sektions"> <div class="container"> <div class="col-md-3 col-sm-3 col-xs-3 hidden-xs hidden-sm"> <h2>Form Design <small>different form elements</small></h2> </div> <div class="col-md-9 col-sm-9 col-xs-9"> <div class="site_panel"> <div class="site_title"> <h2>Form Design <small>different form elements</small></h2> <div class="clearfix"></div> </div> <div class="site_content"> <br> <form id="registration-form" data-parsley-validate="" class="form-horizontal form-label-left" > <div class="form-group"> <label class="control-label col-md-3 col-sm-3 col-xs-12" for="first-name">First Name <span class="required">*</span> </label> <div class="col-md-6 col-sm-6 col-xs-12"> <input id="first-name" required="required" class="form-control col-md-7 col-xs-12" type="text"> </div> </div> <div class="form-group"> <label class="control-label col-md-3 col-sm-3 col-xs-12" for="last-name">Last Name <span class="required">*</span> </label> <div class="col-md-6 col-sm-6 col-xs-12"> <input id="last-name" name="last-name" required="required" class="form-control col-md-7 col-xs-12" type="text"> </div> </div> <div class="form-group"> <label for="middle-name" class="control-label col-md-3 col-sm-3 col-xs-12">Middle Name / Initial</label> <div class="col-md-6 col-sm-6 col-xs-12"> <input id="middle-name" class="form-control col-md-7 col-xs-12" name="middle-name" type="text"> </div> </div> <div class="form-group"> <label class="control-label col-md-3 col-sm-3 col-xs-12">Gender</label> <div class="col-md-6 col-sm-6 col-xs-12"> <div id="gender" class="btn-group" data-toggle="buttons"> <label class="btn btn-default" data-toggle-class="btn-primary" data-toggle-passive-class="btn-default"> <input name="gender" value="male" data-parsley-multiple="gender" type="radio">   Male   </label> <label class="btn btn-primary" data-toggle-class="btn-primary" data-toggle-passive-class="btn-default"> <input name="gender" value="female" data-parsley-multiple="gender" type="radio"> Female </label> </div> </div> </div> <div class="form-group"> <label class="control-label col-md-3 col-sm-3 col-xs-12">Date Of Birth <span class="required">*</span> </label> <div class="col-md-6 col-sm-6 col-xs-12"> <input id="birthday" class="date-picker form-control col-md-7 col-xs-12" required="required" type="text"> </div> </div> <div class="ln_solid"></div> <div class="form-group"> <div class="col-md-6 col-sm-6 col-xs-12 col-md-offset-3"> <button class="btn btn-primary" type="button">Cancel</button> <button class="btn btn-primary" type="reset">Reset</button> <button type="submit" class="btn btn-success">Submit</button> </div> </div> </form> </div> </div> </div> </div> </div>

/* Generic CSS */ body { background-color :#edecea; font-family: 'Roboto';font-size: 15px; } .site_panel { width: 100%; padding: 10px 17px; display: inline-block; background: #fff; border: 1px solid #E6E9ED; -webkit-column-break-inside: avoid; -moz-column-break-inside: avoid; column-break-inside: avoid; opacity: 1; transition: all .2s ease; margin-bottom: 10px; position: relative; box-sizing: border-box; } .site_title { border-bottom: 2px solid #E6E9ED; padding: 1px 5px 6px; box-sizing: border-box; margin-bottom: 10px; display: block; } .site_title h2 { margin: 5px 0 6px; float: left; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .site_title h2 small { margin-left: 10px; } .site_content { padding: 0 5px 6px; float: left; clear: both; margin-top: 5px; width: 100%; position: relative; box-sizing: border-box; } textarea.form-control { background-color: #fff; color:#b2b1b0; -webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px; border: 1px solid #e9e6e0; -webkit-box-shadow: inset 0 0px 0px rgba(0, 0, 0, .075); box-shadow: inset 0 0px 0px rgba(0, 0, 0, .075); } input.form-control { height: 38px; background-color: #fff; color:#000; -webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px; border: 1px solid #e9e6e0; -webkit-box-shadow: inset 0 0px 0px rgba(0, 0, 0, .075); box-shadow: inset 0 0px 0px rgba(0, 0, 0, .075); } form-control::-webkit-input-placeholder { color: black; } .form-control:-moz-placeholder { color: black; } .form-control::-moz-placeholder { color: black; } .form-control:-ms-input-placeholder { color: black; } .form-control:focus{border-color: #f2a446; box-shadow: none; -webkit-box-shadow: none;}

Color : #edecea , Font : font-family: 'Roboto';font-size: 22px; Heading : Sektions : Icons : Images : btns : column hidden : hidden-xs hidden-sm body font : <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>