<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 ----------> <div class="container sinpadding"> <h2>Formulario de Inscripción</h2> </br> <div class="row"> <div class="col-xs-12 col-md-4"> <!-- Primer bloque --> <div class="row"> <div class="panel panel-default"> <div class="panel-heading">Datos Personales</div> <div class="panel-body"> <div class="form-group"> <label class="control-label">Cedula</label> <input maxlength="100" type="text" required="required" class="form-control" placeholder="Ingrese una cedula" /> </div> <div class="form-group"> <label class="control-label">Nombre</label> <input maxlength="100" type="text" required="required" class="form-control" placeholder="Ingrese su nombre" /> </div> <div class="form-group"> <label class="control-label">1° Apellido</label> <input maxlength="100" type="text" required="required" class="form-control" placeholder="Ingrese una 1° Apellido" /> </div> <div class="form-group"> <label class="control-label">2° Apellido</label> <input maxlength="100" type="text" required="required" class="form-control" placeholder="Ingrese su 2° Apellido" /> </div> </div> </div> </div> </div> <div class="col-xs-12 col-md-4"> <!-- Segundo Bloque bloque --> <div class="row"> <div class="panel panel-default"> <div class="panel-heading">Contacto</div> <div class="panel-body"> <div class="form-group"> <label class="control-label">Teléfono</label> <input maxlength="100" type="text" required="required" class="form-control" placeholder="Ingrese su nombre" /> </div> <div class="form-group"> <label class="control-label">Correo</label> <input maxlength="100" type="text" required="required" class="form-control" placeholder="Ingrese su nombre" /> </div> <div class="form-group"> <label class="control-label">Direccción Exacta</label> <textarea maxlength="100" type="text" required="required" class="form-control" placeholder="Ingrese su dirección"></textarea> </div> </div> </div> </div> <div class="row"> <div class="panel panel-default"> <div class="panel-heading">Físicos</div> <div class="panel-body"> <div class="form-group"> <label class="control-label">Estatura</label> <input maxlength="100" type="text" required="required" class="form-control" placeholder="Ingrese su nombre" /> </div> <div class="form-group"> <label class="control-label">Peso</label> <input maxlength="100" type="text" required="required" class="form-control" placeholder="Ingrese su nombre" /> </div> <div class="form-group"> <label class="control-label">Tipo de sangre</label> <input maxlength="100" type="text" required="required" class="form-control" placeholder="Ingrese su nombre" /> </div> </div> </div> </div> </div> <div class="col-xs-12 col-md-4"> <!-- Tercer Bloque bloque --> <div class="row"> <div class="panel panel-default"> <div class="panel-heading">Deporte</div> <div class="panel-body"> <div class="form-group"> <label class="control-label">Categoría</label> <input maxlength="100" type="text" required="required" class="form-control" placeholder="Ingrese su nombre" /> </div> <div class="form-group"> <label class="control-label">SubCategoría</label> <input maxlength="100" type="text" required="required" class="form-control" placeholder="Ingrese su nombre" /> </div> <div class="form-group"> <label class="control-label">Tipo de usuario</label> <input maxlength="100" type="text" required="required" class="form-control" placeholder="Ingrese su nombre" /> </div> </div> </div> </div> <div class="row"> <div class="panel panel-default"> <div class="panel-heading">Imágenes</div> <div class="panel-body"> <div class="form-group"> <label class="control-label">Foto frontal</label> <input maxlength="100" type="text" required="required" class="form-control" placeholder="Ingrese su nombre" /> </div> <div class="form-group"> <label class="control-label">Foto trasera</label> <input maxlength="100" type="text" required="required" class="form-control" placeholder="Ingrese su nombre" /> </div> </div> </div> </div> <div class="row"> <div class="panel panel-default"> <div class="panel-heading">Documentos</div> <div class="panel-body"> <div class="form-group"> <input id="uploadFile" placeholder="Choose File" disabled="disabled" /> <div class="fileUpload btn btn-primary"> <span>Upload</span> <input id="uploadBtn" type="file" class="upload" /> </div> </div> <div class="form-group"> <label class="control-label">Pase Cantonal</label> <input maxlength="100" type="text" required="required" class="form-control" placeholder="Ingrese su nombre" /> </div> </div> </div> </div> </div> </div> </div>

.sinpadding [class*="col-"] { padding-left: 30px; padding-right: 30px; } .fileUpload { position: relative; overflow: hidden; margin: 10px; } .fileUpload input.upload { position: absolute; top: 0; right: 0; margin: 0; padding: 0; font-size: 20px; cursor: pointer; opacity: 0; filter: alpha(opacity=0); }

document.getElementById("uploadBtn").onchange = function () { document.getElementById("uploadFile").value = this.value; };