Bootstrap Cursor Pointer CSS Class: Complete Guide to the Pointer Utility

Add the cursor-pointer class to any HTML element to display the hand pointer cursor in Bootstrap.

The cursor-pointer class in Bootstrap provides a simple utility for applying the CSS cursor: pointer property to any element. According to the twbs/bootstrap source code, this utility is generated from a dedicated SCSS partial that maps utility classes directly to cursor values. Whether you are building clickable cards, custom buttons, or interactive divs, this class ensures consistent pointer feedback across your interface.

How the Bootstrap Cursor Pointer Class Works

In scss/utilities/_cursor.scss, Bootstrap defines the .cursor-pointer rule that sets cursor: pointer; on any element receiving the class. The framework generates these utilities from a Sass map, compiling them into the distributed CSS files such as dist/css/bootstrap-utilities.css and dist/css/bootstrap-utilities.min.css.

By default, this utility is enabled through variables defined in scss/_variables.scss, which control the inclusion of cursor-related utilities in the final build.

Usage Examples for the Cursor Pointer Bootstrap Class

Apply the class to standard links, divs, spans, or custom components:

<!-- A link styled as a button -->
<a href="#" class="btn btn-primary cursor-pointer">
  Save changes
</a>

<!-- A clickable card container -->
<div class="card cursor-pointer" onclick="handleCardClick()">
  <div class="card-body">
    Clickable card content
  </div>
</div>

<!-- Inline text element -->
<span class="cursor-pointer">Hover over me</span>

Each element above renders with the hand cursor on hover, indicating interactivity to users.

Source Files and Build Configuration

The cursor pointer Bootstrap class relies on specific source files in the twbs/bootstrap repository:

• scss/utilities/_cursor.scss — Defines the .cursor-pointer rule and other cursor utilities via Sass maps
• dist/css/bootstrap-utilities.css — Compiled production CSS containing the .cursor-pointer class
• scss/_variables.scss — Controls whether cursor utilities are enabled in custom builds

Summary

• The cursor-pointer class applies cursor: pointer to any element
• Defined in scss/utilities/_cursor.scss within the twbs/bootstrap repository
• Available in compiled form via bootstrap-utilities.css
• Controlled by variables in scss/_variables.scss for custom builds

Frequently Asked Questions

What is the exact CSS class for a pointer cursor in Bootstrap?

Add cursor-pointer to your HTML element. This class sets the CSS property cursor: pointer, displaying the hand cursor on hover according to the implementation in scss/utilities/_cursor.scss.

Where is the cursor-pointer class defined in Bootstrap's source code?

The class is generated in scss/utilities/_cursor.scss, which contains the Sass maps and utility API calls that create the .cursor-pointer rule during compilation.

Can I disable the cursor utilities in Bootstrap?

Yes. The availability of cursor utilities is controlled by Sass variables in scss/_variables.scss. You can override these variables before compilation to exclude cursor utilities from your custom build.

Do I need to import the entire Bootstrap CSS to use cursor-pointer?

No. If you use the modular distribution, you can import only bootstrap-utilities.css (or the minified version), which contains the .cursor-pointer class without requiring the full component styles.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}