<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 ----------> <!-- FontAwesome - To be removed--> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> <div class="container-fluid"> <div class="row"> <div class="col-lg-6"> <h1>Product characteristics</h1> <form> <div class="control-group"> <label for="product_type">Product type</label> <div class="entry input-group"> <input type="text" class="form-control" id="product_type" placeholder="Search for a value or add one" value="resealed"> <span class="input-group-btn"> <button class="btn btn-link" type="button"><i class="fa fa-times text-danger fa-lg"></i></button> <button class="btn btn-link" type="button"><i class="fa fa-plus text-success fa-lg"></i></button> </span> </div> </div> <br/> <div class="control-group"> <div class="input-group"> <input type="text" class="form-control" id="product_type" placeholder="Search for a value or add one"> <span class="input-group-btn"> <button class="btn btn-link" type="button"><i class="fa fa-times text-danger fa-lg"></i></button> </span> </div> </div> <hr> <div class="control-group"> <label for="color">Color</label> <div class="pull-right inline"> <button type="button" class="btn btn-link" data-toggle="modal" data-target="#modal_for_values"><i class="fa fa-plus"></i> Propose values</button> </div> <div class="clearfix"></div> <div class="input-group"> <select class="form-control" placeholder="Select one value" id="color"> <option>Select one option</option> <option>Green</option> <option>Blue</option> </select> <span class="input-group-btn"> <button class="btn btn-link" type="button"><i class="fa fa-plus text-success fa-lg"></i></button> </span> </div> </div> <hr> <div class="control-group"> <label for="value">Color</label> <div class="input-group"> <input type="text" class="form-control" id="product_type" placeholder="Search for a value"> <span class="input-group-btn"> <button class="btn btn-default" type="button"><i class="fa fa-plus text-success fa-lg"></i> Add</button> </span> </div> </div> <br/> <div class="well well-lg"> <span class="label label-primary"><a href=""><i class="fa fa-times text-danger"></i></a> verde</span> <span class="label label-primary"><a href=""><i class="fa fa-times text-danger"></i></a> albastru </span> </div> </form> </div> </div> </div> <!-- Modal --> <div class="modal fade" id="modal_for_values" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <!-- Modal Header --> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"> <span aria-hidden="true">×</span> <span class="sr-only">Close</span> </button> <h4 class="modal-title" id="myModalLabel"> Propose new values for the characteristic: "color" </h4> </div> <!-- Modal Body --> <div class="modal-body"> <form role="form"> <div class="control-group"> <label for="value">Propose new value</label> <div class="input-group"> <input type="text" class="form-control" id="product_type" placeholder="Enter a new value"> <span class="input-group-btn"> <button class="btn btn-default" type="button"><i class="fa fa-plus text-success fa-lg"></i> Add</button> </span> </div> </div> <br/> <div> <span class="label label-default"><a href=""><i class="fa fa-times text-danger"></i></a> verde</span> <span class="label label-default"><a href=""><i class="fa fa-times text-danger"></i></a> albastru </span> </div> <br/> <div class="well well-sm">No value added. Please enter at least one.</div> <div class="alert alert-info" role="alert"><i class="fa fa-info"></i> Your request will be validated by an operator. You will be notified by email.</div> </form> </div> <!-- Modal Footer --> <div class="modal-footer"> <button type="button" class="btn btn-primary">Save</button> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div>