mirror of
https://github.com/twbs/bootstrap.git
synced 2025-01-10 03:46:13 +01:00
592 lines
34 KiB
HTML
592 lines
34 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||
<meta name="description" content="Make any HTML element or Bootstrap component clickable by “stretching” a nested link via CSS.">
|
||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||
<meta name="generator" content="Jekyll v3.8.5">
|
||
|
||
<meta name="docsearch:language" content="en">
|
||
<meta name="docsearch:version" content="4.3">
|
||
|
||
<title>Stretched link · Bootstrap</title>
|
||
|
||
<link rel="canonical" href="https://getbootstrap.com/docs/4.3/utilities/stretched-link/">
|
||
|
||
<!-- Bootstrap core CSS -->
|
||
<link href="/docs/4.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-PDle/QlgIONtM1aqA2Qemk5gPOE7wFq8+Em+G/hmo5Iq0CCmYZLv3fVRDJ4MMwEA" crossorigin="anonymous">
|
||
<!-- Documentation extras -->
|
||
|
||
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
|
||
|
||
|
||
<link href="/docs/4.3/assets/css/docs.min.css" rel="stylesheet">
|
||
|
||
<!-- Favicons -->
|
||
<link rel="apple-touch-icon" href="/docs/4.3/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
|
||
<link rel="icon" href="/docs/4.3/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
|
||
<link rel="icon" href="/docs/4.3/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
|
||
<link rel="manifest" href="/docs/4.3/assets/img/favicons/manifest.json">
|
||
<link rel="mask-icon" href="/docs/4.3/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
|
||
<link rel="icon" href="/favicon.ico">
|
||
<meta name="msapplication-config" content="/docs/4.3/assets/img/favicons/browserconfig.xml">
|
||
<meta name="theme-color" content="#563d7c">
|
||
|
||
<!-- Twitter -->
|
||
<meta name="twitter:card" content="summary">
|
||
<meta name="twitter:site" content="@getbootstrap">
|
||
<meta name="twitter:creator" content="@getbootstrap">
|
||
<meta name="twitter:title" content="Stretched link">
|
||
<meta name="twitter:description" content="Make any HTML element or Bootstrap component clickable by “stretching” a nested link via CSS.">
|
||
<meta name="twitter:image" content="https://getbootstrap.com/docs/4.3/assets/brand/bootstrap-social-logo.png">
|
||
|
||
<!-- Facebook -->
|
||
<meta property="og:url" content="https://getbootstrap.com/docs/4.3/utilities/stretched-link/">
|
||
<meta property="og:title" content="Stretched link">
|
||
<meta property="og:description" content="Make any HTML element or Bootstrap component clickable by “stretching” a nested link via CSS.">
|
||
<meta property="og:type" content="website">
|
||
<meta property="og:image" content="http://getbootstrap.com/docs/4.3/assets/brand/bootstrap-social.png">
|
||
<meta property="og:image:secure_url" content="https://getbootstrap.com/docs/4.3/assets/brand/bootstrap-social.png">
|
||
<meta property="og:image:type" content="image/png">
|
||
<meta property="og:image:width" content="1200">
|
||
<meta property="og:image:height" content="630">
|
||
|
||
<script>
|
||
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
|
||
ga('create', 'UA-146052-10', 'getbootstrap.com');
|
||
ga('send', 'pageview');
|
||
</script>
|
||
<script async src="https://www.google-analytics.com/analytics.js"></script>
|
||
|
||
|
||
</head>
|
||
<body>
|
||
<a class="skippy sr-only sr-only-focusable" href="#content">
|
||
<span class="skippy-text">Skip to main content</span>
|
||
</a>
|
||
|
||
|
||
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
|
||
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap"><svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="d-block" viewBox="0 0 612 612" role="img" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg></a>
|
||
|
||
<div class="navbar-nav-scroll">
|
||
<ul class="navbar-nav bd-navbar-nav flex-row">
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">Home</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link active" href="/docs/4.3/getting-started/introduction/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Documentation</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="/docs/4.3/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<ul class="navbar-nav flex-row ml-md-auto d-none d-md-flex">
|
||
<li class="nav-item dropdown">
|
||
<a class="nav-item nav-link dropdown-toggle mr-md-2" href="#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||
v4.3
|
||
</a>
|
||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="bd-versions">
|
||
<a class="dropdown-item active" href="/docs/4.3/">Latest (4.3.x)</a>
|
||
<a class="dropdown-item" href="https://getbootstrap.com/docs/4.2/">v4.2.1</a>
|
||
<a class="dropdown-item" href="https://getbootstrap.com/docs/4.0/">v4.0.0</a>
|
||
<div class="dropdown-divider"></div>
|
||
<a class="dropdown-item" href="https://v4-alpha.getbootstrap.com/">v4 Alpha 6</a>
|
||
<a class="dropdown-item" href="https://getbootstrap.com/docs/3.4/">v3.4.0</a>
|
||
<a class="dropdown-item" href="https://getbootstrap.com/docs/3.3/">v3.3.7</a>
|
||
<a class="dropdown-item" href="https://getbootstrap.com/2.3.2/">v2.3.2</a>
|
||
<div class="dropdown-divider"></div>
|
||
<a class="dropdown-item" href="/docs/versions/">All versions</a>
|
||
</div>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link p-2" href="https://github.com/twbs/bootstrap" target="_blank" rel="noopener" aria-label="GitHub"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 499.36" role="img" focusable="false"><title>GitHub</title><path fill="currentColor" fill-rule="evenodd" d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z"/></svg></a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link p-2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener" aria-label="Twitter"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 416.32" role="img" focusable="false"><title>Twitter</title><path fill="currentColor" d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92"/></svg></a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link p-2" href="https://bootstrap-slack.herokuapp.com/" target="_blank" rel="noopener" aria-label="Slack"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 512" role="img" focusable="false"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path fill="currentColor" d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z"/></svg></a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link p-2" href="https://opencollective.com/bootstrap/" target="_blank" rel="noopener" aria-label="Open Collective"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" fill-rule="evenodd" class="navbar-nav-svg" viewBox="0 0 40 41" role="img" focusable="false"><title>Open Collective</title><path fill-opacity=".4" d="M32.8 21c0 2.4-.8 4.9-2 6.9l5.1 5.1c2.5-3.4 4.1-7.6 4.1-12 0-4.6-1.6-8.8-4-12.2L30.7 14c1.2 2 2 4.3 2 7z"/><path d="M20 33.7a12.8 12.8 0 0 1 0-25.6c2.6 0 5 .7 7 2.1L32 5a20 20 0 1 0 .1 31.9l-5-5.2a13 13 0 0 1-7 2z"/></svg></a>
|
||
</li>
|
||
</ul>
|
||
|
||
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.3/getting-started/download/">Download</a>
|
||
</header>
|
||
|
||
|
||
<div class="container-fluid">
|
||
<div class="row flex-xl-nowrap">
|
||
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
|
||
<form class="bd-search d-flex align-items-center">
|
||
<input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off" data-docs-version="4.3">
|
||
<button class="btn btn-link bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"/></svg></button>
|
||
</form>
|
||
|
||
<nav class="collapse bd-links" id="bd-docs-nav"><div class="bd-toc-item">
|
||
<a class="bd-toc-link" href="/docs/4.3/getting-started/introduction/">
|
||
Getting started
|
||
</a>
|
||
|
||
<ul class="nav bd-sidenav"><li>
|
||
<a href="/docs/4.3/getting-started/introduction/">
|
||
Introduction
|
||
</a>
|
||
</li><li>
|
||
<a href="/docs/4.3/getting-started/download/">
|
||
Download
|
||
</a>
|
||
</li><li>
|
||
<a href="/docs/4.3/getting-started/contents/">
|
||
Contents
|
||
</a>
|
||
</li><li>
|
||
<a href="/docs/4.3/getting-started/browsers-devices/">
|
||
Browsers & devices
|
||
</a>
|
||
</li><li>
|
||
<a href="/docs/4.3/getting-started/javascript/">
|
||
JavaScript
|
||
</a>
|
||
</li><li>
|
||
<a href="/docs/4.3/getting-started/theming/">
|
||
Theming
|
||
</a>
|
||
</li><li>
|
||
<a href="/docs/4.3/getting-started/build-tools/">
|
||
Build tools
|
||
</a>
|
||
</li><li>
|
||
<a href="/docs/4.3/getting-started/webpack/">
|
||
Webpack
|
||
</a>
|
||
</li><li>
|
||
<a href="/docs/4.3/getting-started/accessibility/">
|
||
Accessibility
|
||
</a>
|
||
</li></ul>
|
||
</div><div class="bd-toc-item">
|
||
<a class="bd-toc-link" href="/docs/4.3/layout/overview/">
|
||
Layout
|
||
</a>
|
||
|
||
<ul class="nav bd-sidenav"><li>
|
||
<a href="/docs/4.3/layout/overview/">
|
||
Overview
|
||
</a>
|
||
</li><li>
|
||
<a href="/docs/4.3/layout/grid/">
|
||
Grid
|
||
</a>
|
||
</li><li>
|
||
<a href="/docs/4.3/layout/utilities-for-layout/">
|
||
Utilities for layout
|
||
</a>
|
||
</li></ul>
|
||
</div><div class="bd-toc-item">
|
||
<a class="bd-toc-link" href="/docs/4.3/content/reboot/">
|
||
Content
|
||
</a>
|
||
|
||
<ul class="nav bd-sidenav"><li>
|
||
<a href="/docs/4.3/content/reboot/">
|
||
Reboot
|
||
</a>
|
||
</li><li>
|
||
<a href="/docs/4.3/content/typography/">
|
||
Typography
|
||
</a>
|
||
</li><li>
|
||
<a href="/docs/4.3/content/code/">
|
||
Code
|
||
</a>
|
||
</li><li>
|
||
<a href="/docs/4.3/content/images/">
|
||
Images
|
||
</a>
|
||
</li><li>
|
||
<a href="/docs/4.3/content/tables/">
|
||
Tables
|
||
</a>
|
||
</li><li>
|
||
<a href="/docs/4.3/content/figures/">
|
||
Figures
|
||
</a>
|
||
</li></ul>
|
||
</div><div class="bd-toc-item">
|
||
<a class="bd-toc-link" href="/docs/4.3/components/alerts/">
|
||
Components
|
||
</a>
|
||
|
||
<ul class="nav bd-sidenav"><li>
|
||
<a href="/docs/4.3/components/alerts/">
|
||
Alerts
|
||
</a>
|
||
</li><li>
|
||
<a href="/docs/4.3/components/badge/">
|
||
Badge
|
||
</a>
|
||
</li><li>
|
||
<a href="/docs/4.3/components/breadcrumb/">
|
||
Breadcrumb
|
||
</a>
|
||
</li><li>
|
||
<a href="/docs/4.3/components/buttons/">
|
||
Buttons
|
||
</a>
|
||
</li><li>
|
||
<a href="/docs/4.3/components/button-group/">
|
||
Button group
|
||
</a>
|
||
</li><li>
|
||
<a href="/docs/4.3/components/card/">
|
||
Card
|
||
</a>
|
||
</li><li>
|
||
<a href="/docs/4.3/components/carousel/">
|
||
Carousel
|
||
</a>
|
||
</li><li>
|
||
<a href="/docs/4.3/components/collapse/">
|
||
Collapse
|
||
</a>
|
||
</li><li>
|
||
<a href="/docs/4.3/components/dropdowns/">
|
||
Dropdowns
|
||
</a>
|
||
</li><li>
|
||
<a href="/docs/4.3/components/forms/">
|
||
Forms
|
||
</a>
|
||
</li><li>
|
||
<a href="/docs/4.3/components/input-group/">
|
||
Input group
|
||
</a>
|
||
</li><li>
|
||
<a href="/docs/4.3/components/jumbotron/">
|
||
Jumbotron
|
||
</a>
|
||
</li><li>
|
||
<a href="/docs/4.3/components/list-group/">
|
||
List group
|
||
</a>
|
||
</li><li>
|
||
<a href="/docs/4.3/components/media-object/">
|
||
Media object
|
||
</a>
|
||
</li><li>
|
||
<a href="/docs/4.3/components/modal/">
|
||
Modal
|
||
</a>
|
||
</li><li>
|
||
<a href="/docs/4.3/components/navs/">
|
||
Navs
|
||
</a>
|
||
</li><li>
|
||
<a href="/docs/4.3/components/navbar/">
|
||
Navbar
|
||
</a>
|
||
</li><li>
|
||
<a href="/docs/4.3/components/pagination/">
|
||
Pagination
|
||
</a>
|
||
</li><li>
|
||
<a href="/docs/4.3/components/popovers/">
|
||
Popovers
|
||
</a>
|
||
</li><li>
|
||
<a href="/docs/4.3/components/progress/">
|
||
Progress
|
||
</a>
|
||
</li><li>
|
||
<a href="/docs/4.3/components/scrollspy/">
|
||
Scrollspy
|
||
</a>
|
||
</li><li>
|
||
<a href="/docs/4.3/components/spinners/">
|
||
Spinners
|
||
</a>
|
||
</li><li>
|
||
<a href="/docs/4.3/components/toasts/">
|
||
Toasts
|
||
</a>
|
||
</li><li>
|
||
<a href="/docs/4.3/components/tooltips/">
|
||
Tooltips
|
||
</a>
|
||
</li></ul>
|
||
</div><div class="bd-toc-item active">
|
||
<a class="bd-toc-link" href="/docs/4.3/utilities/borders/">
|
||
Utilities
|
||
</a>
|
||
|
||
<ul class="nav bd-sidenav"><li>
|
||
<a href="/docs/4.3/utilities/borders/">
|
||
Borders
|
||
</a>
|
||
</li><li>
|
||
<a href="/docs/4.3/utilities/clearfix/">
|
||
Clearfix
|
||
</a>
|
||
</li><li>
|
||
<a href="/docs/4.3/utilities/close-icon/">
|
||
Close icon
|
||
</a>
|
||
</li><li>
|
||
<a href="/docs/4.3/utilities/colors/">
|
||
Colors
|
||
</a>
|
||
</li><li>
|
||
<a href="/docs/4.3/utilities/display/">
|
||
Display
|
||
</a>
|
||
</li><li>
|
||
<a href="/docs/4.3/utilities/embed/">
|
||
Embed
|
||
</a>
|
||
</li><li>
|
||
<a href="/docs/4.3/utilities/flex/">
|
||
Flex
|
||
</a>
|
||
</li><li>
|
||
<a href="/docs/4.3/utilities/float/">
|
||
Float
|
||
</a>
|
||
</li><li>
|
||
<a href="/docs/4.3/utilities/image-replacement/">
|
||
Image replacement
|
||
</a>
|
||
</li><li>
|
||
<a href="/docs/4.3/utilities/overflow/">
|
||
Overflow
|
||
</a>
|
||
</li><li>
|
||
<a href="/docs/4.3/utilities/position/">
|
||
Position
|
||
</a>
|
||
</li><li>
|
||
<a href="/docs/4.3/utilities/screen-readers/">
|
||
Screen readers
|
||
</a>
|
||
</li><li>
|
||
<a href="/docs/4.3/utilities/shadows/">
|
||
Shadows
|
||
</a>
|
||
</li><li>
|
||
<a href="/docs/4.3/utilities/sizing/">
|
||
Sizing
|
||
</a>
|
||
</li><li>
|
||
<a href="/docs/4.3/utilities/spacing/">
|
||
Spacing
|
||
</a>
|
||
</li><li class="active bd-sidenav-active">
|
||
<a href="/docs/4.3/utilities/stretched-link/">
|
||
Stretched link
|
||
</a>
|
||
</li><li>
|
||
<a href="/docs/4.3/utilities/text/">
|
||
Text
|
||
</a>
|
||
</li><li>
|
||
<a href="/docs/4.3/utilities/vertical-align/">
|
||
Vertical align
|
||
</a>
|
||
</li><li>
|
||
<a href="/docs/4.3/utilities/visibility/">
|
||
Visibility
|
||
</a>
|
||
</li></ul>
|
||
</div><div class="bd-toc-item">
|
||
<a class="bd-toc-link" href="/docs/4.3/extend/approach/">
|
||
Extend
|
||
</a>
|
||
|
||
<ul class="nav bd-sidenav"><li>
|
||
<a href="/docs/4.3/extend/approach/">
|
||
Approach
|
||
</a>
|
||
</li><li>
|
||
<a href="/docs/4.3/extend/icons/">
|
||
Icons
|
||
</a>
|
||
</li></ul>
|
||
</div><div class="bd-toc-item">
|
||
<a class="bd-toc-link" href="/docs/4.3/migration/">
|
||
Migration
|
||
</a>
|
||
|
||
<ul class="nav bd-sidenav"></ul>
|
||
</div><div class="bd-toc-item">
|
||
<a class="bd-toc-link" href="/docs/4.3/about/overview/">
|
||
About
|
||
</a>
|
||
|
||
<ul class="nav bd-sidenav"><li>
|
||
<a href="/docs/4.3/about/overview/">
|
||
Overview
|
||
</a>
|
||
</li><li>
|
||
<a href="/docs/4.3/about/team/">
|
||
Team
|
||
</a>
|
||
</li><li>
|
||
<a href="/docs/4.3/about/brand/">
|
||
Brand
|
||
</a>
|
||
</li><li>
|
||
<a href="/docs/4.3/about/license/">
|
||
License
|
||
</a>
|
||
</li><li>
|
||
<a href="/docs/4.3/about/translations/">
|
||
Translations
|
||
</a>
|
||
</li></ul>
|
||
</div></nav>
|
||
|
||
</div>
|
||
|
||
|
||
|
||
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
|
||
<h1 class="bd-title" id="content">Stretched link</h1>
|
||
<p class="bd-lead">Make any HTML element or Bootstrap component clickable by “stretching” a nested link via CSS.</p>
|
||
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||
|
||
<p>Add <code class="highlighter-rouge">.stretched-link</code> to a link to make its <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block">containing block</a> clickable via a <code class="highlighter-rouge">::after</code> pseudo element. In most cases, this means that an element with <code class="highlighter-rouge">position: relative;</code> that contains a link with the <code class="highlighter-rouge">.stretched-link</code> class is clickable.</p>
|
||
|
||
<p>Cards have <code class="highlighter-rouge">position: relative</code> by default in Bootstrap, so in this case you can safely add the <code class="highlighter-rouge">.stretched-link</code> class to a link in the card without any other HTML changes.</p>
|
||
|
||
<p>Multiple links and tap targets are not recommended with stretched links. However, some <code class="highlighter-rouge">position</code> and <code class="highlighter-rouge">z-index</code> styles can help should this be required.</p>
|
||
|
||
<div class="bd-example">
|
||
<div class="card" style="width: 18rem;">
|
||
<svg class="bd-placeholder-img card-img-top" width="100%" height="180" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Card image cap"><title>Card image cap</title><rect width="100%" height="100%" fill="#868e96" /></svg>
|
||
<div class="card-body">
|
||
<h5 class="card-title">Card with stretched link</h5>
|
||
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
||
<a href="#" class="btn btn-primary stretched-link">Go somewhere</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"card"</span> <span class="na">style=</span><span class="s">"width: 18rem;"</span><span class="nt">></span>
|
||
<span class="nt"><img</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">class=</span><span class="s">"card-img-top"</span> <span class="na">alt=</span><span class="s">"..."</span><span class="nt">></span>
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">></span>
|
||
<span class="nt"><h5</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">></span>Card with stretched link<span class="nt"></h5></span>
|
||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"card-text"</span><span class="nt">></span>Some quick example text to build on the card title and make up the bulk of the card's content.<span class="nt"></p></span>
|
||
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-primary stretched-link"</span><span class="nt">></span>Go somewhere<span class="nt"></a></span>
|
||
<span class="nt"></div></span>
|
||
<span class="nt"></div></span></code></pre></figure>
|
||
|
||
<p>Media objects do not have <code class="highlighter-rouge">position: relative</code> by default, so we need to add the <code class="highlighter-rouge">.position-relative</code> here to prevent the link from stretching outside the media object.</p>
|
||
|
||
<div class="bd-example">
|
||
<div class="media position-relative">
|
||
<svg class="bd-placeholder-img mr-3" width="144" height="144" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Generic placeholder image"><title>Generic placeholder image</title><rect width="100%" height="100%" fill="#868e96" /></svg>
|
||
<div class="media-body">
|
||
<h5 class="mt-0">Media with stretched link</h5>
|
||
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
|
||
<a href="#" class="stretched-link">Go somewhere</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"media position-relative"</span><span class="nt">></span>
|
||
<span class="nt"><img</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">class=</span><span class="s">"mr-3"</span> <span class="na">alt=</span><span class="s">"..."</span><span class="nt">></span>
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"media-body"</span><span class="nt">></span>
|
||
<span class="nt"><h5</span> <span class="na">class=</span><span class="s">"mt-0"</span><span class="nt">></span>Media with stretched link<span class="nt"></h5></span>
|
||
<span class="nt"><p></span>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.<span class="nt"></p></span>
|
||
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"stretched-link"</span><span class="nt">></span>Go somewhere<span class="nt"></a></span>
|
||
<span class="nt"></div></span>
|
||
<span class="nt"></div></span></code></pre></figure>
|
||
|
||
<p>Columns are <code class="highlighter-rouge">position: relative</code> by default, so clickable columns only require the <code class="highlighter-rouge">.stretched-link</code> class on a link. However, stretching a link over an entire <code class="highlighter-rouge">.row</code> requires <code class="highlighter-rouge">.position-static</code> on the column and <code class="highlighter-rouge">.position-relative</code> on the row.</p>
|
||
|
||
<div class="bd-example">
|
||
<div class="row no-gutters bg-light position-relative">
|
||
<div class="col-md-6 mb-md-0 p-md-4">
|
||
<svg class="bd-placeholder-img w-100" width="100%" height="200" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Generic placeholder image"><title>Generic placeholder image</title><rect width="100%" height="100%" fill="#868e96" /></svg>
|
||
</div>
|
||
<div class="col-md-6 position-static p-4 pl-md-0">
|
||
<h5 class="mt-0">Columns with stretched link</h5>
|
||
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
|
||
<a href="#" class="stretched-link">Go somewhere</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"row no-gutters bg-light position-relative"</span><span class="nt">></span>
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-md-6 mb-md-0 p-md-4"</span><span class="nt">></span>
|
||
<span class="nt"><img</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">class=</span><span class="s">"w-100"</span> <span class="na">alt=</span><span class="s">"..."</span><span class="nt">></span>
|
||
<span class="nt"></div></span>
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-md-6 position-static p-4 pl-md-0"</span><span class="nt">></span>
|
||
<span class="nt"><h5</span> <span class="na">class=</span><span class="s">"mt-0"</span><span class="nt">></span>Columns with stretched link<span class="nt"></h5></span>
|
||
<span class="nt"><p></span>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.<span class="nt"></p></span>
|
||
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"stretched-link"</span><span class="nt">></span>Go somewhere<span class="nt"></a></span>
|
||
<span class="nt"></div></span>
|
||
<span class="nt"></div></span></code></pre></figure>
|
||
|
||
<h2 id="identifying-the-containing-block">Identifying the containing block</h2>
|
||
|
||
<p>If the stretched link doesn’t seem to work, the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#Identifying_the_containing_block">containing block</a> will probably be the cause. The following CSS properties will make an element the containing block:</p>
|
||
|
||
<ul>
|
||
<li>A <code class="highlighter-rouge">position</code> value other than <code class="highlighter-rouge">static</code></li>
|
||
<li>A <code class="highlighter-rouge">transform</code> or <code class="highlighter-rouge">perspective</code> value other than <code class="highlighter-rouge">none</code></li>
|
||
<li>A <code class="highlighter-rouge">will-change</code> value of <code class="highlighter-rouge">transform</code> or <code class="highlighter-rouge">perspective</code></li>
|
||
<li>A <code class="highlighter-rouge">filter</code> value other than <code class="highlighter-rouge">none</code> or a <code class="highlighter-rouge">will-change</code> value of <code class="highlighter-rouge">filter</code> (only works on Firefox)</li>
|
||
</ul>
|
||
|
||
<div class="bd-example">
|
||
<div class="card" style="width: 18rem;">
|
||
<svg class="bd-placeholder-img card-img-top" width="100%" height="180" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Card image cap"><title>Card image cap</title><rect width="100%" height="100%" fill="#868e96" /></svg>
|
||
<div class="card-body">
|
||
<h5 class="card-title">Card with stretched links</h5>
|
||
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
||
<p class="card-text">
|
||
<a href="#" class="stretched-link text-danger" style="position: relative;">Stretched link will not work here, because <code>position: relative</code> is added to the link</a>
|
||
</p>
|
||
<p class="card-text bg-light" style="transform: rotate(0);">
|
||
This <a href="#" class="text-warning stretched-link">stretched link</a> will only be spread over the <code>p</code>-tag, because a transform is applied to it.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"card"</span> <span class="na">style=</span><span class="s">"width: 18rem;"</span><span class="nt">></span>
|
||
<span class="nt"><img</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">class=</span><span class="s">"card-img-top"</span> <span class="na">alt=</span><span class="s">"..."</span><span class="nt">></span>
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">></span>
|
||
<span class="nt"><h5</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">></span>Card with stretched links<span class="nt"></h5></span>
|
||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"card-text"</span><span class="nt">></span>Some quick example text to build on the card title and make up the bulk of the card's content.<span class="nt"></p></span>
|
||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"card-text"</span><span class="nt">></span>
|
||
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"stretched-link text-danger"</span> <span class="na">style=</span><span class="s">"position: relative;"</span><span class="nt">></span>Stretched link will not work here, because <span class="nt"><code></span>position: relative<span class="nt"></code></span> is added to the link<span class="nt"></a></span>
|
||
<span class="nt"></p></span>
|
||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"card-text bg-light"</span> <span class="na">style=</span><span class="s">"transform: rotate(0);"</span><span class="nt">></span>
|
||
This <span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"text-warning stretched-link"</span><span class="nt">></span>stretched link<span class="nt"></a></span> will only be spread over the <span class="nt"><code></span>p<span class="nt"></code></span>-tag, because a transform is applied to it.
|
||
<span class="nt"></p></span>
|
||
<span class="nt"></div></span>
|
||
<span class="nt"></div></span></code></pre></figure>
|
||
|
||
|
||
</main>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
|
||
<script>window.jQuery || document.write('<script src="/docs/4.3/assets/js/vendor/jquery-slim.min.js"><\/script>')</script><script src="/docs/4.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-VoPFvGr9GxhDT3n8vqqZ46twP5lgex+raTCfICQy73NLhN7ZqSfCtfSn4mLA2EFA" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.3/assets/js/docs.min.js"></script>
|
||
</body>
|
||
</html>
|