<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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous"> <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'> <div class="container"> <div class="row"> <div class="col-md-3"> <div class="list-group-hover sidebar-widget-1"> <ul class="list-unstyled"> <li><a href="dashboard.html" class="list-group-item bg-active"><i class="fa fa-angle-double-right"></i> Dashboard <span class="badge">12</span> </a></li> <li><a href="my-profile.html" class="list-group-item"><i class="fa fa-angle-double-right"></i> My Profile</a> </li> <li><a href="my-listings.html" class="list-group-item"><i class="fa fa-angle-double-right"></i> My Listings</a> </li> <li><a href="my-enquiry.html" class="list-group-item"><i class="fa fa-angle-double-right"></i> My Enquiry</a> </li> <li><a href="add-business.html" class="list-group-item"><i class="fa fa-angle-double-right"></i> Add your Business</a> </li> <li><a href="login.html" class="list-group-item"><i class="fa fa-angle-double-right"></i> Login</a> </li> <li><a href="signup.html" class="list-group-item"><i class="fa fa-angle-double-right"></i> Signup</a> </li> <li><a href="account-settings.html" class="list-group-item"><i class="fa fa-angle-double-right"></i> Account Settings</a> </li> <li><a href="change-password.html" class="list-group-item"><i class="fa fa-angle-double-right"></i> Change Password</a> </li> <li><a href="listings-page.html" class="list-group-item"><i class="fa fa-angle-double-right"></i> Listings Page</a> </li> <li><a href="product-page.html" class="list-group-item"><i class="fa fa-angle-double-right"></i> Product Page</a> </li> <li><a href="logout.html" class="list-group-item"><i class="fa fa-angle-double-right"></i> Log Out</a> </li> </ul> </div> </div> <div class="col-md-8"> </div> </div> </div>

/************************************* 1. SIDEBAR-WIDGET-1 CSS **************************************/ .sidebar-widget-1 .list-group-item {padding:15px;} .list-group-hover .list-group-item:hover { background-color: #febf00 ;color:#fff;transition: all 0.5s ease-out;} .sidebar-widget-1 i {margin-right:15px;font-size:18px;font-weight:600;} .list-group-item.bg-active {background:#febf00 ;color:#fff; } /************************************* 1. GENERIC CSS **************************************/ * {-webkit-border-radius: 0 !important;-moz-border-radius: 0 !important; border-radius: 0 !important;} body {font-family: 'Roboto';font-size: 16px;letter-spacing:.5px;} /************************************* 2. MARGIN CSS **************************************/ /************************************* 3. PADDING CSS **************************************/ /************************************* 4. GAP & BORDER CSS **************************************/ /************************************* 5. BOX-SHADOW CSS **************************************/ /************************************* 6. ICONS CSS **************************************/ /************************************* 7. TYPROGRAPHY FONT CSS **************************************/ /************************************* 8. IMAGES/MEDIA CSS **************************************/