<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 ----------> <ul class="list-group material_list_group"> <li class="list-group-item material_list_group_item">Cras justo odio</li> <li class="list-group-item material_list_group_item">Dapibus ac facilisis in</li> <li class="list-group-item material_list_group_item">Morbi leo risus</li> <li class="list-group-item material_list_group_item">Porta ac consectetur ac</li> <li class="list-group-item material_list_group_item">Vestibulum at eros</li> </ul>

/***********************List group***********************/ .material_list_group .material_list_group_item { color: #fff; font-weight: 400; border-radius: 0; background-color: #4092d9; -webkit-transition: background-color 0.2s ease-out 0s; transition: background-color 0.2s ease-out 0s; } .material_list_group .material_list_group_item:hover { background-color: #336ea1; } .material_list_group .disabled:hover { background-color: #4092d9; color: #ffffff; } .material_list_group .material_badge { background-color: #fff; border-color: #ffffff; }