<!-- TABS PRESENTATION -->
<section class="blok">
<div class="blok-body">
<div class="row">
  <!-- Nav tabs -->
  <ul class="nav tab-menu nav-pills col-sm-4 nav-stacked pr15">
    <li class="active"  data-toggle="tab"><a href="#home">Statistics</a></li>
    <li><a href="#profile"  data-toggle="tab">Prezentation</a></li>
    <li><a href="#messages"  data-toggle="tab">Student life</a></li>
    <li><a href="#settings"  data-toggle="tab">Something new</a></li>
  </ul>
  <!-- Tab panes -->
  <div class="tab-content col-sm-8">
    <div class="tab-pane well active in active" id="home"> 
1 ... STATISTICS Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
  </div>
    <div class="tab-pane well fade" id="profile"> 
2 ... Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. </div>
    <div class="tab-pane well fade" id="messages">
3 ... Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. </div>
    <div class="tab-pane well fade" id="settings">
4 .. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. </div>
  </div>
</div><!-- //row -->
</div><!-- blok-body // -->
</section><!-- // blok -->
<!-- TABS PRESENTATION // -->
.blok{margin:30px;}
  // BS tabs hover (instead - hover write - click)
  $('.tab-menu a').hover(function (e) {
    e.preventDefault()
    $(this).tab('show')
  })

External CSS

  1. https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css
  2. https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css
  3. https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js
  2. https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js