<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> <!------ Include the above in your HEAD tag ----------> <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"> <!-- Tab panes --> <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>

@import url(http://netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css); body{margin-top:20px;} .nav-stacked .fa-fw { width: 2em; } .nav-header { text-transform: uppercase; letter-spacing: 2px; color: grey; }