<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 ----------> <div class="container"> <div class="row"> <h2>Acuerdos</h2> <select id="acuerdos"> <option value="1">Acuerdo 001</option> <option value="2">Acuerdo 002</option> <option value="3">Acuerdo 003</option> <option value="4">Acuerdo 004</option> </select> </div> <div class="span12"> <div id="tab" class="btn-group" data-toggle="buttons-radio"> <a href="#clientes" class="btn btn-large btn-info active" data-toggle="tab">Clientes</a> <a href="#servicios" class="btn btn-large btn-info" data-toggle="tab">Servicios</a> <a href="#condCuotas" class="btn btn-large btn-info" data-toggle="tab">Cuotas</a> <a href="#condTrafic" class="btn btn-large btn-info" data-toggle="tab">Tráfico</a> </div> <div class="tab-content"> <div class="tab-pane active" id="clientes"> <br> <p class="lead">Lista de Clientes</p> <div class="row"> <div class="span3"> <p>Clientes</p> </div> <div class="span9"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ac est ac orci consectetur pharetra eget at velit. Sed quis tellus a quam tincidunt aliquet ac sit amet ligula. Duis tincidunt ut nibh nec scelerisque. Morbi ut vulputate augue. Vestibulum lacinia odio ipsum, id luctus augue eleifend nec. Duis varius mauris eget lobortis luctus. Integer fringilla et tellus sed convallis.</p> </div> </div> </div> <div class="tab-pane" id="servicios"> <br> <p class="lead">Lista de Servicios</p> <div class="row"> <div class="span3"> <p>Servicios</p> </div> <div class="span9"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ac est ac orci consectetur pharetra eget at velit. Sed quis tellus a quam tincidunt aliquet ac sit amet ligula. Duis tincidunt ut nibh nec scelerisque. Morbi ut vulputate augue. Vestibulum lacinia odio ipsum, id luctus augue eleifend nec. Duis varius mauris eget lobortis luctus. Integer fringilla et tellus sed convallis.</p> </div> </div> </div> <div class="tab-pane" id="condCuotas"> <br> <p class="lead">Lista de Cuotas</p> <div class="row"> <div class="span3"> <p>Cuotas</p> </div> <div class="span9"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ac est ac orci consectetur pharetra eget at velit. Sed quis tellus a quam tincidunt aliquet ac sit amet ligula. Duis tincidunt ut nibh nec scelerisque. Morbi ut vulputate augue. Vestibulum lacinia odio ipsum, id luctus augue eleifend nec. Duis varius mauris eget lobortis luctus. Integer fringilla et tellus sed convallis.</p> </div> </div> </div> <div class="tab-pane" id="condTrafic"> <br> <p class="lead">Lista de Tráficos</p> <div class="row"> <div class="span3"> <p>Tráficos</p> </div> <div class="span9"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ac est ac orci consectetur pharetra eget at velit. Sed quis tellus a quam tincidunt aliquet ac sit amet ligula. Duis tincidunt ut nibh nec scelerisque. Morbi ut vulputate augue. Vestibulum lacinia odio ipsum, id luctus augue eleifend nec. Duis varius mauris eget lobortis luctus. Integer fringilla et tellus sed convallis.</p> </div> </div> </div> </div> </div> </div>