Bootstrap 5 cursor pointer class name

Text selection

Change the way in which the content is selected when the user interacts with it.

This paragraph will be entirely selected when clicked by the user.

This paragraph has default select behavior.

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

<p class="user-select-all">This paragraph will be entirely selected when clicked by the user.p>
<p class="user-select-auto">This paragraph has default select behavior.p>
<p class="user-select-none">This paragraph will not be selectable when clicked by the user.p>

Pointer events

Bootstrap provides .pe-none and .pe-auto classes to prevent or add element interactions.

This link can not be clicked.

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

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.

<p><a href="#" class="pe-none" tabindex="-1" aria-disabled="true">This linka> can not be clicked.p>
<p><a href="#" class="pe-auto">This linka> can be clicked (this is default behavior).p>
<p class="pe-none"><a href="#" tabindex="-1" aria-disabled="true">This linka> can not be clicked because the <code>pointer-eventscode> property is inherited from its parent. However, <a href="#" class="pe-auto">this linka> has a <code>pe-autocode> class and can be clicked.p>

The .pe-none class (and the pointer-events CSS property it sets) only prevents interactions with a pointer (mouse, stylus, touch). Links and controls with .pe-none are, by default, still focusable and actionable for keyboard users. To ensure that they are completely neutralized even for keyboard users, you may need to add further attributes such as tabindex="-1" (to prevent them from receiving keyboard focus) and aria-disabled="true" (to convey the fact they are effectively disabled to assistive technologies), and possibly use JavaScript to completely prevent them from being actionable. For form controls, consider using the disabled HTML attribute instead.

Sass

Utilities API

Interaction utilities are declared in our utilities API in scss/_utilities.scss. Learn how to use the utilities API.

    "user-select": (
      property: user-select,
      values: all auto none
    ),
    "pointer-events": (
      property: pointer-events,
      class: pe,
      values: none auto,
    ),
    

Is there any CSS class or attribute for pointer:cursor in Bootstrap 4 specially for button or link?

Sample Button

asked Nov 13, 2017 at 16:34

UPDATE for Bootstrap 4 stable

The cursor: pointer; rule has been restored, so buttons will now by default have the cursor on hover:

Sample Button

No, there isn't. You need to make some custom CSS for this.

If you just need a link that looks like a button (with pointer), use this:

Sample Button

TwiN

3,2561 gold badge19 silver badges31 bronze badges

answered Nov 13, 2017 at 16:45

KloovenKlooven

3,7901 gold badge22 silver badges38 bronze badges

2

Unfortunately there is no such class in Bootstrap as of now (27th Jan 2019).

I scanned through bootstrap code and discovered following classes that use cursor: pointer. Seems like it is not a good idea to use any of them specifically for cursor: pointer.

summary {
  display: list-item;
  cursor: pointer;
}
.btn:not(:disabled):not(.disabled) {
  cursor: pointer;
}
.custom-range::-webkit-slider-runnable-track {
  width: 100%;
  height: 0.5rem;
  color: transparent;
  cursor: pointer;
  background-color: #dee2e6;
  border-color: transparent;
  border-radius: 1rem;
}
.custom-range::-moz-range-track {
  width: 100%;
  height: 0.5rem;
  color: transparent;
  cursor: pointer;
  background-color: #dee2e6;
  border-color: transparent;
  border-radius: 1rem;
}
.custom-range::-ms-track {
  width: 100%;
  height: 0.5rem;
  color: transparent;
  cursor: pointer;
  background-color: transparent;
  border-color: transparent;
  border-width: 0.5rem;
}
.navbar-toggler:not(:disabled):not(.disabled) {
  cursor: pointer;
}
.page-link:not(:disabled):not(.disabled) {
  cursor: pointer;
}
.close:not(:disabled):not(.disabled) {
  cursor: pointer;
}
.carousel-indicators li {
  box-sizing: content-box;
  -ms-flex: 0 1 auto;
  flex: 0 1 auto;
  width: 30px;
  height: 3px;
  margin-right: 3px;
  margin-left: 3px;
  text-indent: -999px;
  cursor: pointer;
  background-color: #fff;
  background-clip: padding-box;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  opacity: .5;
  transition: opacity 0.6s ease;
}

The only OBVIOUS SOLUTION:

What I would suggest you is just to create a class in your common css as cursor-pointer. That is simple and elegant as of now.

.cursor-pointer{
  cursor: pointer;
}

Hover on  me

answered Jan 27, 2019 at 18:21

Hari DasHari Das

9,4887 gold badges53 silver badges59 bronze badges

1

You can assign "button" to role attribute of any html tag/element to make pointer over it. i.e

answered Dec 29, 2020 at 9:08

Afzal AliAfzal Ali

6596 silver badges20 bronze badges

1

I usually just add the following custom CSS, the W3School example prepended with cursor-

.cursor-alias {cursor: alias;}
.cursor-all-scroll {cursor: all-scroll;}
.cursor-auto {cursor: auto;}
.cursor-cell {cursor: cell;}
.cursor-context-menu {cursor: context-menu;}
.cursor-col-resize {cursor: col-resize;}
.cursor-copy {cursor: copy;}
.cursor-crosshair {cursor: crosshair;}
.cursor-default {cursor: default;}
.cursor-e-resize {cursor: e-resize;}
.cursor-ew-resize {cursor: ew-resize;}
.cursor-grab {cursor: -webkit-grab; cursor: grab;}
.cursor-grabbing {cursor: -webkit-grabbing; cursor: grabbing;}
.cursor-help {cursor: help;}
.cursor-move {cursor: move;}
.cursor-n-resize {cursor: n-resize;}
.cursor-ne-resize {cursor: ne-resize;}
.cursor-nesw-resize {cursor: nesw-resize;}
.cursor-ns-resize {cursor: ns-resize;}
.cursor-nw-resize {cursor: nw-resize;}
.cursor-nwse-resize {cursor: nwse-resize;}
.cursor-no-drop {cursor: no-drop;}
.cursor-none {cursor: none;}
.cursor-not-allowed {cursor: not-allowed;}
.cursor-pointer {cursor: pointer;}
.cursor-progress {cursor: progress;}
.cursor-row-resize {cursor: row-resize;}
.cursor-s-resize {cursor: s-resize;}
.cursor-se-resize {cursor: se-resize;}
.cursor-sw-resize {cursor: sw-resize;}
.cursor-text {cursor: text;}
.cursor-w-resize {cursor: w-resize;}
.cursor-wait {cursor: wait;}
.cursor-zoom-in {cursor: zoom-in;}
.cursor-zoom-out {cursor: zoom-out;}

Sample Button

answered Sep 5, 2019 at 8:27

I don't have enough reputation to comment on the relevant answers, but to people reading this; adding .btn does not just add the pointer cursor but adds a lot of other styling as well. Which is great if it's a button and you want the bootstap button styling, but in other cases it would mess a lot up for other elements.

The best thing you can do, like Hari Das suggested, and which I also always do, is to add the following css:

.cursor-pointer {
  cursor: pointer;
}

After which you can add it to any element

 .. 

answered Jun 15, 2020 at 13:26

RickRick

1852 silver badges8 bronze badges

1

I tried and found out that if you add a class called btn you can get that hand or cursor icon if you hover over the mouse to that element. Try and see.

Example:

Hovering over must have mouse cursor set to hand or pointer!

Cheers!

answered Jun 28, 2019 at 6:09

0

Bootstrap 3 - Just adding the "btn" Class worked for me.

Without pointer cursor:

text

With pointer cursor:

text

answered Nov 17, 2019 at 19:33

0

Don't know when added but according to its doc there is btn-link

  
    
    
    

    
    

    
  
  
Click Me, Hover Me Link
  
 

Link

https://getbootstrap.com/docs/4.0/components/buttons/

btn-link

answered Mar 31, 2021 at 15:32

Davut GürbüzDavut Gürbüz

5,2504 gold badges45 silver badges80 bronze badges

There is no classes for that. But you can add inline style for your div or other elements like,

answered Jan 31, 2021 at 13:55

1

Try to use type = button Hover me

answered Sep 1 at 6:43

Not the answer you're looking for? Browse other questions tagged css twitter-bootstrap bootstrap-4 or ask your own question.

How do I change cursor pointer?

How do I change cursor to pointer in CSS?

What is a utility class in bootstrap?

What does cursor pointer do in CSS?