<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> <div class="container" > <div class="row" style="background-color: #ededed; "> <div class="col-md-12"> <img src='https://s3.amazonaws.com/portfolio-eduluz1976/logo_blake.png'> <div class="pull-right"> <a class="btn btn-default btn-success fa-2x">Next step <i class="fa fa-arrow-circle-right"></i></a> </div> </div> </div> <div class="row"> <div class="col-md-3 col-applicant" > <legend>Primary applicant</legend> <div> <img src="https://s3-sa-east-1.amazonaws.com/resources-projetos/icons/avatar/businessman.png" class="img-circle" style="width:128px; height:128px; "> </div> <legend>File upload</legend> <div class="btn-upload-group"> <a class="btn btn-success "><i class="fa fa-id-card"></i> Passport <i class="fa fa-check-circle text-success"></i></a> <i class="fa fa-question-circle text-primary"></i> </div> <div class="btn-upload-group"> <a class="btn btn-default btn-primary "><i class="fa fa-weixin"></i> English test <i class="fa fa-times-circle text-danger"></i></a> <i class="fa fa-question-circle text-primary" onclick="MainApp.openChat()"></i> </div> <div class="btn-upload-group"> <a class="btn btn-default btn-primary "><i class="fa fa-weixin"></i> ECA <i class="fa fa-times-circle text-danger"></i></a> <i class="fa fa-question-circle text-primary"></i> </div> <div class="btn-upload-group"> <a class="btn btn-success btn-primary "><i class="fa fa-weixin"></i> Marriage L. <i class="fa fa-check-circle text-success"></i></a> <i class="fa fa-question-circle text-primary"></i> </div> <div> </div> </div> <div class="col-md-3 col-applicant" > <legend>Spouse</legend> <img src="https://s3-sa-east-1.amazonaws.com/resources-projetos/icons/avatar/woman-10.png" class="img-circle" style="width:128px; height:128px"> <legend>File upload</legend> <div class="btn-upload-group"> <a class="btn btn-success "><i class="fa fa-id-card"></i> Passport <i class="fa fa-check-circle text-success"></i></a> <i class="fa fa-question-circle text-primary"></i> </div> <div class="btn-upload-group"> <a class="btn btn-default btn-primary "><i class="fa fa-weixin"></i> English test <i class="fa fa-times-circle text-danger"></i></a> <i class="fa fa-question-circle text-primary" onclick="MainApp.openChat()"></i> </div> <div class="btn-upload-group"> <a class="btn btn-default btn-success "><i class="fa fa-weixin"></i> ECA <i class="fa fa-check-circle text-success"></i></a> <i class="fa fa-question-circle text-primary"></i> </div> <div class="btn-upload-group"> <a class="btn btn-default btn-success "><i class="fa fa-weixin"></i> Marriage L. <i class="fa fa-check-circle text-success"></i></a> <i class="fa fa-question-circle text-primary"></i> </div> <div> </div> </div> <div class="col-md-3 col-applicant" > <legend>Children 1</legend> <img src="https://s3-sa-east-1.amazonaws.com/resources-projetos/icons/i_nophoto128.gif" class="img-circle" style="width:128px; height:128px"> <legend>File upload</legend> <div class="btn-upload-group"> <a class="btn btn-primary "><i class="fa fa-id-card"></i> Passport <i class="fa fa-times-circle text-danger"></i></a> <i class="fa fa-question-circle text-primary"></i> </div> </div> </div> <!-- Modal --> <div id="chat_panel" class="modal fade" role="dialog"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header login-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title"> <img src="https://s3-sa-east-1.amazonaws.com/resources-projetos/icons/avatar/man-1.png" class="img-circle" style="width:64px; height:64px; "> Talk to Blake</h4> </div> <div class="modal-body"> What do you need to know about <mark>English test</mark>? <textarea class="control-form col-md-12" rows=4></textarea> </div> <div class="modal-footer"> <a class="btn btn-link">Cancel</a> <a class="btn btn-primary" data-dismiss="modal"><i class="fa fa-paper-plane"></i> Send</a> </div> </div> </div> </div> </div>

fieldset { margin-top: 10px; } .form-group { text-align: left; } .col-applicant { border-right: solid 1px #888; text-align:center; font-size: small; } .control-label { font-size: smaller; } .control-label INPUT { font-size: smaller; } label { margin-top: 20px; } .btn-upload-group { margin-top: 10px; } .btn-upload-group A { width: 200px; }

MainApp = { openChat : function() { $('#chat_panel').modal(); } }