"Panels nav tabs"
Bootstrap 3.2.0 Snippet by adamamb

<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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="col-md-8"> <div class="panel with-nav-tabs panel-primary"> <div class="panel-heading"> <ul class="nav nav-tabs"> <li class="active"><a href="#tab1primary" data-toggle="tab">Solutions</a></li> <li><a href="#tab2primary" data-toggle="tab">Equipe</a></li> <li><a href="#tab3primary" data-toggle="tab">Besoins</a></li> </ul> </div> <div class="panel-body"> <div class="tab-content"> <div class="tab-pane fade in active" id="tab1primary"> <span class="hero"> Paps, livre tout, partout. </span><br><br> <span class="descri"> Besoin d’envoyer un dossier à l’autre bout de la ville, de récupérer son vêtement chez le tailleur ou de se faire livrer ses courses du supermarché à domicile rapidement? Paps est la solution ! La jeune start-up du trentenaire Bamba Lô n’en est pas à sa première récompense. Avant celle de Hub Africa 2017, le Sénégalais reçoit en octobre 2016 le prix Orange Innovation challenge, un mois seulement après la création de la version bêta de l’appli. La récompense de 2 millions de francs CFA (3000 euros) lui permet de lancer « Paps », la première application mobile de livraison géolocalisée d’Afrique francophone. L’idée est simple “ faire gagner du temps” à ses usagers dans les pays où les services de poste fonctionnent souvent très mal. </span> </div> <div class="tab-pane fade" id="tab2primary">La team</div> <div class="tab-pane fade" id="tab3primary">Nous avons besoin de</div> </div> </div> </div> </div> <div class="col-md-4"> TEST </div> </div>
* { -webkit-transition: all 300ms cubic-bezier(0.250, 0.100, 0.250, 1.000); -moz-transition: all 300ms cubic-bezier(0.250, 0.100, 0.250, 1.000); -o-transition: all 300ms cubic-bezier(0.250, 0.100, 0.250, 1.000); transition: all 300ms cubic-bezier(0.250, 0.100, 0.250, 1.000); /* ease (default) */ -webkit-transition-timing-function: cubic-bezier(0.250, 0.100, 0.250, 1.000); -moz-transition-timing-function: cubic-bezier(0.250, 0.100, 0.250, 1.000); -o-transition-timing-function: cubic-bezier(0.250, 0.100, 0.250, 1.000); transition-timing-function: cubic-bezier(0.250, 0.100, 0.250, 1.000); /* ease (default) */ } .container { margin-top:30px; } .hero { font-size:1.5em; font-weight:900; font-family:'Montserrat'; text-transform:uppercase; color:#4d4d4d; } .panel { border-bottom-right-radius:0; border-bottom-left-radius:0; } .descri{ font-family:'Open Sans'; font-weight:400; color:#666666; } .panel-body { padding:20px 15px 40px 15px; } .panel.with-nav-tabs .panel-heading{ padding: 5px 5px 0 5px; } .panel.with-nav-tabs .nav-tabs{ border-bottom: none; } .nav-tabs li a { padding:12px 50px; } .panel-heading { background-color:#2a74ed !important; } /********************************************************************/ /*** PANEL PRIMARY ***/ .with-nav-tabs.panel-primary .nav-tabs > li > a, .with-nav-tabs.panel-primary .nav-tabs > li > a:hover, .with-nav-tabs.panel-primary .nav-tabs > li > a:focus { color: #fff; } .with-nav-tabs.panel-primary .nav-tabs > .open > a, .with-nav-tabs.panel-primary .nav-tabs > .open > a:hover, .with-nav-tabs.panel-primary .nav-tabs > .open > a:focus, .with-nav-tabs.panel-primary .nav-tabs > li > a:hover, .with-nav-tabs.panel-primary .nav-tabs > li > a:focus { color: #fff; /*** HOVER TABY ***/ background-color: #2260c2; border-color: transparent; } .with-nav-tabs.panel-primary .nav-tabs > li.active > a, .with-nav-tabs.panel-primary .nav-tabs > li.active > a:hover, .with-nav-tabs.panel-primary .nav-tabs > li.active > a:focus { color: #666666; background-color: #fff; border-color: #428bca; border-bottom-color: transparent; }

Related: See More


Questions / Comments: