how to create navbar like gmail tab navbar using bootstrap

Question

How to create a navbar like Gmail Tab Navbar which has Primary,Social,Promotions,Updates. I have to do this using just bootstrap and not use of angular js.Is this possible via just bootstrap?

<!-- tabs -->
          <div class="container">
        <div class="tabbable">
          <ul class="nav nav-tabs">
            <li class="active"><a href="#one" data-toggle="tab">One</a></li>
            <li><a href="#two" data-toggle="tab">Two</a></li>
            <li><a href="#twee" data-toggle="tab">Twee</a></li>
          </ul>
          <div class="tab-content">
            <div class="tab-pane active" id="one">Content for Tab 1.Content for Tab 1.Content for Tab 1.</div>
            <div class="tab-pane" id="two">Content for Tab 2.Content for Tab 2.Content for Tab 2.</div>
            <div class="tab-pane" id="twee">Content for Tab 3.Content for Tab 3.Content for Tab 3.</div>
           </div>
        </div>
              </div>
                <div class="container">
        <!-- /tabs -->

I need to apply custom background for each tab and when the tab is active, then there will be a straight line at the top of the tab as like gmail. How do i acheive this?

Answer 1

You can do this with the standard Bootstrap css/js/jquery and Font Awesome (or any font library).

Its just the standard nav-pills from Bootstrap and some CSS to achieve the GMailish look along with making it respond to mobile devices.

body {
  padding: 20px;
}
#gmailTab .tab-content {
  color: #1c1c1c;
  background-color: #ccc;
  padding: 5px 15px;
}
#gmailTab .nav-pills > li > a {
  border-radius: 0;
  background-color: #eee;
  background-color: #ccc;
}
#gmailTab .nav-pills > li.active > a,
#gmailTab .nav-pills > li.active > a:focus,
#gmailTab .nav-pills > li.active > a:hover {
  border-top: 3px solid #f00;
}
@media (max-width: 767px) {
  .nav-pills > li {
    float: none;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <h1>GMail Menu  </h1>

</div>
<div id="gmailTab" class="container-fluid">
  <ul class="nav nav-pills">
    <li class="active"> <a href="#1" data-toggle="tab"><i class="fa fa-inbox"></i> Primary</a>

    </li>
    <li><a href="#2" data-toggle="tab"><i class="fa fa-users"></i> Social</a>

    </li>
    <li><a href="#3" data-toggle="tab"><i class="fa fa-tag"></i> Promotions</a>

    </li>
    <li><a href="#4" data-toggle="tab"><i class="fa fa-info-circle"></i> Updates</a>

    </li>
    <li><a href="#5" data-toggle="tab"><i class="fa fa-weixin"></i> Forums</a>

    </li>
  </ul>
  <div class="tab-content clearfix">
    <div class="tab-pane active" id="1">
      <h3>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</h3>

    </div>
    <div class="tab-pane" id="2">
      <h3>Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years.</h3>

    </div>
    <div class="tab-pane" id="3">
      <h3>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</h3>

    </div>
    <div class="tab-pane" id="4">
      <h3>Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years.</h3>

    </div>
    <div class="tab-pane" id="5">
      <h3>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</h3>

    </div>
  </div>
</div>