How to make Tab using Bootstrap?

making tab in bootstrap is very simple, it just take a minute to understand this simple code...

<!--Start  tabs -->

<div>

  <ul class="nav nav-tabs" role="tablist">

    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>

    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>

    <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>

    <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>

  </ul>

  <!-- Tab panes -->

  <div class="tab-content">

    <div role="tabpanel" class="tab-pane active" id="home">hello babby</div>

    <div role="tabpanel" class="tab-pane" id="profile">...</div>

    <div role="tabpanel" class="tab-pane" id="messages">...</div>

    <div role="tabpanel" class="tab-pane" id="settings">...</div>

  </div>

</div>

<!--End  tabs -->

<script>

$('#myTabs a').click(function (e) {

  e.preventDefault()

  $(this).tab('show')

})

</script>