Horizontal card rounded image broken at small breakpoints

[julien-deramond]

Prerequisites

• [X] I have searched for duplicate or closed issues
• [X] I have validated any HTML to avoid common problems
• [X] 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

[julien-deramond]

https://github.com/twbs/bootstrap/pull/38845#pullrequestreview-1504675789 explains why we can't use .overflow-hidden in our example because it's not a generic functional approach; if one uses dropdowns for example, it won't work.

As a user, using CSS or generating something like .rounded-md-start would do the trick. But here, in our documentation, we can't do that.

One solution could be to force the horizontal layout whatever the breakpoint and change the following explanation:

In the example below, we remove the grid gutters with .g-0 and use .col-md-* classes to make the card horizontal at the md breakpoint. Further adjustments may be needed depending on your card content.

Other ideas?

[AshwinKumar-V]

Hey @julien-deramond, can I suggest using Border Mixins and Media Queries in a new class namely card-img-horizontal in the _card.scss file to solve this issue.

@include media-breakpoint-down(md) {
  .card-img-horizontal {
    @include border-top-radius(var(--#{$prefix}card-inner-border-radius));
  }
}

@include media-breakpoint-up(md) {
  .card-img-horizontal {
    @include border-start-radius(var(--#{$prefix}card-inner-border-radius));
  }
}

The proposed document example would just replace the class rounded-start with card-img-horizontal.

<div class="card mb-3" style="max-width: 540px;">
  <div class="row g-0">
    <div class="col-md-4">
      <img src="..." class="img-fluid card-img-horizontal" alt="...">
    </div>
    <div class="col-md-8">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
        <p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p>
      </div>
    </div>
  </div>
</div>

[yuhueilee]

Hi @julien-deramond , I encountered the same issue when trying to create responsive card layout. I managed to use jQuery to work around it. Hope this help.

In the index.tsx file:

window.addEventListener("resize", () => {
        const cardImage = document.querySelectorAll("img");

        if (
            window.matchMedia("(max-width: 768px)").matches &&
            window.matchMedia("(min-width: 576px)").matches
        ) {
            cardImage.forEach((img) => {
                img.classList.add("rounded-start");
            });
        } else {
            cardImage.forEach((img) => {
                img.classList.remove("rounded-start");
            });
        }
    });

In the index.scss file:

.rounded-start {
    border-bottom-left-radius: var(--bs-border-radius) !important;
    border-top-left-radius: var(--bs-border-radius) !important;
    border-top-right-radius: 0;
}