How to customize list-group-item colors in bootstrap?
23,542
Solution 1
Use your custom class in parent .list-group-mine
rather than on child...it will give you better control to style the inner elements
Stack Snippet
.list-group-mine .list-group-item {
background-color: #f1f9fb;
border-top: 1px solid #0091b5;
border-left-color: #fff;
border-right-color: #fff;
}
.list-group-mine .list-group-item:hover {
background-color: red;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="list-group list-group-mine">
<a class="list-group-item" href="/path"><strong>Item 1</strong></a>
<a class="list-group-item" href="/path"><strong>Item 2</strong></a>
<a class="list-group-item" href="/path"><strong>Item 3</strong></a>
</div>
Solution 2
a.list-group-item:hover{
background:red;
}
https://jsfiddle.net/raj_mutant/6b4zzqab/3/
Related videos on Youtube
Author by
Karlom
Updated on March 10, 2020Comments
-
Karlom about 4 years
Using bootstrap 3, I have customized a list group like this:
<div class="list-group"> <a class="list-group-item list-group-item-mine"href="/path"><strong>Item 1</strong></a> <a class="list-group-item list-group-item-mine"href="/path"><strong>Item 2</strong></a> <a class="list-group-item list-group-item-mine"href="/path"><strong>Item 3</strong></a> </div>
CSS
.list-group-item-mine { background-color: #f1f9fb; border-top: 1px solid #0091b5; border-left-color: #fff; border-right-color: #fff; } .list-group-item-mine a:hover { background-color: red; }
The problem is that when hovered on, the list-group items are still turn gray as per default, while I need them to become red. How can I fix this?
-
simondefreeze about 6 yearsThen you will also need to apply the !important flag after background-color