Cannot remove "card-link" class from links

Card links add extra spacing to the front of the link so you can put them side by side nicely.

But, there’s a “Link in Card” setting in the Options panel for changing it to default when you don’t need that extra space, but it’s not working at all for me on Mac Mini. I target the link and it brings up the setting in the Options Panel but changing it back and forth between default and card-link has no effect, it stays as “card-link” no matter what I do.

workaround, if you put the links in a card-footer then you can add what class you desire

yeah that works if you need it in the main card container, but I need it in the body where it starts with 2 links that are “supposed” to be side by side and are not, and of course cannot remove the card-link setting so I can’t get rid of the extra space either.

Definitely something not right here. Thanks for the work around though, hopefully this will get fixed soon.

You can create a custom card and have links in the card-body without the class card-link.
like this

<div class="card">
	<div class="card-body">
		<h4 class="card-title">Heading</h4>
		<p class="card-subtitle">Paragraph</p>
		<a class="YOUR-CLASS-HERE" href="#">Link</a>
		<a class="YOUR-CLASS-HERE" href="#">Link</a>
	</div>
</div>
1 Like

A way around this to keep the code without having to use Custom Code is to remove the links and replace them with the “span” element. You then add a link into the span and it’s a fresh link with no class.

This is how the code looks afterwards:

<div class="card">
    <div class="card-body">
        <h4 class="card-title">Title</h4>
        <h6 class="text-muted card-subtitle mb-2">Subtitle</h6>
        <p class="card-text">Paragraph</p>
        <span>
           <a href="#">Link</a>
        </span>
        <span class="ms-3">
           <a href="#">Link</a>
        </span>
    </div>
</div>

You can then modify the class elements to your desire, however this looks identical to the one generated by BSS before modification.

[ I did pretty print the code :smiley: ]

@GregoryAM

Why do you need Custom Code to add two divs.
In your example it is better to add a div and have all links inside the div. The div can be a flex or a grid then you have full control to position the links

Since he was mentioning a card without the “card-link” class; this was my “Quick Fix” to removing the class from those links within the card and keeping the card default to BSS design without having to create a Custom Code element.

I’m not denying your answer is wrong, and you’re right on better positioning. But, the question asked how to remove the class from the links, and this was my easiest way to do so while keeping the look of a generated card from BSS, because adding a link element back into a generated card repopulates the link class with “card-link”.

I can confirm that the Link in Card setting is not working. We will fix it in our next update. For now the workarounds mentioned above are the only way to remove the class.

3 Likes

Thanks @martin, glad to hear it. :slight_smile: