In Bootstrap 5, the .stretched-link class lets you turn a complex element into a clickable area bounded by a containing block. Here's the official page on the class.
This is one of my favorite little utilities in Bootstrap, I use it all of the time to make cards clickable. For example, on whopaystechnicalwriters.com, every publication card is a clickable link.
Disabling links is useful and Bootstrap 5 provides built-in styles for disabled links and buttons. However, .stretched-link and disabled don't play nice unless you introduce a few lines of custom CSS:
.inactive {
background-color: #C1C1C0;
pointer-events: none;
cursor: default;
}
The pointer-events and cursor lines nullify the .stretched-link class and make the area no longer clickable. The background-color is optional to visually indicate to the user that the link is disabled.
Note: unlike the traditional "disabled" flag that goes on the <a> tag, the .inactive class is applied to the containing block.
