mirror of
https://github.com/twbs/bootstrap.git
synced 2025-01-09 02:46:15 +01:00
fc3f4b67d6
* Add dark mode to docs * Minor fix: missing space indentation * Minor fix: revert utilities/z-index added-in modification * Remove prev: and next: from doc because extracted to another PR * Use .bg-body-tertiary in all Utilities > Overflow examples * fix example * Fix up spacing examples * Update box-shadow Sass variables and utilities to auto-adjust to color modes * Remove unused docs class * Refactor form styles to use CSS variable for background images on .form-check and .form-switch * Fix docs selector * Rename shortcut for clarity * Heading consistency * Reintroduce missing 4th grid item in Utilities > Spacing example * Fix bundlewatch * .bd-callout* rendering is OK so removing comments in the code * Update scss/_utilities.scss Co-authored-by: Julien Déramond <julien.deramond@orange.com> * Fix gutters example styling * Fix text colors on background utils docs * redesign and fix up position marker example, which doesn't show nicely in darkmode but at least isn't broken * fix some color utils examples * Deprecate mixin notice * Deprecate notice for list-group-item-variant() mixin * Revamp new link CSS vars * Use map-keys in some each Sass files * Remove list-group-item-variant mixin ref in sass loop desc * Display CSS vars scoped to our built-in dark mode * Revert previous commit * Fix list group variant link * Fix typo * Remove imports of alert/list-group mixins in scss/_mixins.scss * Small formatting + comments removal in scss/_content.scss * Fix alert links colors * fix dropdown border-radius mixin * fix link color and underline again, this time using CSS var override for color var and fallback value for the underline * fix colors on docs navbar for dark mode * remove two changes * missing ref * another link underline fix, just use sass vars for link decoration for now * missing color bg docs, plus move dropdown override to scss * more changes from review * fix some examples, drop unused docs navbar styles, update docs navbar color mode to use mixin * Few fixes around type - Restored CSS variable for color on headings, this time with a fallback value - In conjunction, restored and wrapped the default CSS var with a null value check - Split headings and paragraphs docs in Reboot, elaborated on them * Restyle custom details > summary element in docs * Rewrite some migration docs * fix form checks * Fix up some navbar styling, tweak docs callout * Fix select images, mostly for validation styling * Clean up some migration notes, document some new form control CSS vars, mention new variables-dark in sass docs * Update site/content/docs/5.2/components/scrollspy.md Co-authored-by: Julien Déramond <julien.deramond@orange.com> * Apply suggestions from code review Co-authored-by: Julien Déramond <julien.deramond@orange.com> * mention form control css vars in migration guide * Tweak grid and flex docs background examples * clarify some docs * fix some more things Co-authored-by: Julien Déramond <juderamond@gmail.com> Co-authored-by: Julien Déramond <julien.deramond@orange.com>
75 lines
4.1 KiB
Markdown
75 lines
4.1 KiB
Markdown
---
|
|
layout: docs
|
|
title: Stretched link
|
|
description: Make any HTML element or Bootstrap component clickable by "stretching" a nested link via CSS.
|
|
group: helpers
|
|
---
|
|
|
|
Add `.stretched-link` to a link to make its [containing block](https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block) clickable via a `::after` pseudo element. In most cases, this means that an element with `position: relative;` that contains a link with the `.stretched-link` class is clickable. Please note given [how CSS `position` works](https://www.w3.org/TR/CSS21/visuren.html#propdef-position), `.stretched-link` cannot be mixed with most table elements.
|
|
|
|
Cards have `position: relative` by default in Bootstrap, so in this case you can safely add the `.stretched-link` class to a link in the card without any other HTML changes.
|
|
|
|
Multiple links and tap targets are not recommended with stretched links. However, some `position` and `z-index` styles can help should this be required.
|
|
|
|
{{< example >}}
|
|
<div class="card" style="width: 18rem;">
|
|
{{< placeholder width="100%" height="180" class="card-img-top" text="false" title="Card image cap" >}}
|
|
<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>
|
|
{{< /example >}}
|
|
|
|
Most custom components do not have `position: relative` by default, so we need to add the `.position-relative` here to prevent the link from stretching outside the parent element.
|
|
|
|
{{< example >}}
|
|
<div class="d-flex position-relative">
|
|
{{< placeholder width="144" height="144" class="flex-shrink-0 me-3" text="false" title="Generic placeholder image" >}}
|
|
<div>
|
|
<h5 class="mt-0">Custom component with stretched link</h5>
|
|
<p>This is some placeholder content for the custom component. It is intended to mimic what some real-world content would look like, and we're using it here to give the component a bit of body and size.</p>
|
|
<a href="#" class="stretched-link">Go somewhere</a>
|
|
</div>
|
|
</div>
|
|
{{< /example >}}
|
|
|
|
{{< example >}}
|
|
<div class="row g-0 bg-body-secondary position-relative">
|
|
<div class="col-md-6 mb-md-0 p-md-4">
|
|
{{< placeholder width="100%" height="200" class="w-100" text="false" title="Generic placeholder image" >}}
|
|
</div>
|
|
<div class="col-md-6 p-4 ps-md-0">
|
|
<h5 class="mt-0">Columns with stretched link</h5>
|
|
<p>Another instance of placeholder content for this other custom component. It is intended to mimic what some real-world content would look like, and we're using it here to give the component a bit of body and size.</p>
|
|
<a href="#" class="stretched-link">Go somewhere</a>
|
|
</div>
|
|
</div>
|
|
{{< /example >}}
|
|
|
|
## Identifying the containing block
|
|
|
|
If the stretched link doesn't seem to work, the [containing block](https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#Identifying_the_containing_block) will probably be the cause. The following CSS properties will make an element the containing block:
|
|
|
|
- A `position` value other than `static`
|
|
- A `transform` or `perspective` value other than `none`
|
|
- A `will-change` value of `transform` or `perspective`
|
|
- A `filter` value other than `none` or a `will-change` value of `filter` (only works on Firefox)
|
|
|
|
{{< example >}}
|
|
<div class="card" style="width: 18rem;">
|
|
{{< placeholder width="100%" height="180" class="card-img-top" text="false" title="Card image cap" >}}
|
|
<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>
|
|
{{< /example >}}
|