Allow adding row classes to cards

Created on 17 September 2024, 3 months ago
Updated 21 September 2024, 3 months ago

Problem/Motivation

I'm wondering why the card template adds an additional div with class rowand another div with class col. Additionally it adds an empty <div class="row"> </div> after the cards...

why is the module not using the default html code from bootstrap 5 examples at https://getbootstrap.com/docs/5.3/components/card/#example?

It requires lot of extra CSS effort to make the card look like the Card groups example. Testwise I have overridden the default template and have not seen any issues yet.

Just to compare:

@media (min-width: 576px) {
	/* Default bootstrap card group example */
    .card-group>.card+.card {
        margin-left: 0;
        border-left: 0;
    }
    .card-group>.card:not(:last-child) .card-header,
	.card-group>.card:not(:last-child) .card-img-top {
        border-top-right-radius: 0;
    }
}
@media (min-width: 576px) {
	/* Card group from views_bootstrap module */
	.card-group>.row {
		margin-right: 0;
	}
	.card-group>.row>.col:not(:first-child) {
        padding-left: 0;
    }
    .card-group>.row>.col:not(:last-child) {
		padding-right: 0;
    }
    .card-group>.row>.col+.col {
        padding-left: 0;
        padding-right: 0;
    }
    .card-group>.row>.col:not(:first-child)>.card {
		border-left: 0;
        border-top-left-radius: 0;
		border-bottom-left-radius: 0;
    }
    .card-group>.row>.col:not(:last-child)>.card {
        border-top-right-radius: 0;
		border-bottom-right-radius: 0;
    }
}

Steps to reproduce

Proposed resolution

Remaining tasks

User interface changes

API changes

Data model changes

Feature request
Status

Active

Version

5.5

Component

Code

Created by

🇩🇪Germany marc.bau

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

Production build 0.71.5 2024