Bootstrap Links - Complete Guide with Examples
Comprehensive Bootstrap link utilities, components, accessibility, and practical real-world patterns.
Introduction
Bootstrap provides a set of utility classes and styles for links that enhance their appearance, interactivity, and accessibility.
These link utilities allow you to control colors, hover effects, underlines, link states, and more without writing custom CSS.
Bootstrap links work consistently across all modern browsers and follow accessibility best practices.
1. Basic Link Styles
<!-- Standard Bootstrap link -->
<a href="#">Default Bootstrap Link</a>
<!-- Link with custom color using text utilities -->
<a href="#" class="text-primary">Primary Colored Link</a>
<a href="#" class="text-success">Success Colored Link</a>
<a href="#" class="text-danger">Danger Colored Link</a>
<a href="#" class="text-warning">Warning Colored Link</a>
<a href="#" class="text-info">Info Colored Link</a>
<a href="#" class="text-dark">Dark Colored Link</a>
<a href="#" class="text-light bg-dark">Light Colored Link</a>
<a href="#" class="text-muted">Muted / Gray Link</a>
<a href="#" class="text-white bg-dark">White Link</a>2. Link Hover States
<!-- Default hover (darkens color) -->
<a href="#" class="text-primary">Hover to see default effect</a>
<!-- No hover color change -->
<a href="#" class="text-primary text-decoration-none" style="transition: none;">No hover effect</a>
<!-- Custom hover using opacity -->
<style>
.hover-opacity {
transition: opacity 0.2s ease;
}
.hover-opacity:hover {
opacity: 0.7;
}
</style>
<a href="#" class="text-primary hover-opacity">Fades on hover</a>3. Link Underline Utilities
Removing underline
<!-- No underline at all -->
<a href="#" class="text-decoration-none">Link without underline</a>
<!-- No underline on hover only -->
<style>
.no-underline-hover:hover {
text-decoration: none;
}
</style>
<a href="#" class="no-underline-hover">Underline disappears on hover</a>Adding or forcing underline
<!-- Force underline on all states -->
<a href="#" class="text-decoration-underline">Always underlined link</a>
<!-- Underline only on hover -->
<a href="#" class="text-decoration-none hover-underline">Shows underline on hover</a>
<style>
.hover-underline:hover {
text-decoration: underline;
}
</style>Responsive underline
<!-- Underline on mobile, none on desktop -->
<a href="#" class="text-decoration-underline text-md-decoration-none">
Responsive underline
</a>
<!-- No underline on mobile, underline on desktop -->
<a href="#" class="text-decoration-none text-md-decoration-underline">
Shows underline on larger screens
</a>4. Link Colors
<!-- Theme color links -->
<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 bg-dark">Light link</a>
<a href="#" class="link-dark">Dark link</a>
<a href="#" class="link-body-emphasis">Body emphasis link</a>
<!-- Link with opacity -->
<a href="#" class="link-primary opacity-75">75% opaque link</a>Custom link color with hover state
<style>
.custom-link {
color: #6f42c1;
text-decoration: none;
transition: color 0.2s ease;
}
.custom-link:hover {
color: #0d6efd;
text-decoration: underline;
}
</style>
<a href="#" class="custom-link">Custom colored link with transition</a>5. Link Utilities (New in Bootstrap 5.3)
<!-- Link utility classes -->
<a href="#" class="link-offset-1">Link with offset underline</a>
<a href="#" class="link-offset-2">Link with larger offset</a>
<a href="#" class="link-offset-3">Link with largest offset</a>
<!-- Link underline thickness -->
<a href="#" class="link-underline link-underline-opacity-0">No underline opacity</a>
<a href="#" class="link-underline link-underline-opacity-25">25% underline</a>
<a href="#" class="link-underline link-underline-opacity-50">50% underline</a>
<a href="#" class="link-underline link-underline-opacity-75">75% underline</a>
<a href="#" class="link-underline link-underline-opacity-100">100% underline</a>
<!-- Link underline color -->
<a href="#" class="link-underline link-underline-primary">Primary underline</a>
<a href="#" class="link-underline link-underline-success">Success underline</a>
<a href="#" class="link-underline link-underline-danger">Danger underline</a>
<!-- Combined underline utilities -->
<a href="#" class="link-offset-2 link-underline link-underline-opacity-50 link-underline-primary">
Custom styled link
</a>Link hover opacity utilities
<a href="#" class="link-opacity-10">10% opacity link</a>
<a href="#" class="link-opacity-25">25% opacity link</a>
<a href="#" class="link-opacity-50">50% opacity link</a>
<a href="#" class="link-opacity-75">75% opacity link</a>
<a href="#" class="link-opacity-100">100% opacity link</a>
<!-- Hover opacity changes -->
<style>
.hover-opacity-change {
opacity: 0.5;
transition: opacity 0.2s ease;
}
.hover-opacity-change:hover {
opacity: 1;
}
</style>
<a href="#" class="hover-opacity-change">Increases opacity on hover</a>6. Disabled Links
<!-- Disabled link (visual only - still clickable) -->
<a href="#" class="disabled" aria-disabled="true">Disabled link</a>
<!-- Disabled link with pointer-events -->
<a href="#" class="pe-none text-muted" aria-disabled="true">Completely disabled link</a>
<!-- Disabled link with Bootstrap styling -->
<a href="#" class="link-secondary text-decoration-none pe-none" aria-disabled="true">
Unavailable option
</a>
<!-- Disabled button styled as link -->
<button class="btn btn-link disabled" disabled>Disabled link button</button>Note: The
.pe-none class prevents all pointer events, making the link truly non-clickable.7. Links as Buttons
<!-- Link as button -->
<a href="#" class="btn btn-primary">Primary button link</a>
<a href="#" class="btn btn-secondary">Secondary button link</a>
<a href="#" class="btn btn-success">Success button link</a>
<a href="#" class="btn btn-danger">Danger button link</a>
<a href="#" class="btn btn-warning">Warning button link</a>
<a href="#" class="btn btn-info">Info button link</a>
<a href="#" class="btn btn-light">Light button link</a>
<a href="#" class="btn btn-dark">Dark button link</a>
<!-- Outline button links -->
<a href="#" class="btn btn-outline-primary">Outline button link</a>
<a href="#" class="btn btn-outline-secondary">Outline button link</a>
<!-- Link styled as button -->
<a href="#" class="btn btn-link">Link styled as button</a>Disabled button link
<a href="#" class="btn btn-primary disabled" tabindex="-1" aria-disabled="true">
Disabled button link
</a>8. Icon Links
<!-- Icon before link text -->
<a href="#" class="text-decoration-none">
<i class="bi bi-house-door"></i> Home
</a>
<!-- Icon after link text -->
<a href="#" class="text-decoration-none">
Download <i class="bi bi-download"></i>
</a>
<!-- Icon only link -->
<a href="#" class="text-decoration-none" aria-label="Settings">
<i class="bi bi-gear fs-4"></i>
</a>
<!-- Link with multiple icons -->
<a href="#" class="text-decoration-none">
<i class="bi bi-envelope"></i> Contact <i class="bi bi-arrow-right"></i>
</a>
Note: Requires Bootstrap Icons CDN:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
10. Breadcrumb Links
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="#">Library</a></li>
<li class="breadcrumb-item active" aria-current="page">Data</li>
</ol>
</nav>
<!-- Breadcrumb with dividers -->
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Products</a></li>
<li class="breadcrumb-item"><a href="#">Electronics</a></li>
<li class="breadcrumb-item"><a href="#">Laptops</a></li>
<li class="breadcrumb-item active">Gaming Laptop</li>
</ol>
</nav>11. Pagination Links
<nav aria-label="Page navigation">
<ul class="pagination">
<li class="page-item"><a class="page-link" href="#">Previous</a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item active"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>
</nav>
<!-- Pagination with icons -->
<nav aria-label="Page navigation">
<ul class="pagination">
<li class="page-item">
<a class="page-link" href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item">
<a class="page-link" href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>Sizing pagination
<!-- Large pagination -->
<ul class="pagination pagination-lg">
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
</ul>
<!-- Small pagination -->
<ul class="pagination pagination-sm">
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
</ul>12. Dropdown Links
<div class="dropdown">
<a class="btn btn-secondary dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown link
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action link</a></li>
<li><a class="dropdown-item" href="#">Another action link</a></li>
<li><a class="dropdown-item" href="#">Something else link</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>
<!-- Dropdown as link button -->
<div class="dropdown">
<a class="btn btn-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">
Link dropdown
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Profile</a></li>
<li><a class="dropdown-item" href="#">Settings</a></li>
<li><a class="dropdown-item" href="#">Logout</a></li>
</ul>
</div>Note: Dropdowns require Bootstrap JavaScript bundle.
13. Card Links
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title.</p>
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
</div>
<!-- Card with multiple links -->
<div class="card">
<div class="card-header">
<a href="#" class="card-link">Header link</a>
</div>
<div class="card-body">
<a href="#" class="card-link">Primary card link</a>
<a href="#" class="card-link text-secondary">Secondary card link</a>
</div>
<div class="card-footer">
<a href="#" class="card-link">Footer link</a>
</div>
</div>14. List Group Links
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action active" aria-current="true">
Active link item
</a>
<a href="#" class="list-group-item list-group-item-action">Link item 2</a>
<a href="#" class="list-group-item list-group-item-action">Link item 3</a>
<a href="#" class="list-group-item list-group-item-action disabled" tabindex="-1" aria-disabled="true">
Disabled link item
</a>
</div>
<!-- List group with colored links -->
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action list-group-item-primary">
Primary link
</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-success">
Success link
</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-danger">
Danger link
</a>
</div>15. Alert Links
<div class="alert alert-primary" role="alert">
A simple primary alert with <a href="#" class="alert-link">an example link</a>. Give it a click.
</div>
<div class="alert alert-success" role="alert">
Success alert with <a href="#" class="alert-link">colored link</a> matching the alert.
</div>
<div class="alert alert-danger" role="alert">
Danger alert with <a href="#" class="alert-link">link styled appropriately</a>.
</div>
<div class="alert alert-warning" role="alert">
Warning alert with <a href="#" class="alert-link">custom colored link</a>.
</div>17. External Links (With Icon Indicator)
<!-- External link with icon -->
<a href="https://example.com" target="_blank" rel="noopener noreferrer" class="text-decoration-none">
External Website <i class="bi bi-box-arrow-up-right ms-1"></i>
</a>
<!-- External link with full styling -->
<style>
.external-link::after {
content: "↗";
margin-left: 0.25rem;
font-size: 0.8em;
}
</style>
<a href="https://example.com" target="_blank" rel="noopener noreferrer" class="external-link">
Visit External Site
</a>18. Complete Real-World Examples
Navigation Bar with Links
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand" href="#">Brand</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</div>
</nav>Footer with Multiple Link Groups
<footer class="bg-dark text-white pt-4 mt-5">
<div class="container">
<div class="row">
<div class="col-md-4">
<h5>Quick Links</h5>
<ul class="nav flex-column">
<li class="nav-item mb-2">
<a href="#" class="nav-link p-0 text-white-50">Home</a>
</li>
<li class="nav-item mb-2">
<a href="#" class="nav-link p-0 text-white-50">About Us</a>
</li>
<li class="nav-item mb-2">
<a href="#" class="nav-link p-0 text-white-50">Services</a>
</li>
<li class="nav-item mb-2">
<a href="#" class="nav-link p-0 text-white-50">Contact</a>
</li>
</ul>
</div>
<div class="col-md-4">
<h5>Resources</h5>
<ul class="nav flex-column">
<li class="nav-item mb-2">
<a href="#" class="nav-link p-0 text-white-50">Blog</a>
</li>
<li class="nav-item mb-2">
<a href="#" class="nav-link p-0 text-white-50">Documentation</a>
</li>
<li class="nav-item mb-2">
<a href="#" class="nav-link p-0 text-white-50">Support</a>
</li>
</ul>
</div>
<div class="col-md-4">
<h5>Follow Us</h5>
<div class="d-flex gap-3">
<a href="#" class="text-white-50 text-decoration-none">
<i class="bi bi-twitter fs-4"></i>
</a>
<a href="#" class="text-white-50 text-decoration-none">
<i class="bi bi-facebook fs-4"></i>
</a>
<a href="#" class="text-white-50 text-decoration-none">
<i class="bi bi-github fs-4"></i>
</a>
</div>
</div>
</div>
</div>
</footer>Sidebar Navigation Links
<div class="card">
<div class="card-header bg-primary text-white">
<h5 class="mb-0">Navigation</h5>
</div>
<div class="list-group list-group-flush">
<a href="#" class="list-group-item list-group-item-action active">
<i class="bi bi-house-door"></i> Dashboard
</a>
<a href="#" class="list-group-item list-group-item-action">
<i class="bi bi-person"></i> Profile
</a>
<a href="#" class="list-group-item list-group-item-action">
<i class="bi bi-gear"></i> Settings
</a>
<a href="#" class="list-group-item list-group-item-action">
<i class="bi bi-envelope"></i> Messages
<span class="badge bg-primary rounded-pill">3</span>
</a>
<a href="#" class="list-group-item list-group-item-action text-danger">
<i class="bi bi-box-arrow-right"></i> Logout
</a>
</div>
</div>Link Button Group
<div class="btn-group" role="group" aria-label="Link button group">
<a href="#" class="btn btn-outline-primary">Save</a>
<a href="#" class="btn btn-outline-primary">Edit</a>
<a href="#" class="btn btn-outline-primary">Delete</a>
</div>
<div class="btn-group mt-3" role="group">
<a href="#" class="btn btn-primary">← Previous</a>
<a href="#" class="btn btn-primary">Next →</a>
</div>Quick Reference Summary
| Purpose | Class / Utility |
|---|---|
| Remove underline | .text-decoration-none |
| Force underline | .text-decoration-underline |
| Link colors | .link-primary, .link-secondary, .link-success, .link-danger, .link-warning, .link-info, .link-dark, .link-light |
| Link underline offset | .link-offset-1, .link-offset-2, .link-offset-3 |
| Link underline opacity | .link-underline-opacity-0 to .link-underline-opacity-100 |
| Link underline color | .link-underline-primary, .link-underline-success, etc. |
| Link opacity | .link-opacity-10 to .link-opacity-100 |
| Disabled link | .disabled, .pe-none |
| Nav links | .nav, .nav-link, .nav-item |
| Pagination links | .pagination, .page-item, .page-link |
| Breadcrumb links | .breadcrumb, .breadcrumb-item |
| Card links | .card-link |
| List group links | .list-group-item, .list-group-item-action |
| Alert links | .alert-link |
| Accessibility skip link | .visually-hidden-focusable |