<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> <div class="list-group"> <a href="#" class="list-group-item active"><i class="fa fa-key"></i> <span>App Settings</span></a> <a href="#" class="list-group-item"><i class="fa fa-credit-card"></i> <span>Billing</span></a> <a href="#" class="list-group-item"><i class="fa fa-question-circle"></i> <span>Support</span></a> <a href="#" class="list-group-item"><i class="fa fa-arrow-circle-o-left"></i> <span>Sandbox Account</span></a> <a href="#" class="list-group-item"><i class="fa fa-book"></i> <span>QuickStart Overview</span></a> <a href="#" class="list-group-item"><i class="fa fa-compass"></i> <span>Documentation</span></a> </div>

.list-group { margin:auto; float:left; padding-top:20px; } .lead { margin:auto; left:0; right:0; padding-top:10%; }

$(document).ready(function() { $('.list-group-item').click(function(e) { e.preventDefault(); $('.list-group-item').removeClass('active'); $(this).addClass('active'); }); });