twbs / bootstrap / 27732833794

94%

main: 96%

push

github

Convert list group and card group to container queries (#42512)

* Convert list group and card group to container queries

Replace viewport media queries with container queries for the responsive
.*:list-group-horizontal variants and the .card-group row layout, using the
existing container-breakpoint-up mixins. Both now respond to the width of a
parent query container (e.g., .contains-inline) rather than the viewport.

Update the docs to reflect the new behavior, flip css_media to container, and
list both components under the container queries guide.

* Document container query migration for card group and list group

* Fix doubled card-group borders by overlapping adjacent cards

The v6 border model moved borders off the outer .card onto the inner
segments (.card-header, .card-body, .card-list, .card-footer) and the card
images use outlines. The card-group seam code still removed border-inline-start
from .card, which no longer has a border, so adjacent cards rendered doubled
borders at every seam (body, header, and footer).

Pull each subsequent card back by one border width with a negative inline
margin so its leading edges overlap the previous card's trailing edge,
collapsing every seam into a single line.

* Fix doubled border between card body and footer

A middle .card-body/.card-list draws a bottom border to divide itself from the
next segment, but .card-footer draws a full border including its top edge, so
the shared seam rendered as a doubled border whenever a footer followed a body
that wasn't the first child (e.g. image + body + footer, or header + body +
footer). Drop the body/list bottom border when a footer immediately follows so
the footer owns that divider.

* Add icon, fix some copy

* fix

1015 of 1130 branches covered (89.82%)

Branch coverage included in aggregate %.

2918 of 3037 relevant lines covered (96.08%)

237.22 hits per line