I use a centered Bootstrap card in my component where I have an icon as header and text as body. This used to look fine together with text-center
.
With #33100, the header icon is now aligned left.
From what I see, the reason comes from this line here:
I'm not sure if this was an intentional change by @ciar4n that each instance of cards are changed. Maybe he only wanted to change specific uses?
Labels |
Added:
?
|
Title |
|
Yes the card header was changed to flex with the recent repaint. Flex was just better suited for handling the multiple header elements in some of the cpanel cards,
As its a flex container you can use the BS m-auto
class on the element you wished centered (presuming this is the only element in the header). You can also add the BS class justify-content-center
to the card header instead.
Just going back a bit, it looks like the white card headers have been there for a while. Im not sure at what point they changed.
Thanks, I'll try then with the other classes you mentioned.
The white card headers were part of your PR or some commits after it. My first screenshot is the state of the repo directly before the merge of your PR
The suggested classes worked for re-centering the header, that's fine.
Just going back a bit, it looks like the white card headers have been there for a while. Im not sure at what point they changed.
@ciar4n As for the color I did some investigations. It was defined as white for the cpanel cards before (using the variable card-bg
). You expanded that to all cards within .content
(which is the component area) in your repaint PR. Previously it used the BS5 default color (using card-cap-bg
) for those.
I'm closing this issue as I have a solution
Status | New | ⇒ | Closed |
Closed_Date | 0000-00-00 00:00:00 | ⇒ | 2021-05-07 17:41:23 |
Closed_By | ⇒ | Bakual |
Btw, also the background of the header is now white, while it was a bit greyish before. Imho it looked better with the slightly different background color, but I'm no designer - so won't argue?
Merely wondering if that was intentional as well.