"Panel with tabs"
Bootstrap 3.0.0 Snippet by mrm200000

<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 ----------> <br> <div class="container"> <div class="row"> <div class="col-md-6 col-md-offset-3"> <div class="panel panel-primary"> <div class="panel-heading"> <h3 class="panel-title">Panel title</h3> <span class="pull-right"> <!-- Tabs --> <ul class="nav panel-tabs"> <li class="active"><a href="#tab1" data-toggle="tab">Tab 1</a></li> <li><a href="#tab2" data-toggle="tab">Tab 2</a></li> </ul> </span> </div> <div class="panel-body"> <div class="tab-content"> <div class="tab-pane active" id="tab1"> <div class="container-fluid"> <div id="custom_carousel" class="carousel slide" data-ride="carousel" data-interval="2500"> <!-- Wrapper for slides --> <div class="carousel-inner"> <div class="item active"> <div class="container-fluid"> <div class="row"> <div class="col-md-3"><img src="http://www.13thaaaconference.com/images/speakers/woo.png" class="img-responsive"></div> <div class="col-md-9"> <h3>Beekeeping Economy</h3> <h4 class="nom">Prof. Kunsuk Woo (South Korea)</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, labore, magni illum nemo ipsum quod voluptates ab natus nulla possimus incidunt aut neque quaerat mollitia perspiciatis assumenda asperiores consequatur soluta.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, labore, magni illum nemo ipsum quod voluptates ab natus nulla possimus incidunt aut neque quaerat mollitia perspiciatis assumenda asperiores consequatur soluta.</p> </div> </div> </div> </div> <div class="item"> <div class="container-fluid"> <div class="row"> <div class="col-md-3"><img src="http://www.13thaaaconference.com/images/speakers/abrol.png" class="img-responsive"></div> <div class="col-md-9"> <h3>Pollination and Bee Flora</h3> <h4 class="nom">Prof. Dr. Dharam Pal Abrol (India)</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, labore, magni illum nemo ipsum quod voluptates ab natus nulla possimus incidunt aut neque quaerat mollitia perspiciatis assumenda asperiores consequatur soluta.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, labore, magni illum nemo ipsum quod voluptates ab natus nulla possimus incidunt aut neque quaerat mollitia perspiciatis assumenda asperiores consequatur soluta.</p> </div> </div> </div> </div> <div class="item"> <div class="container-fluid"> <div class="row"> <div class="col-md-3"><img src="http://www.13thaaaconference.com/images/speakers/Mateescu.png" class="img-responsive"></div> <div class="col-md-9"> <h3>Bee products and Apitherapy</h3> <h4 class="nom">Dr. Cristina Mateescu (Romania)</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, labore, magni illum nemo ipsum quod voluptates ab natus nulla possimus incidunt aut neque quaerat mollitia perspiciatis assumenda asperiores consequatur soluta.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, labore, magni illum nemo ipsum quod voluptates ab natus nulla possimus incidunt aut neque quaerat mollitia perspiciatis assumenda asperiores consequatur soluta.</p> </div> </div> </div> </div> <div class="item"> <div class="container-fluid"> <div class="row"> <div class="col-md-3"><img src="http://www.13thaaaconference.com/images/speakers/karl.png" class="img-responsive"></div> <div class="col-md-9"> <h3>Bee Biology</h3> <h4 class="nom">Prof. Dr. Karl Crailsheim (Austria)</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, labore, magni illum nemo ipsum quod voluptates ab natus nulla possimus incidunt aut neque quaerat mollitia perspiciatis assumenda asperiores consequatur soluta.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, labore, magni illum nemo ipsum quod voluptates ab natus nulla possimus incidunt aut neque quaerat mollitia perspiciatis assumenda asperiores consequatur soluta.</p> </div> </div> </div> </div> <div class="item"> <div class="container-fluid"> <div class="row"> <div class="col-md-3"><img src="http://www.13thaaaconference.com/images/speakers/ritter.png" class="img-responsive"></div> <div class="col-md-9"> <h3>Bee Heath</h3> <h4 class="nom">Dr.Wolfgang Ritter (Germany)</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, labore, magni illum nemo ipsum quod voluptates ab natus nulla possimus incidunt aut neque quaerat mollitia perspiciatis assumenda asperiores consequatur soluta.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, labore, magni illum nemo ipsum quod voluptates ab natus nulla possimus incidunt aut neque quaerat mollitia perspiciatis assumenda asperiores consequatur soluta.</p> </div> </div> </div> </div> <div class="item"> <div class="container-fluid"> <div class="row"> <div class="col-md-3"><img src="http://www.13thaaaconference.com/images/speakers/Nicola.png" class="img-responsive"></div> <div class="col-md-9"> <h3>Beekeeping for Rural Development</h3> <h4 class="nom">Dr. Nicola J. Bradbearr (United Kingdom)</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, labore, magni illum nemo ipsum quod voluptates ab natus nulla possimus incidunt aut neque quaerat mollitia perspiciatis assumenda asperiores consequatur soluta.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, labore, magni illum nemo ipsum quod voluptates ab natus nulla possimus incidunt aut neque quaerat mollitia perspiciatis assumenda asperiores consequatur soluta.</p> </div> </div> </div> </div> <!-- End Item --> </div> <!-- End Carousel Inner --> <div class="controls"> <ul class="nav"> <li data-target="#custom_carousel" data-slide-to="0" class="active"><a href="#"><img src="http://www.13thaaaconference.com/images/speakers/woo.png"><small>Prof. Kunsuk Woo</small></a></li> <li data-target="#custom_carousel" data-slide-to="1"><a href="#"><img src="http://www.13thaaaconference.com/images/speakers/abrol.png"><small>Prof. Dr. Dharam Pal Abrol</small></a></li> <li data-target="#custom_carousel" data-slide-to="2"><a href="#"><img src="http://www.13thaaaconference.com/images/speakers/Mateescu.png"><small>Dr. Cristina Mateescu</small></a></li> <li data-target="#custom_carousel" data-slide-to="3"><a href="#"><img src="http://www.13thaaaconference.com/images/speakers/karl.png"><small>Prof. Dr. Karl Crailsheim</small></a></li> <li data-target="#custom_carousel" data-slide-to="4"><a href="#"><img src="http://www.13thaaaconference.com/images/speakers/ritter.png"><small>Dr.Wolfgang Ritter</small></a></li> <li data-target="#custom_carousel" data-slide-to="5"><a href="#"><img src="http://www.13thaaaconference.com/images/speakers/Nicola.png"><small>Dr. Nicola J. Bradbear</small></a></li> </ul> </div> </div> <!-- End Carousel --> </div> </div> <div class="tab-pane" id="tab2">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div> </div> </div> </div> </div> </div> </div>
/*Panel tabs*/ .panel-tabs { position: relative; bottom: 30px; clear:both; border-bottom: 1px solid transparent; } .panel-tabs > li { float: left; margin-bottom: -1px; } .panel-tabs > li > a { margin-right: 2px; margin-top: 4px; line-height: .85; border: 1px solid transparent; border-radius: 4px 4px 0 0; color: #ffffff; } .panel-tabs > li > a:hover { border-color: transparent; color: #ffffff; background-color: transparent; } .panel-tabs > li.active > a, .panel-tabs > li.active > a:hover, .panel-tabs > li.active > a:focus { color: #fff; cursor: default; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; background-color: rgba(255,255,255, .23); border-bottom-color: transparent; }

Related: See More


Questions / Comments: