<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-3 well">
<ul class="nav nav-pills nav-stacked">
<li class="nav-header">Ad Monitoring</li>
<li><a href="/account/manage_lists"><i class="fa fa-tasks fa-fw"></i>Manage lists</a></li>
<li><a href="/account/browse_ads"><i class="fa fa-search fa-fw"></i>Browse ads</a></li>
<li><a href="/account/favorites"><i class="fa fa-star-o fa-fw"></i>Bookmarked ads</a></li>
<li class="nav-header">Account Settings</li>
<li><a href="#update-email" role="tab" data-toggle="tab"><i class="fa fa-envelope-o fa-fw"></i>Update email address</a></li>
<li><a href="#change-password" role="tab" data-toggle="tab"><i class="fa fa-key fa-fw"></i>Change password</a></li>
<li class="active"><a href="#change-subscription" role="tab" data-toggle="tab"><i class="fa fa-repeat fa-fw"></i>Change subscription</a></li>
<li><a href="#update-credit-card" role="tab" data-toggle="tab"></i><i class="fa fa-credit-card fa-fw"></i>Update credit card</a></li>
</ul>
</div>
<div class="col-md-9 panel">
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="update-email">Tab 1...</div>
<div role="tabpanel" class="tab-pane" id="change-password">Tab 2...</div>
<div role="tabpanel" class="tab-pane active" id="change-subscription">Tab 3...</div>
<div role="tabpanel" class="tab-pane" id="update-credit-card"><p>Tab 4...</p></div>
</div>
</div>
</div>
</div>
