<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 ----------> <div class="container"> <div class="row"> <div class="col-sm-4"> <br/><br/> <div class="list-group sidebar_menu"> <a href="#" class="list-group-item active_custom"> <span class="glyphicon glyphicon-user"></span> First item</a> <a href="#" class="list-group-item"> <span class="glyphicon glyphicon-star"></span> Second item</a> <a href="#" class="list-group-item"> <span class="glyphicon glyphicon-zoom-out"></span> Third item</a> <a href="#" class="list-group-item"> <span class="glyphicon glyphicon-ok"></span> Fourth item</a> <a href="#" class="list-group-item"> <span class="glyphicon glyphicon-plus"></span> Fifth item</a> <a href="#" class="list-group-item"> <span class="glyphicon glyphicon-cog"></span> Sixth item</a> <a href="#" class="list-group-item"> <span class="glyphicon glyphicon-trash"></span> Seventh item</a> <a href="#" class="list-group-item"> <span class="glyphicon glyphicon-time"></span> Eighth item</a> <a href="#" class="list-group-item"> <span class="glyphicon glyphicon-road"></span> Ninth item</a> <a href="#" class="list-group-item"> <span class="glyphicon glyphicon-glass"></span> Tenth item</a> </div> </div> <div class="col-sm-8 main_body"> <h1>Responsive Sidebar</h1> <p> Resize the width of the screen and see the responsiveness. </p> </div> </div> </div>

@media screen and (min-width: 768px) { .active_custom{ border-left: 5px solid #337ab7; } } @media screen and (max-width: 767px) { .sidebar_menu{ padding:0; margin:0; } .sidebar_menu a { float: left; font-size: 20px; width: 48%; line-height: 120px; background-color: #4CAF50; /* Green */ text-align: center; margin:1%; color:white; } .active_custom{ background-color: #d9534f !important; /* red */ } .main_body{ clear: both; } }