content logo
Bootstrap Sidebars: Bootstrap Sidebar for Showing Contents

You can use the sidebar to display a collection of content. This code does this for you. In this code, to the left of the title of the paragraphs we want, by going to each item on the right, that paragraph is displayed. This code can prevent long and consecutive texts and therefore the user is less bored.

#Bootstrap Sidebar #Sidebar Hover Effect #Bootstrap Sidebar Effect #Hover Effect
<!-- this script got from www.frontendfreecode.com -->
<section class="blok"> <div class="blok-body"> <div class="row"> <!-- Nav tabs --> <ul class="nav tab-menu nav-pills col-sm-4 col-xs-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 col-xs-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 --><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://www.frontendfreecode.com">Frontend Code</a>
.blok {
    margin: 30px;
}
$('.tab-menu a').hover(function (e) {
    e.preventDefault()
    $(this).tab('show')
})
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css'>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css'>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"><!-- this script got from www.frontendfreecode.com -->
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css'>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css'>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'></script>
<style>
.blok {
    margin: 30px;
}
</style>

</head>
<body>
<section class="blok">
    <div class="blok-body">
        <div class="row">
            <!-- Nav tabs -->
            <ul class="nav tab-menu nav-pills col-sm-4 col-xs-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 col-xs-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 -->
<div id="bcl"><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://www.frontendfreecode.com">Frontend Code</a></div>
<script>
$('.tab-menu a').hover(function (e) {
    e.preventDefault()
    $(this).tab('show')
})
</script>

</body>
</html>
Preview