You can use the .link-*
classes to colorize links. Unlike the .text-*
classes, these classes have a :hover
and :focus
state.
<a href="#" class="link-primary">Primary link</a>
<a href="#" class="link-secondary">Secondary link</a>
<a href="#" class="link-success">Success link</a>
<a href="#" class="link-danger">Danger link</a>
<a href="#" class="link-warning">Warning link</a>
<a href="#" class="link-info">Info link</a>
<a href="#" class="link-light">Light link</a>
<a href="#" class="link-dark">Dark link</a>
Link classes
Use .link
class for bolder text styling
<a href="#" class="link link-primary">Primary link</a>
<a href="#" class="link link-secondary">Secondary link</a>
<a href="#" class="link link-success">Success link</a>
<a href="#" class="link link-danger">Danger link</a>
<a href="#" class="link link-warning">Warning link</a>
<a href="#" class="link link-info">Info link</a>
<a href="#" class="link link-light">Light link</a>
<a href="#" class="link link-dark">Dark link</a>
Size
Use .link-sm
for smaller size.
.link-primary.link-sm
.link-secondary.link-sm
.link-success.link-sm
.link-danger.link-sm
.link-warning.link-sm
.link-info.link-sm
.link-light.link-sm
.link-dark.link-sm
<a href="#" class="link-primary link-sm">.link-primary.link-sm</a>
<a href="#" class="link-secondary link-sm">.link-secondary.link-sm</a>
<a href="#" class="link-success link-sm">.link-success.link-sm</a>
<a href="#" class="link-danger link-sm">.link-danger.link-sm</a>
<a href="#" class="link-warning link-sm">.link-warning.link-sm</a>
<a href="#" class="link-info link-sm">.link-info.link-sm</a>
<a href="#" class="link-light link-sm">.link-light.link-sm</a>
<a href="#" class="link-dark link-sm">.link-dark.link-sm</a>
Collapse
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Read more
Read less
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<!-- View More - Collapse -->
<div class="collapse" id="collapseBrand">
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<!-- End View More - Collapse -->
<!-- Link -->
<a class="link-sm link-collapse" href="#collapseBrand" role="button" data-bs-toggle="collapse" aria-expanded="false" aria-controls="collapseBrand">
<span class="link-collapse-default">Read more</span>
<span class="link-collapse-active">Read less</span>
</a>
<!-- End Link -->