From f3924f503205b04c69a090ca1f776558e7b9753e Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Sat, 11 Apr 2020 13:43:32 -0700
Subject: [PATCH] v5: Add cursor util

---
 scss/_utilities.scss                            | 5 +++++
 site/content/docs/4.3/utilities/interactions.md | 8 ++++++++
 2 files changed, 13 insertions(+)

diff --git a/scss/_utilities.scss b/scss/_utilities.scss
index c02eec7b3e46..9e5dae2ed203 100644
--- a/scss/_utilities.scss
+++ b/scss/_utilities.scss
@@ -443,6 +443,11 @@ $utilities: map-merge(
       class: font,
       values: (monospace: var(--font-family-monospace))
     ),
+    "cursor": (
+      property: cursor,
+      class: cursor,
+      values: pointer
+    ),
     "user-select": (
       property: user-select,
       values: all auto none
diff --git a/site/content/docs/4.3/utilities/interactions.md b/site/content/docs/4.3/utilities/interactions.md
index 4c0c71f1b595..b97f2070583f 100644
--- a/site/content/docs/4.3/utilities/interactions.md
+++ b/site/content/docs/4.3/utilities/interactions.md
@@ -16,6 +16,14 @@ Change the way in which the content is selected when the user interacts with it.
 <p class="user-select-none">This paragraph will not be selectable when clicked by the user.</p>
 {{< /example >}}
 
+## Cursors
+
+Change the cursor from a default value to `pointer` with our built-in utility.
+
+{{< example >}}
+<span role="button" class="cursor-pointer">Non-button element button</span>
+{{< /example >}}
+
 ## Pointer events
 
 Bootstrap provides `pe-none` and `pe-auto` classes to prevent or add element interactions.