<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <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> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> <div class="container"> <div class="row"> <div class="col-sm-12 bhoechie-tab-container"> <div class="col-sm-3 bhoechie-tab-menu"> <div class="list-group"> <a class="list-group-item active text-center certification windows"> <!--style="background-color:#008cce;--> Componente </a> </div> </div> <div class="col-sm-5 bhoechie-tab"> <div class="bhoechie-tab-content active"> Líneas de acción </div> </div> <div class="col-sm-4 bhoechie-tab"> <div class="bhoechie-tab-content active" style="text-align:center; background-color:#dedede"> Contacto </div> </div> </div> </div> <div class="row"> <div class="col-sm-12 bhoechie-tab-container"> <div class="col-sm-3 bhoechie-tab-menu"> <div class="list-group"> <a class="list-group-item active text-center certification windows"> <!--style="background-color:#008cce;--> <br> Desarrollo Sostenible <br> <br> </a> </div> </div> <div class="col-sm-5 bhoechie-tab"> <div class="bhoechie-tab-content active"> <ul> <li>Gestión de Riesgo</li> <li>Gestión de Residuos Sólidos</li> <li>Gestión de Recursos Naturales y Calidad Ambiental</li> </ul> </div> </div> <div class="col-sm-4 bhoechie-tab"> <div class="bhoechie-tab-content active"> <ul> <li>Gestión de Riesgo</li> <li>Gestión de Residuos Sólidos</li> <li>Gestión de Recursos Naturales y Calidad Ambiental</li> </ul> </div> </div> </div> </div> </div>

div.bhoechie-tab-container{ z-index: 10; background-color: #ffffff; padding: 0 !important; border-radius: 4px; -moz-border-radius: 4px; border:1px solid #ddd; margin-top: 20px; margin-left: 50px; -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175); box-shadow: 0 6px 12px rgba(0,0,0,.175); -moz-box-shadow: 0 6px 12px rgba(0,0,0,.175); background-clip: padding-box; opacity: 0.97; filter: alpha(opacity=97); } div.bhoechie-tab-menu{ padding-right: 0; padding-left: 0; padding-bottom: 0; } a.list-group-item { color: #939393; } div.bhoechie-tab-menu div.list-group{ margin-bottom: 0; } div.bhoechie-tab-menu div.list-group>a{ margin-bottom: 0; } div.bhoechie-tab-menu div.list-group>a:first-child{ border-top-right-radius: 0; -moz-border-top-right-radius: 0; } div.bhoechie-tab-menu div.list-group>a:last-child{ border-bottom-right-radius: 0; -moz-border-bottom-right-radius: 0; } div.bhoechie-tab-menu div.list-group>a.windows.active, div.bhoechie-tab-menu div.list-group>a.windows.active.glyphicon, div.bhoechie-tab-menu div.list-group>a.windows.active .fa{ background-color: rgb(0,126,185); background-image: rgb(0,126,185); color: #ffffff; } div.bhoechie-tab-menu div.list-group>a.active:after{ content: ''; position: absolute; left: 100%; top: 50%; margin-top: -13px; border-left: 0; border-bottom: 13px solid transparent; border-top: 13px solid transparent; border-left: 10px solid #1980CF; /*Right arrow*/ } div.bhoechie-tab-menu div.list-group>a.windows.active:after{ border-left: 10px solid rgb(0,126,185); /*Right arrow*/ } div.bhoechie-tab-menu div.list-group>a.dev.active:after{ border-left: 10px solid rgb(96,47,149); /*Right arrow*/ } div.bhoechie-tab-content{ background-color: #ffffff; padding-left: 20px; padding-top: 10px; } div.bhoechie-tab div.bhoechie-tab-content:not(.active){ display: none; }