Is this on the roadmap at all: https://getbootstrap.com/docs/5.0/helpers/stretched-link/
Currently we can add a link to a div/column/whatever, which is great but the above is more accessible.
From what I understood from this example, this wouldn’t really work when inside a flexbox because of the usage of ‘position: absolute’. It also has the side effect of not being able to select text when something is besides a stretched link, which felt less accessible.
You can try the following CSS on a button element when inside one of our Div elements. It’s essentially what they were doing.
$el {
position: static;
}
$el::after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
content: "";
}
Hey @charlie! That probably wasn’t the best example, here’s another: https://youtu.be/PQwobACZhAg?t=1408 which explains it a bit more. I’ve noticed other builders doing it more.
Thanks for the update. Did you try the css code above? It should extend or stretch the clickable area of the child Button element to cover the parent Div element. Clicking anywhere on the Div should trigger the link inside the Button.
In the example below, the entire orange area should be clickable, even though the link is applied only to the Button element.
