diff --git a/scss/_utilities.scss b/scss/_utilities.scss index dc3bd7238..1a85165dc 100644 --- a/scss/_utilities.scss +++ b/scss/_utilities.scss @@ -447,6 +447,11 @@ $utilities: map-merge( property: user-select, values: all auto none ), + "pointer-events": ( + property: pointer-events, + class: pe, + values: none auto, + ), "rounded": ( property: border-radius, class: rounded, diff --git a/site/content/docs/4.3/utilities/interactions.md b/site/content/docs/4.3/utilities/interactions.md index ac8dfb6ae..4c0c71f1b 100644 --- a/site/content/docs/4.3/utilities/interactions.md +++ b/site/content/docs/4.3/utilities/interactions.md @@ -15,3 +15,13 @@ Change the way in which the content is selected when the user interacts with it.

This paragraph has default select behavior.

This paragraph will not be selectable when clicked by the user.

{{< /example >}} + +## Pointer events + +Bootstrap provides `pe-none` and `pe-auto` classes to prevent or add element interactions. + +{{< example >}} +

This link can not be clicked.

+

This link can be clicked (this is default behaviour).

+

This link can not be clicked because the pointer-events property is inherited from its parent. However, this link has a pe-auto class and can be clicked.

+{{< /example >}}