While experimenting with Bootstrap, I aimed to create a layout similar to ; a grid featuring bordered panels containing text and images. After some research, I concluded that Bootstrap's Thumbnail component would be the most suitable choice for my project.
However, when attempting to implement it, I encountered an issue.
In order to make the entire panel clickable, I needed to apply the thumbnail class to an anchor tag. Wrapping the anchor in a div with thumbnail did not yield the desired result. Inside the anchor tag, I included a div with the class caption for storing additional text without changing its styling upon hovering on the panel.
Unfortunately, this setup resulted in the text losing its link color and being underlined when the panel was hovered over. This effect was not ideal as the border already indicated that it was a link.
I contemplated modifying the caption class using custom CSS but felt unsure about altering default behavior and preferred to stick to standard practices to avoid constant maintenance during Bootstrap updates.
So, my question is: what am I doing wrong? Is it incorrect to want the entire thumbnail panel to function as a link? Should I remove the underline manually or reevaluate the classes applied to the tags? Or perhaps the Thumbnail component is not the right choice for this scenario altogether?
EDIT:
I forgot to include the code snippet.
This is the current structure I'm utilizing:
<a class="thumbnail text-center" href="#">
<div class="caption">
<h3>Potato</h3>
<p>A brief description of this specific potato.</p>
</div>
</a>
EDIT 2:
Here is an image illustrating the problem:
When hovered over, the text gets underlined, which is not the intended outcome.