title: How to customize list-group-item colors in bootstrap?
body: <p>Using bootstrap 3, I have customized a  list group like this:</p>
  
  <pre><code>&lt;div class="list-group"&gt;
    &lt;a class="list-group-item list-group-item-mine"href="/path"&gt;&lt;strong&gt;Item 1&lt;/strong&gt;&lt;/a&gt;
    &lt;a class="list-group-item list-group-item-mine"href="/path"&gt;&lt;strong&gt;Item 2&lt;/strong&gt;&lt;/a&gt;   
    &lt;a class="list-group-item list-group-item-mine"href="/path"&gt;&lt;strong&gt;Item 3&lt;/strong&gt;&lt;/a&gt;                   
  &lt;/div&gt; 
  </code></pre>
  
  <p><strong>CSS</strong> </p>
  
  <pre><code>.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;
  
  }
  </code></pre>
  
  <p>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? </p>