Bootstrap 3 - Tabs

by jo_fog

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<div class="container">
    
    <!-- Nav tabs -->
    <ul class="nav nav-tabs" role="tablist">
      <li>
          <a href="#home" role="tab" data-toggle="tab">
              <icon class="fa fa-home"></icon> Home
          </a>
      </li>
      <li><a href="#profile" role="tab" data-toggle="tab">
          <i class="fa fa-user"></i> Profile
          </a>
      </li>
      <li>
          <a href="#messages" role="tab" data-toggle="tab">
              <i class="fa fa-envelope"></i> Messages
          </a>
      </li>
      <li>
          <a href="#settings" role="tab" data-toggle="tab">
              <i class="fa fa-cog"></i> Settings
          </a>
      </li>
    </ul>
    
    <!-- Tab panes -->
    <div class="tab-content">
      <div class="tab-pane fade active in" id="unselected">
          <h2>Select a tab above...</h2>
      </div>
      <div class="tab-pane fade" id="home">
          <h2>Home Content Goes Here</h2>
          <img src="http://lorempixel.com/400/400/cats/1" alt="Cats"/>
      </div>
      <div class="tab-pane fade" id="profile">
          <h2>Profile Content Goes Here</h2>
          <img src="http://lorempixel.com/400/400/cats/2" alt="Cats"/>
      </div>
      <div class="tab-pane fade" id="messages">
          <h2>Messages Content Goes Here</h2>
          <img src="http://lorempixel.com/400/400/cats/3" alt="Cats"/>
      </div>
      <div class="tab-pane fade" id="settings">
          <h2>Settings Content Goes Here</h2>
          <img src="http://lorempixel.com/400/400/cats/4" alt="Cats"/>
      </div>
    </div>
    
</div>







<!-- Post Info -->
<div style='position:fixed;bottom:0;left:0;    
           ...

CSS

body {
    margin: 5px;
    background: #A6A6A6
}

/* Tab Navigation */
.nav-tabs {
    margin: 0;
    padding: 0;
    border: 0;    
}
.nav-tabs > li > a {
    background: #DADADA;
    border-radius: 0;
    box-shadow: inset 0 -8px 7px -9px rgba(0,0,0,.4),-2px -2px 5px -2px rgba(0,0,0,.4);
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover {
    background: #F5F5F5;
    box-shadow: inset 0 0 0 0 rgba(0,0,0,.4),-2px -3px 5px -2px rgba(0,0,0,.4);
}

/* Tab Content */
.tab-pane {
    background: #F5F5F5;
    box-shadow: 0 0 4px rgba(0,0,0,.4);
    border-radius: 0;
    text-align: center;
    padding: 10px;
}