Code for creating Tabs with Bootstrap

Tabs are easy to create and also easy to use for user. This help to create user-friendly interface with lots of information compressed in respective tabs. Below is a working code for creating tabs. You can customize as per your need.
<!-- tabs -->
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <h2>Tab</h2><hr/>

            <!-- tabs navigation -->
            <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>
                <li><a href="#tab3" data-toggle="tab">Section 3</a></li>
            </ul>
            <!-- tab section -->
            <div class="tab-content">
                <div class="tab-pane active" id="tab1">
                    This is our first tab...This is our first tab...This is our first tab...
                </div>
                <div class="tab-pane" id="tab2">
                    This is our second tab...This is our second tab...
                </div>
                <div class="tab-pane" id="tab3">
                    This is our third tab..This is our third tab..
                </div>
            </div>
        </div>
    </div>
</div>
DEMO:

fig: Tabs with Bootstrap