Repository navigation
Bootstrap4 - Inverted colors on a Card isn't inverting the list-group within. #22907
Description
Hello - I have a card showing a list of items as a List-Group.
The card is inverted with the warning colors:
<div class="col-12 col-md-3 flex-first">
<div class="card p-0 card-inverse card-warning">
<div class="card-block">
<h4 class="card-title">At a Glance</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
<ul class="list-group list-group-flush list-group-inverse">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
</div>
</div>
But here is how it looks:
The list-group-items aren't inverted themselves so they cannot be seen.
Activity
asyncdesign commentedon Jun 25, 2017
I assume you don't want the list items in the bottom section to be white with an orange background, so put the card-inverse class on the card block not the card, and you don't need the list-group-inverse class for the list group.
In any case, the margin: -1px / border 1px combination (used on list items) is inherently unstable at various zoom levels, and leads to visual anomalies such as disappearing borders - that's a bug in Bootstrap.
TheHokieCoder commentedon Jun 29, 2017
In general, list groups are meant to have their own control of background colors instead of inheriting like the inner elements of a card do (see the list groups documentation). A quick fix is to embrace this and add
.list-group-item-warningto eachliin your list group, which will give the light orange background and appropriate text color (BTW, I don't believe.list-group-inverseclass exists as I couldn't find it in the source. It appears the.list-group-item-*classes take care of the foreground color for you.). If you want the list group's background color to match the card color variant, you will need to do some custom CSS for that. Alternatively, the devs could decide to add extra CSS for the case where a list group is a child of a.cardto do one of the following:As far as the border issue goes that asyncdesign mentioned, I'm not sure how to fix that or even why there is a -1px margin on the list groups (I didn't really delve into those styles, only a cursory glance).
mdo commentedon Jun 30, 2017
This is going to be changed with #22950. The
.card-inverseclass is gone and there are new ways to style cards with different utilities, as opposed to dedicated card modifier classes.