CSS class for pointer cursor

Question

Is there any CSS class or attribute for pointer cursor in Bootstrap 4 specially for button or link   x000D   x000D   lt link href  https   maxcdn bootstrapcdn com bootstrap 4 0 0-beta 2 css bootstrap min css  rel  stylesheet   gt   lt button type  button  class  btn btn-success  gt Sample Button lt  button gt  x000D   x000D   x000D

User · Answer

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.

_x000D_

.cursor-pointer{_x000D_
  cursor: pointer;_x000D_
}

_x000D_

<div class="cursor-pointer">Hover on  me</div>

_x000D_

User · Answer

As of June 2020  adding role  button  to any HTML tag would add cursor   pointer  to the element styling    lt span role  button  gt Non-button element button lt  span gt    Official discussion on this feature - https   github com twbs bootstrap issues 23709  Documentation link - https   getbootstrap com docs 4 5 content reboot  pointers-on-buttons

User · Answer

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    lt span class  btn  gt Hovering over must have mouse cursor set to hand or pointer  lt  span gt    Cheers

User · Answer

I usually just add the following custom CSS  the W3School example prepended with cursor-   x000D   x000D   cursor-alias  cursor  alias   x000D   cursor-all-scroll  cursor  all-scroll   x000D   cursor-auto  cursor  auto   x000D   cursor-cell  cursor  cell   x000D   cursor-context-menu  cursor  context-menu   x000D   cursor-col-resize  cursor  col-resize   x000D   cursor-copy  cursor  copy   x000D   cursor-crosshair  cursor  crosshair   x000D   cursor-default  cursor  default   x000D   cursor-e-resize  cursor  e-resize   x000D   cursor-ew-resize  cursor  ew-resize   x000D   cursor-grab  cursor  -webkit-grab  cursor  grab   x000D   cursor-grabbing  cursor  -webkit-grabbing  cursor  grabbing   x000D   cursor-help  cursor  help   x000D   cursor-move  cursor  move   x000D   cursor-n-resize  cursor  n-resize   x000D   cursor-ne-resize  cursor  ne-resize   x000D   cursor-nesw-resize  cursor  nesw-resize   x000D   cursor-ns-resize  cursor  ns-resize   x000D   cursor-nw-resize  cursor  nw-resize   x000D   cursor-nwse-resize  cursor  nwse-resize   x000D   cursor-no-drop  cursor  no-drop   x000D   cursor-none  cursor  none   x000D   cursor-not-allowed  cursor  not-allowed   x000D   cursor-pointer  cursor  pointer   x000D   cursor-progress  cursor  progress   x000D   cursor-row-resize  cursor  row-resize   x000D   cursor-s-resize  cursor  s-resize   x000D   cursor-se-resize  cursor  se-resize   x000D   cursor-sw-resize  cursor  sw-resize   x000D   cursor-text  cursor  text   x000D   cursor-w-resize  cursor  w-resize   x000D   cursor-wait  cursor  wait   x000D   cursor-zoom-in  cursor  zoom-in   x000D   cursor-zoom-out  cursor  zoom-out   x000D   lt link href  https   maxcdn bootstrapcdn com bootstrap 4 0 0-beta 2 css bootstrap min css  rel  stylesheet   gt  x000D   lt button type  button  class  btn btn-success cursor-pointer  gt Sample Button lt  button gt  x000D   x000D   x000D

User · Answer

UPDATE for Bootstrap 4 stable  The cursor  pointer  rule has been restored  so buttons will now by default have the cursor on hover    x000D   x000D   lt link rel  stylesheet  href  https   maxcdn bootstrapcdn com bootstrap 4 0 0 css bootstrap min css  gt  x000D   lt button type  button  class  btn btn-success  gt Sample Button lt  button gt  x000D   x000D   x000D      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    x000D   x000D   lt link rel  stylesheet  href  https   maxcdn bootstrapcdn com bootstrap 4 0 0-beta 2 css bootstrap min css  gt  x000D   lt a class  btn btn-success  href     role  button  gt Sample Button lt  a gt  x000D   x000D   x000D

User · Answer

There is no classes for that  But you can add inline style for your div or other elements like   lt div class  quot  quot  style  quot cursor  pointer  quot  gt

User · Answer

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  lt div class  quot cursor-pointer quot  gt      lt  div gt

User · Answer

You can assign  quot button quot  to role attribute of any html tag element to make pointer over it  i e  lt html-element role  quot button quot    gt

User · Answer

Bootstrap 3 - Just adding the  btn  Class worked for me   Without pointer cursor    lt span class  label label-success  gt text lt  span gt    With pointer cursor    lt span class  label label-success btn  gt text lt  span gt

[css] CSS class for pointer cursor

Examples related to css

Examples related to twitter-bootstrap

Examples related to bootstrap-4