bootstrap tabs

by secretgspot

HTML

<h2>Tabs Example</h2>
<p>This is a classic, tabbed slideshow. Tabs can be aligned to the left, right and center.</p>

<div id="slideshow-531-4f1f07bc0f038" class="wk-slideshow wk-slideshow-tabs" data-widgetkit="slideshow" data-options="{&quot;style&quot;:&quot;tabs&quot;,&quot;autoplay&quot;:0,&quot;interval&quot;:5000,&quot;width&quot;:&quot;auto&quot;,&quot;height&quot;:&quot;auto&quot;,&quot;duration&quot;:500,&quot;index&quot;:0,&quot;order&quot;:&quot;default&quot;,&quot;navigation&quot;:&quot;left&quot;,&quot;animated&quot;:&quot;scroll&quot;}" style="position: relative; width: 683px; visibility: visible; ">
    
    <div class="nav-container nav-left clearfix">
        <ul class="nav">
                                    <li class="active">
                <span>Tab One</span>
            </li>
                                    <li>
                <span>Tab Two</span>
            </li>
                                    <li>
                <span>Tab Three</span>
            </li>
                    </ul>
    </div>
    
    <div class="slides-container"><ul class="slides" style="width: 100%; overflow-x: hidden; overflow-y: hidden; position: relative; height: 135px; "><li style="top: 0px; left: 0px; position: absolute; width: 681px; height: 135px; display: list-item; "><article class="wk-content clearfix"><img class="align-left" src="wp-content/uploads/yootheme/widgetkit/slideshow/icons/image4.png" alt="Icon 04" width="115" height="105">
<h3 class="remove-margin-t">Headline</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></article></li><li style="top: 0px; left: 0px; position: absolute; width: 681px; height: 135px; display: none; "><article class="wk-content clearfix"><img class="align-left" src="wp-content/uploads/yootheme/widgetkit/slideshow/icons/image5.png" alt="Icon 05" width="115" height="105">
<h3 class="remove-margin-t">Headline</h3>
<p>Lorem ipsum dolor...

CSS

.clearfix:before,.clearfix:after,.grid-block:before,.grid-block:after{content:"";display:table}.clearfix:after,.grid-block:after{clear:both}.grid-box{float:left}.width20{width:20%}.width25{width:25%}.width33{width:33.333%}.width50{width:50%}.wk-content>*:first-child{margin-top:0}.wk-content>*:last-child{margin-bottom:0}.wk-slideshow{visibility:hidden}.wk-slideshow,
.wk-slideshow
.slides{position:relative}.wk-slideshow .slides,
.wk-slideshow
.nav{list-style:none;margin:0;padding:0}.wk-slideshow .slides>li{position:absolute}.wk-slideshow .nav
li{cursor:pointer}.wk-slideshow .nav
span{display:block}.wk-slideshow .next,
.wk-slideshow
.prev{position:absolute;z-index:5;cursor:pointer}.wk-slideshow
.caption{position:absolute;left:0;right:0;bottom:0;z-index:5;padding:10px;background:rgba(0,0,0,0.5)}.wk-slideshow
.captions{display:none}.wk-slideshow .caption,
.wk-slideshow .caption
a{color:#fff}.wk-slideshow .caption
a{text-decoration:underline}.wk-slideshow .wk-content > a:first-child,
.wk-slideshow .wk-content > img:first-child,
.wk-slideshow .wk-content>a:first-child>img{display:block}.wk-slideshow .slides > li > *,
.wk-slideshow .slides>li>*>img{display:block}.wk-gallery
a{display:inline-block}.wk-gallery a>img:first-child{display:block}.wk-slideset{visibility:hidden}.wk-slideset
.sets{overflow:hidden}.wk-slideset .set,
.wk-slideset
.nav{list-style:none;margin:0;padding:0}.wk-slideset
.set{display:none;position:relative;margin:0
auto;text-align:center}.wk-slideset .set:first-child{display:block}.wk-slideset .set>li{display:inline-block}.wk-slideset .nav
span{display:block;cursor:pointer}.wk-slideset .next,
.wk-slideset
.prev{position:absolute;z-index:5;cursor:pointer}.wk-slideset .wk-content > a:first-child,
.wk-slideset .wk-content > img:first-child,
.wk-slideset...