Horizontal card rounded image broken at small breakpoints
Nobody has claimed this yet.
- Dominant language
- MDX
- Stars
- 175k
- Forks
- 78.6k
- Avg merge
- 7h 19m
- Merged PRs (30d)
- 35
Description
Prerequisites
- I have searched for duplicate or closed issues
- I have validated any HTML to avoid common problems
- I have read the contributing guidelines
Describe the issue
Originally mentioned in https://github.com/twbs/bootstrap/pull/38845 by @Soraxem
Cards Horizontal rendering from medium breakpoint is OK:
However, with a smaller breakpoint, the rounded image is not correctly rendered because the orientation changes; it has a rounded corner on the left-hand side, and a straight corner on the right-hand side:
Reduced test cases
Foundable directly within Cards Horizontal documentation
What operating system(s) are you seeing the problem on?
Windows, macOS, Android, iOS, Linux
What browser(s) are you seeing the problem on?
Chrome, Safari, Firefox, Microsoft Edge, Opera
What version of Bootstrap are you using?
v5.3.0
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Open the Cards Horizontal documentation linked in the issue and reproduce the example at a small breakpoint. Compare the image corners as the card orientation changes; done means the rounded image follows the card shape at both small and medium breakpoints across the listed browsers.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- bootstrap, css
- Domain
- frontend, web-dev
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Stale
- Clarity
- Clearly specified
- Newbie friendliness
- 48/100