New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
No rounded borders for top image overlay cards when adding a background to overlay and suggestion for fix #29033
Comments
Bug reports must include a Reduced test case using CodePen or JS Bin. Can you add one? |
@coliff Done! Sorry, hadn't the time to properly look into the problem, but the rounded borders break when applying a background to the image overlay class. |
@Michelangelo1984 - an alternative solution would be to simply add the css class <div class="card-img-overlay rounded d-flex justify-content-center"> |
@coliff Thnx, yes that could also be a solution. Didn't know of that class. Still I think that since it is part of the card it should automatically be rounded and not break when adding a background or other css you want to add. |
Does this happen with the latest v4.3.1? The codepen is using 4.1.3. |
@XhmikosR It does happen with both versions (tested). So not a new bug, was just unnoticed. |
Allows use of background-color and more. Fixes #29033 for v4.
Allows use of background-color and more. Fixes #29033 for v5.
Allows use of background-color and more. Fixes #29033 for v5. Co-authored-by: XhmikosR <xhmikosr@gmail.com>
Allows use of background-color and more. Fixes #29033 for v5.
Allows use of background-color and more. Fixes #29033 for v5.
Allows use of background-color and more. Fixes #29033 for v5.
Allows use of background-color and more. Fixes #29033 for v5.
Allows use of background-color and more. Fixes #29033 for v5.
Allows use of background-color and more. Fixes twbs#29033 for v5. Co-authored-by: XhmikosR <xhmikosr@gmail.com>
Bootstrap version 4.3.1
Machine Windows 10,
Tested in Firefox (latest) and Chrome (latest)
I found myself having issues with rounded borders when an image is placed as top element in combination with an overlay with background in a card-deck. It does lose it's rounded borders with an overlay with background applied. However I suggest adding a style to the overlay so that the card keeps it's rounded borders for the overlay.
I added this style to bootstrap CSS file:
Codepen that demonstrates the issue when applying a background to the overlay: https://codepen.io/anon/pen/MNyZzg
The text was updated successfully, but these errors were encountered: