<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> <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="tabbable"> <ul class="nav nav-tabs"> <li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li> <li><a href="#tab2" data-toggle="tab">Section 2</a></li> </ul> <div class="tab-content"> <div class="tab-pane active" id="tab1"> <p>I'm in Section 1.</p> </div> <div class="tab-pane" id="tab2"> <p>I'm in Section 2.</p> </div> </div> </div> </div>

#scrollContent{ height:186px; overflow:auto; position:relative; }body { padding-top: 50px; } .thumbnail { position:relative; overflow:hidden; } .caption { position:absolute; top:0; right:0; background:rgba(66, 139, 202, 0.75); width:100%; height:100%; padding:2%; display: none; text-align:center; color:#fff !important; z-index:2; }

$('#openBtn').click(function(){ $('#myModal').modal({show:true}) });$('#myTab a').click(function (e) { e.preventDefault(); $(this).tab('show'); }); $(function () { $('#myTab a:last').tab('show'); }) $("[data-toggle=tooltip]").tooltip(); $("[data-toggle=popover]").popover(); $(".alert").delay(200).addClass("in").fadeOut(3500); $(".alert").addClass("in").fadeOut(3500); $('.typeahead').typeahead({ source: function (typeahead, query) { /* put your ajax call here.. return $.get('/typeahead', { query: query }, function (data) { return typeahead.process(data); }); */ return ['alpha','beta','bravo','delta','epsilon','gamma','zulu']; } }); $("[rel='tooltip']").tooltip(); $('.thumbnail').hover( function(){ $(this).find('.caption').slideDown(250); //.fadeIn(250) }, function(){ $(this).find('.caption').slideUp(250); //.fadeOut(205) } );