title: List group with linked item with background color in bootstrap
body: <p>Bootstrap version: Bootstrap v3.0.0<br>
  Using the bootstrap example for bootstrap list group with linked items:</p>
  
  <pre><code>   &lt;div class="list-group"&gt;
    &lt;a href="#" class="list-group-item active"&gt;
      Cras justo odio
    &lt;/a&gt;
    &lt;a href="#" class="list-group-item"&gt;Dapibus ac facilisis in&lt;/a&gt;
    &lt;a href="#" class="list-group-item"&gt;Morbi leo risus&lt;/a&gt;
    &lt;a href="#" class="list-group-item"&gt;Porta ac consectetur ac&lt;/a&gt;
    &lt;a href="#" class="list-group-item"&gt;Vestibulum at eros&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I need to change the background color as a <code>Contextual classes</code></p>
  
  <pre><code>&lt;ul class="list-group"&gt;
    &lt;li class="list-group-item list-group-item-success"&gt;Dapibus ac facilisis in&lt;/li&gt;
    &lt;li class="list-group-item list-group-item-info"&gt;Cras sit amet nibh libero&lt;/li&gt;
    &lt;li class="list-group-item list-group-item-warning"&gt;Porta ac consectetur ac&lt;/li&gt;
    &lt;li class="list-group-item list-group-item-danger"&gt;Vestibulum at eros&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>The trick part is I can't merge both examples, and the following combinations doesn't work:</p>
  
  <pre><code>&lt;a href="#" class="list-group-item list-group-item-danger"&gt;
  
  &lt;a href="#" class="list-group-item bg-danger"&gt;
  
  &lt;a href="#" class="list-group-item danger"&gt;
  </code></pre>
  
  <p>So the question....</p>
  
  <p><strong>Is possible to change this with bootstrap class, or maybe overriding some css?</strong></p>
  
  <p>Thanks and kind regards.</p>
  
  <p><strong>UPDATE:</strong><br>
  Suggested answer is working on fiddle but not in my code.<br>
  Bootstrap version: Bootstrap v3.0.0<br>
  The group is in a panel content.  </p>
  
  <p><a href="https://i.stack.imgur.com/h934p.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/h934p.png" alt="enter image description here"></a></p>
  
  <p>Complete code:</p>
  
  <pre><code>            &lt;div class="col-md-5"&gt;
                  &lt;div class="panel panel-default"&gt;
                      &lt;div class="panel-body"&gt;
                          &lt;div class="list-group"&gt;
    &lt;a href="#" class="list-group-item"&gt;Cras justo odio&lt;/a&gt;
    &lt;a href="#" class="list-group-item list-group-item-danger"&gt;Dapibus ac facilisis in&lt;/a&gt;
    &lt;a href="#" class="list-group-item list-group-item-warning"&gt;Morbi leo risus&lt;/a&gt;
    &lt;a href="#" class="list-group-item list-group-item-success"&gt;Porta ac consectetur ac&lt;/a&gt;
    &lt;a href="#" class="list-group-item list-group-item-info"&gt;Vestibulum at eros&lt;/a&gt;
  &lt;/div&gt;
     &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  </code></pre>