<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 "> <div class="row"> <div class="body"> <!-- BODY --> <div class="panel panel-default hrsl-toolbox"> <!-- hrsl-toolbox --> <div class="panel-heading hrsl-toolbox__heading"> <!-- hrsl-toolbox__heading --> <div class="hrsl-toolbox__heading-title">Selector de palabras</div> <!-- hrsl-toolbox__heading-title --> </div> <div class="hrsl-toolbox__total"> <span class="hrsl-toolbox__total-title">Opciones en total</span> <span class="badge hrsl-toolbox__total-badge">11</span> </div> <div class="panel-group hrsl-toolbox__options" id="accordion"> <div class="panel panel-default hrsl-toolbox__option-1"> <div class="panel-heading hrsl-toolbox__option-1-heading"> <div class="panel-title hrsl-toolbox__option-1-heading-title"> <a data-toggle="collapse" data-parent="#accordion" href="#option-1">1. Opción</a> </div> <div class="hrsl-toolbox__option-1-heading-btns"> <div class="hrsl-toolbox__option-1-heading-select"> <button class="btn btn-default hrsl-toolbox__option-1-heading-select-btn"> <span class="glyphicon glyphicon-hand-up"></span> </button> </div> <div class="hrsl-toolbox__option-1-heading-checkbox"> <button class="btn btn-default hrsl-toolbox__option-1-heading-checkbox-btn"> <span class="glyphicon glyphicon-ok"></span> </button> </div> </div> </div> <!-- End of Panel Heading --> <div id="option-1" class="panel-collapse collapse in"> <div class="panel-body"> <div class="input-group"> <span class="input-group-btn hrsl-toolbox__option-1-previous"> <button class="btn btn-default hrsl-toolbox__option-1-previous-wrap-btn" type="button">+</button> <button class="btn btn-default hrsl-toolbox__option-1-previous-unwrap-btn" type="button">-</button> </span> <input type="text" class="form-control hrsl-toolbox__option-1-selection" placeholder="Selection-1" disabled> <span class="input-group-btn hrsl-toolbox__option-1-next"> <button class="btn btn-default hrsl-toolbox__option-1-next-unwrap-btn" type="button">-</button> <button class="btn btn-default hrsl-toolbox__option-1-next-wrap-btn" type="button">+</button> </span> </div> <div class="input-group"> <span class="input-group-addon" id="basic-addon1">Extra #1</span> <input type="text" class="form-control" placeholder="Insert extra option" aria-describedby="basic-addon1"> </div> <div class="input-group"> <span class="input-group-addon" id="basic-addon1">Extra #2</span> <input type="text" class="form-control" placeholder="Insert extra option" aria-describedby="basic-addon1"> </div> </div> </div> </div> </div> </div> <!-- hrsl-toolbox --> </div> </div> </div>

.body { padding-left: 450px; padding-right: 450px; padding-top: 10px; } .panel-default > .hrsl-toolbox__heading { background-image: none; background-color: #4D4B4B; color: #ffffff; border-bottom: 2px solid orange; } .hrsl-toolbox { border: 1px solid #DDDDDD; background-color: #f5f5f5; //margin-bottom: 0px; } .hrsl-toolbox__heading { font-size: 24px; font-weight: bold; text-align: center; } .hrsl-toolbox__total { padding: 10px; font-size: 16px; font-weight: bold; background-color: #f5f5f5; border-bottom: 2px solid orange; } .hrsl-toolbox__total-badge { margin-right: 10px; } .hrsl-toolbox__options { margin-bottom: 0px; } .panel.hrsl-toolbox__option-1 { border: none; box-shadow: none; } .panel-group .panel { border: none; border-radius: 0px; } .panel.hrsl-toolbox__option-1 > .panel-heading { border: none; border-radius: 0px; } .panel-default > .hrsl-toolbox__option-1-heading { background-image: none; background-color: #ffffff; color: #333333; } /*-------------- OPTION 1 ------------------------*/ .hrsl-toolbox__option-1-heading { padding: 15px; } .hrsl-toolbox__option-1-heading-title { display: inline-block; font-size: 16px; font-weight: bold; } .hrsl-toolbox__option-1-heading-btns { display: inline-block; float: right; margin-top: -6px; font-size: 18px; } .hrsl-toolbox__option-1-heading-select, .hrsl-toolbox__option-1-heading-checkbox { display: inline-block; } .hrsl-toolbox__option-1-heading-select-btn, .hrsl-toolbox__option-1-heading-checkbox-btn { font-size: 16px; padding-top: 4px; padding-bottom: 4px; padding-right: 8px; padding-left: 8px; } /*-------------- END OF OPTION 1 ------------------------*/ .hrsl-toolbox__option-1-selection, .hrsl-toolbox__option-2-selection { text-align: center; } .hrsl-toolbox__option-1-previous-wrap-btn, .hrsl-toolbox__option-1-previous-unwrap-btn, .hrsl-toolbox__option-1-next-wrap-btn, .hrsl-toolbox__option-1-next-unwrap-btn, .hrsl-toolbox__option-2-previous-wrap-btn, .hrsl-toolbox__option-2-previous-unwrap-btn, .hrsl-toolbox__option-2-next-wrap-btn, .hrsl-toolbox__option-2-next-unwrap-btn { font-weight: bold; } .input-group { margin-bottom: 20px; }