"Company form"
Bootstrap 3.2.0 Snippet by faisalkhan123

<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/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 class="company-form"> <div class="container"> <div class="row"> <div class="col-sm-12"> <h2 class="form-title">Company Information</h2> </div> </div> <div class="row com_info"> <div class="col-sm-6"> <!-- left side company information --> <div class="well form-horizontal"> <div class="form-group"> <label class="col-md-4 control-label">Company Type</label> <div class="col-md-8 inputGroupContainer"> <div class="input-group"> <span class="input-group-addon"><i class="fa fa-th-large"></i></span> <input class="form-control" type="text"> </div> </div> </div> <div class="form-group"> <label class="col-md-4 control-label">Company Name</label> <div class="col-md-8 inputGroupContainer"> <div class="input-group"> <span class="input-group-addon"><i class="fa fa-font"></i></span> <input class="form-control" required="true" value="" type="text"> </div> </div> </div> <div class="form-group"> <label class="col-md-4 control-label">Company Email</label> <div class="col-md-8 inputGroupContainer"> <div class="input-group"> <span class="input-group-addon"><i class="fa fa-envelope"></i></span> <input class="form-control" required="true" value="" type="email"> </div> </div> </div> <div class="form-group"> <label class="col-md-4 control-label">Website</label> <div class="col-md-8 inputGroupContainer"> <div class="input-group"> <span class="input-group-addon"><i class="fa fa-link"></i></span> <input class="form-control" required="true" value="" type="text"> </div> </div> </div> <div class="form-group"> <label class="col-md-4 control-label">Phone Number</label> <div class="col-md-8 inputGroupContainer"> <div class="input-group"> <span class="input-group-addon"><i class="fa fa-phone"></i></span> <input class="form-control" required="true" value="" type="text"> </div> </div> </div> <div class="form-group"> <label class="col-md-4 control-label">Certification Number</label> <div class="col-md-8 inputGroupContainer"> <div class="input-group"> <span class="input-group-addon"><i class="fa fa-copy"></i></span> <input class="form-control" required="true" value="" type="text"> </div> </div> </div> <div class="form-group"> <label class="col-md-4 control-label">No. of Employee</label> <div class="col-md-8 inputGroupContainer"> <div class="input-group"> <span class="input-group-addon"><i class="fa fa-users"></i></span> <input class="form-control" required="true" value="" type="text"> </div> </div> </div> <div class="form-group"> <label class="col-md-4 control-label">Year of Establishment</label> <div class="col-md-8 inputGroupContainer"> <div class="input-group"> <span class="input-group-addon"><i class="fa fa-flag"></i></span> <input class="form-control" required="true" value="" type="text"> </div> </div> </div> <div class="form-group"> <label class="col-md-4 control-label">Office Timings</label> <div class="col-md-8 inputGroupContainer"> <div class="input-group" style="margin-bottom:10px;"> <span class="input-group-addon" title="From" ><i class="fa fa-clock-o"></i></span> <input class="timepicker form-control" placeholder="From" required="true" value="" type="text"> </div> <div class="input-group"> <span class="input-group-addon" title="To" ><i class="fa fa-clock-o"></i></span> <input class="timepicker form-control" placeholder="To" required="true" value="" type="text"> </div> </div> </div> </div> <!-- /left side company information ends --> </div> <div class="col-sm-6"> <!-- right side company information --> <div class="well form-horizontal"> <div class="form-group"> <label class="col-md-4 control-label">Product Categories</label> <div class="col-md-8 inputGroupContainer"> <div class="input-group"> <span class="input-group-addon"><i class="fa fa-list"></i></span> <input class="form-control" type="text"> </div> </div> </div> <div class="form-group"> <label class="col-md-4 control-label">Country</label> <div class="col-md-8 inputGroupContainer"> <div class="input-group"> <span class="input-group-addon"><i class="fa fa-home"></i></span> <input class="form-control" required="true" value="" type="text"> </div> </div> </div> <div class="form-group"> <label class="col-md-4 control-label">Emirates</label> <div class="col-md-8 inputGroupContainer"> <div class="input-group"> <span class="input-group-addon"><i class="fa fa-home"></i></span> <input class="form-control" required="true" value="" type="text"> </div> </div> </div> <div class="form-group"> <label class="col-md-4 control-label">Address</label> <div class="col-md-8 inputGroupContainer"> <div class="input-group"> <span class="input-group-addon"><i class="fa fa-home"></i></span> <textarea class="form-control"></textarea> </div> </div> </div> <div class="form-group"> <label class="col-md-4 control-label">Fax</label> <div class="col-md-8 inputGroupContainer"> <div class="input-group"> <span class="input-group-addon"><i class="fa fa-home"></i></span> <input class="form-control" required="true" value="" type="text"> </div> </div> </div> <div class="form-group"> <label class="col-md-4 control-label">Facebook URL</label> <div class="col-md-8 inputGroupContainer"> <div class="input-group"> <span class="input-group-addon"><i class="fa fa-facebook"></i></span> <input class="form-control" required="true" value="" type="text"> </div> </div> </div> <div class="form-group"> <label class="col-md-4 control-label">Instagram URL</label> <div class="col-md-8 inputGroupContainer"> <div class="input-group"> <span class="input-group-addon"><i class="fa fa-instagram"></i></span> <input class="form-control" required="true" value="" type="text"> </div> </div> </div> <div class="form-group"> <label class="col-md-4 control-label">Linkedin</label> <div class="col-md-8 inputGroupContainer"> <div class="input-group"> <span class="input-group-addon"><i class="fa fa-linkedin"></i></span> <input class="form-control" required="true" value="" type="text"> </div> </div> </div> </div> <!-- /right side company information ends --> </div> </div> <div class="row"> <div class="col-sm-12"> <h2 class="form-title">Company Images</h2> </div> <div class="col-sm-12"> <!-- left side company information --> <div class="well form-horizontal"> <div class="row"> <div class="col-sm-6"> <div class="form-group"> <label class="col-md-4 control-label">Company Logo</label> <div class="col-md-8 inputGroupContainer"> <!-- image-preview-filename input [CUT FROM HERE]--> <div class="input-group image-preview"> <input type="text" class="form-control image-preview-filename" readonly> <div class="popover fade bottom" style="top: 34.4px; left: 43.4px; display: block;"> <div class="arrow" style="left: 50%;"></div> <h3 class="popover-title"><strong>Preview</strong><button type="button" class="close-preview" style="font-size: initial;" class="close pull-right">x</button></h3> <div class="popover-content"> <img src=""></div> </div> <span class="input-group-btn"> <!-- image-preview-clear button --> <button type="button" class="btn btn-default image-preview-clear" style="display:none;"> <span class="fa fa-remove"></span> </button> <!-- image-preview-input --> <div class="btn btn-default image-preview-input"> <span class="fa fa-folder-open"></span> <span class="image-preview-input-title">   Browse</span> <input type="file" accept="image/png, image/jpeg, image/gif" name="input-file-preview" /> <!-- rename it --> </div> </span> </div><!-- /input-group image-preview [TO HERE]--> </div> </div> </div> <div class="col-sm-6"> <div class="form-group"> <label class="col-md-4 control-label">Trade License</label> <div class="col-md-8 inputGroupContainer"> <!-- image-preview-filename input [CUT FROM HERE]--> <div class="input-group image-preview"> <input type="text" class="form-control image-preview-filename" readonly> <div class="popover fade bottom" style="top: 34.4px; left: 43.4px; display: block;"> <div class="arrow" style="left: 50%;"></div> <h3 class="popover-title"><strong>Preview</strong><button type="button" class="close-preview" style="font-size: initial;" class="close pull-right">x</button></h3> <div class="popover-content"> <img src=""></div> </div> <span class="input-group-btn"> <!-- image-preview-clear button --> <button type="button" class="btn btn-default image-preview-clear" style="display:none;"> <span class="fa fa-remove"></span> </button> <!-- image-preview-input --> <div class="btn btn-default image-preview-input"> <span class="fa fa-folder-open"></span> <span class="image-preview-input-title">   Browse</span> <input type="file" accept="image/png, image/jpeg, image/gif" name="input-file-preview" /> <!-- rename it --> </div> </span> </div><!-- /input-group image-preview [TO HERE]--> </div> </div> </div> <div class="col-sm-6"> <div class="form-group"> <label class="col-md-4 control-label">Company Image 1</label> <div class="col-md-8 inputGroupContainer"> <!-- image-preview-filename input [CUT FROM HERE]--> <div class="input-group image-preview"> <input type="text" class="form-control image-preview-filename" readonly> <div class="popover fade bottom" style="top: 34.4px; left: 43.4px; display: block;"> <div class="arrow" style="left: 50%;"></div> <h3 class="popover-title"><strong>Preview</strong><button type="button" class="close-preview" style="font-size: initial;" class="close pull-right">x</button></h3> <div class="popover-content"> <img src=""></div> </div> <span class="input-group-btn"> <!-- image-preview-clear button --> <button type="button" class="btn btn-default image-preview-clear" style="display:none;"> <span class="fa fa-remove"></span> </button> <!-- image-preview-input --> <div class="btn btn-default image-preview-input"> <span class="fa fa-folder-open"></span> <span class="image-preview-input-title">   Browse</span> <input type="file" accept="image/png, image/jpeg, image/gif" name="input-file-preview" /> <!-- rename it --> </div> </span> </div><!-- /input-group image-preview [TO HERE]--> </div> </div> </div> <div class="col-sm-6"> <div class="form-group"> <label class="col-md-4 control-label">Company Image 2</label> <div class="col-md-8 inputGroupContainer"> <!-- image-preview-filename input [CUT FROM HERE]--> <div class="input-group image-preview"> <input type="text" class="form-control image-preview-filename" readonly> <div class="popover fade bottom" style="top: 34.4px; left: 43.4px; display: block;"> <div class="arrow" style="left: 50%;"></div> <h3 class="popover-title"><strong>Preview</strong><button type="button" class="close-preview" style="font-size: initial;" class="close pull-right">x</button></h3> <div class="popover-content"> <img src=""></div> </div> <span class="input-group-btn"> <!-- image-preview-clear button --> <button type="button" class="btn btn-default image-preview-clear" style="display:none;"> <span class="fa fa-remove"></span> </button> <!-- image-preview-input --> <div class="btn btn-default image-preview-input"> <span class="fa fa-folder-open"></span> <span class="image-preview-input-title">   Browse</span> <input type="file" accept="image/png, image/jpeg, image/gif" name="input-file-preview" /> <!-- rename it --> </div> </span> </div><!-- /input-group image-preview [TO HERE]--> </div> </div> </div> <div class="col-sm-6"> <div class="form-group"> <label class="col-md-4 control-label">Company Image 3</label> <div class="col-md-8 inputGroupContainer"> <!-- image-preview-filename input [CUT FROM HERE]--> <div class="input-group image-preview"> <input type="text" class="form-control image-preview-filename" readonly> <div class="popover fade bottom" style="top: 34.4px; left: 43.4px; display: block;"> <div class="arrow" style="left: 50%;"></div> <h3 class="popover-title"><strong>Preview</strong><button type="button" class="close-preview" style="font-size: initial;" class="close pull-right">x</button></h3> <div class="popover-content"> <img src=""></div> </div> <span class="input-group-btn"> <!-- image-preview-clear button --> <button type="button" class="btn btn-default image-preview-clear" style="display:none;"> <span class="fa fa-remove"></span> </button> <!-- image-preview-input --> <div class="btn btn-default image-preview-input"> <span class="fa fa-folder-open"></span> <span class="image-preview-input-title">   Browse</span> <input type="file" accept="image/png, image/jpeg, image/gif" name="input-file-preview" /> <!-- rename it --> </div> </span> </div><!-- /input-group image-preview [TO HERE]--> </div> </div> </div> <div class="col-sm-6"> <div class="form-group"> <label class="col-md-4 control-label">Company Image 4</label> <div class="col-md-8 inputGroupContainer"> <!-- image-preview-filename input [CUT FROM HERE]--> <div class="input-group image-preview"> <input type="text" class="form-control image-preview-filename" readonly> <div class="popover fade bottom" style="top: 34.4px; left: 43.4px; display: block;"> <div class="arrow" style="left: 50%;"></div> <h3 class="popover-title"><strong>Preview</strong><button type="button" class="close-preview" style="font-size: initial;" class="close pull-right">x</button></h3> <div class="popover-content"> <img src=""></div> </div> <span class="input-group-btn"> <!-- image-preview-clear button --> <button type="button" class="btn btn-default image-preview-clear" style="display:none;"> <span class="fa fa-remove"></span> </button> <!-- image-preview-input --> <div class="btn btn-default image-preview-input"> <span class="fa fa-folder-open"></span> <span class="image-preview-input-title">   Browse</span> <input type="file" accept="image/png, image/jpeg, image/gif" name="input-file-preview" /> <!-- rename it --> </div> </span> </div><!-- /input-group image-preview [TO HERE]--> </div> </div> </div> </div> </div> <!-- /left side company information ends --> </div> <div class="col-sm-12"> <h2 class="form-title">Contact Person Details</h2> </div> <div class="col-sm-12"> <!-- right side company information --> <div class="well form-horizontal"> <div class="row"> <div class="col-sm-6"> <div class="form-group "> <label class="col-md-4 control-label">Name</label> <div class="col-md-8 inputGroupContainer"> <div class="input-group"> <span class="input-group-addon"><i class="fa fa-user"></i></span> <input class="form-control" type="text"> </div> </div> </div> </div> <div class="col-sm-6"> <div class="form-group "> <label class="col-md-4 control-label">Email</label> <div class="col-md-8 inputGroupContainer"> <div class="input-group"> <span class="input-group-addon"><i class="fa fa-envelope"></i></span> <input class="form-control" required="true" value="" type="email"> </div> </div> </div> </div> <div class="col-sm-6"> <div class="form-group "> <label class="col-md-4 control-label">Phone Number</label> <div class="col-md-8 inputGroupContainer"> <div class="input-group"> <span class="input-group-addon"><i class="fa fa-phone"></i></span> <input class="form-control" required="true" value="" type="text"> </div> </div> </div> </div> <div class="col-sm-6"> <div class="form-group "> <label class="col-md-4 control-label">Designation</label> <div class="col-md-8 inputGroupContainer"> <div class="input-group"> <span class="input-group-addon"><i class="fa fa-user-secret"></i></span> <input type="text" class="form-control"> </div> </div> </div> </div> </div> </div> <!-- /right side company information ends --> </div> <div class="col-sm-12"> <h2 class="form-title">Other Information</h2> </div> <div class="col-sm-12"> <div class="well"> <div class="form-group"> <label for="" class="control-label">Company Profile</label> <textarea class="form-control" id="editor"></textarea> </div> <div class="form-group"> <label for="" class="control-label">About Us</label> <textarea class="form-control" id="editor2"></textarea> </div> </div> </div> <div class="col-sm-12"> <button class="btn btn-lg btn-warning btn-block">Update</button> </div> </div> </div> </div>
body { padding: 50px; } .image-preview-input { position: relative; overflow: hidden; margin: 0px; color: #333; background-color: #fff; border-color: #ccc; } .image-preview-input input[type=file] { position: absolute; top: 0; right: 0; margin: 0; padding: 0; font-size: 20px; cursor: pointer; opacity: 0; filter: alpha(opacity=0); } .image-preview-input-title { margin-left: 2px; } .popover-content img { min-width: 200px; min-height: 150px; max-width: 250px; max-height: 250px; } .popover-title .close-preview { float: right; width: 25px; border: 0px; border-radius: 50%; height: 24px; line-height: normal; top: -4px; position: relative; } .company-form .com_info { display: flex; flex-wrap: wrap; } .company-form .com_info .col-sm-6 { display: flex; } .company-form .com_info .col-sm-6 .well { width: 100%; } .company-form .form-title { position: relative; font-size: 24px; line-height: 32px; font-weight: 400; color: #000; text-transform: uppercase; padding-bottom: 5px; margin-bottom: 15px; border-bottom: 1px solid rgb(204, 204, 204); } .company-form .form-title:after { content: ""; position: absolute; bottom: -1px; left: 0px; width: 80px; height: 1px; background: rgb(105, 88, 88); } .company-form .well { background: #f9f9f9; box-shadow: none; border: 0; } .timepicker, .ui-timepicker-list{text-transform: uppercase;letter-spacing: 1px;}
$(document).on('click', '.close-preview', function () { var parent = $(this).parents('.image-preview'); parent.find('.popover ').removeClass('in'); }); $(document).on('click', '.image-preview-filename', function () { // alert('asfd'); var parent = $(this).parents('.image-preview'); parent.find('.popover ').addClass('in'); }); $(function () { // Clear event $('.image-preview-clear').click(function () { var parent = $(this).parents('.image-preview'); parent.find('.image-preview-filename').val(""); parent.find('.image-preview-clear').hide(); parent.find('.image-preview-input input:file').val(""); parent.find(".image-preview-input-title").text(" Browse"); }); // Create the preview image $(".image-preview-input input:file").change(function () { var parent = $(this).parents('.image-preview'); var img = parent.find('.popover-content img'); // parent.find var file = this.files[0]; var reader = new FileReader(); // Set preview image into the popover data-content reader.onload = function (e) { parent.find(".image-preview-input-title").text("Change"); parent.find(".image-preview-clear").show(); parent.find(".image-preview-filename").val(file.name); img.attr('src', e.target.result); // $(".image-preview").attr("data-content",$(img)[0].outerHTML).popover("show"); } reader.readAsDataURL(file); }); }); $('.timepicker').timepicker();

Related: See More


Questions / Comments: