Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

List group with transparent background in card - wrong border color.

See original GitHub issue

In #26711, it states that we can use .bg-transparent on each .list-group-item to override the default white background.

I’m ok with this solution but in this case the borders of the list group are darker, and not the same as the borders of the card, because of the rgba in the border-color property. Having darker borders for a sub elements seems weird.

Reduced test case to show the issue : https://codepen.io/florianlacreuse/pen/BaBZyzK

Issue Analytics

State:
Created 4 years ago
Reactions:2
Comments:6 (6 by maintainers)

Top GitHub Comments

1reaction

mdocommented, May 14, 2020

Leaving this as-is and not implementing card and list-group variants at this time. We’re moving towards more interoperability with utilities and our components.

0reactions

mendozagioocommented, Jan 7, 2020

The same thing. To me, the proper way to solve this problem is create cards variants and list-group variants

Top Results From Across the Web

How to give transparent background to bootstrap list group?

I want to give a transparent background to a list group with only top border. Right now I get the default white background....

border-color - CSS: Cascading Style Sheets - MDN Web Docs

The border-color shorthand CSS property sets the color of an element's border. ... border-color: red yellow green transparent;

Cards - Bootstrap

Cards include various options for customizing their backgrounds, borders, and color. Background and color. Use text and background utilities to change the ...

Change the color of fills, lines, and borders - Microsoft Support

Change the color of fills, lines, and borders using color scheme colors or custom colors. ... Cells with no fill have a transparent...

Color Variants | Reference - BootstrapVue

These translate to class names bg-{variant} for backgrounds and border-{variant} for borders. These variants are used by components (such as <b-card> ...