Card header/footer doesn't look nice with primary + inverse
Closed this issue · 8 comments
Combine card-primary and card-inverse like written in documentation results in an unfinished view.
https://jsfiddle.net/roest/LL0qnnxm/
Also think about making the header or footer primary results in problem with card-inverse selector wich is compiled to .card-inverse .card-header therefore not a good result with card-header card-primary card-inverse
Hi @roest01!
You appear to have posted a live example (https://fiddle.jshell.net/roest/ndLrxy54/show/light/), which is always a good first step. However, according to Bootlint, your example has some Bootstrap usage errors, which might potentially be causing your issue:
- line 60, column 9: E013: Only columns (
.col-*-*) may be children of.rows
You'll need to fix these errors and post a revised example before we can proceed further.
Thanks!
(Please note that this is a fully automated comment.)
Hi @roest01!
You appear to have posted a live example (https://fiddle.jshell.net/roest/LL0qnnxm/show/light/), which is always a good first step. However, according to Bootlint, your example has some Bootstrap usage errors, which might potentially be causing your issue:
- line 64, column 9: E013: Only columns (
.col-*-*) may be children of.rows
You'll need to fix these errors and post a revised example before we can proceed further.
Thanks!
(Please note that this is a fully automated comment.)
therefore not a good result with card-header card-primary card-inverse
I'm reasonably sure that it's only permissible to use .card-inverse/.card-primary on .card itself, not on subcomponents like .card-header, so your 2nd example seems invalid.
thank you for you'r answer cvrebert
my second example aims to the contextual alternatives of bootstrap v3 panel panel panel-primary
by definition you're right - .card-primary should be on .card itself - but then how can we separate between filled primary card and header primary card?
edit: of course an easy solution for header primary card would be a custom card-header card-primary card-inverse white-font hack with custom class in my css file if the official bootstrap css don't want to support this anymore
In my view the design of old panel-primary is the more flexible / simpler element because you doesn't have to take care about the content + the font color design.
As mentioned in the bleeding edge version of the migration guide, you can simply add .bg-primary to .card-header to achieve basically the same look as the old .panel-primary.
confirmed - works as expected. Therefore my second example is invalid.
With this information i've also been able to create a better looking first example. It's not perfect (different border color, multiple "primary" declaration) but you can work with it.
It's your decision to close this ticket if this usage is best practice and no more need to change the code
Thank you :)
It solves by adding a background-color: transparent to card-header/card-footer when .card-inverse'd (see f23ba61)
Updated fiddle: https://jsfiddle.net/LL0qnnxm/16/
.card-inverse .card-header,
.card-inverse .card-footer {
background-color: transparent;
border-color: rgba(255, 255, 255, 0.2);
}