Documentation
Cursors
You can use different cursors to reflect the intended user interaction with particular elements of an interface. The cursor will change when a user hovers over a given element to indicate the action which can be performed.
Cursor utilities
Use one of the available cursor utilities depending on the action you want to indicate.
.cursor-auto- the cursor style depends on what’s inside a given element.cursor-pointer- a pointing cursor, used to show that an element is clickable.cursor-move- a cursor which shows that a given element can be moved.cursor-not-allowed- a cursor which shows that a user is not allowed to perform an action on an element.cursor-zoom-in- a cursor which shows that a user can zoom in.cursor-zoom-out- a cursor which shows that a user can zoom out.cursor-default- the default cursor.cursor-none- no cursor.cursor-help- a cursor which shows that help information is available.cursor-progress- a cursor which shows that an action is in progress.cursor-wait- a cursor which shows that a user cannot interact with the element because it is busy.cursor-text- a cursor which shows that a user can type.cursor-v-text- a cursor which shows that a user can type in a vertical text input.cursor-grab- a cursor which shows that a user can grab an element.cursor-grabbing- a cursor which shows that a user is grabbing an element
Cursor auto
Cursor pointer
Cursor move
Cursor not allowed
Cursor zoom in
Cursor zoom out
Cursor default
Cursor none
Cursor help
Cursor progress
Cursor wait
Cursor text
Cursor vertical text
Cursor grab
Cursor grabbing
<div class="row text-center">
<div class="col-4 mb-3">
<div class="cursor-auto bg-light py-3">Cursor auto</div>
</div>
<div class="col-4 mb-3">
<div class="cursor-pointer bg-light py-3">Cursor pointer</div>
</div>
<div class="col-4 mb-3">
<div class="cursor-move bg-light py-3">Cursor move</div>
</div>
<div class="col-4 mb-3">
<div class="cursor-not-allowed bg-light py-3">Cursor not allowed</div>
</div>
<div class="col-4 mb-3">
<div class="cursor-zoom-in bg-light py-3">Cursor zoom in</div>
</div>
<div class="col-4 mb-3">
<div class="cursor-zoom-out bg-light py-3">Cursor zoom out</div>
</div>
<div class="col-4 mb-3">
<div class="cursor-default bg-light py-3">Cursor default</div>
</div>
<div class="col-4 mb-3">
<div class="cursor-none bg-light py-3">Cursor none</div>
</div>
<div class="col-4 mb-3">
<div class="cursor-help bg-light py-3">Cursor help</div>
</div>
<div class="col-4 mb-3">
<div class="cursor-progress bg-light py-3">Cursor progress</div>
</div>
<div class="col-4 mb-3">
<div class="cursor-wait bg-light py-3">Cursor wait</div>
</div>
<div class="col-4 mb-3">
<div class="cursor-text bg-light py-3">Cursor text</div>
</div>
<div class="col-4">
<div class="cursor-v-text bg-light py-3">Cursor vertical text</div>
</div>
<div class="col-4">
<div class="cursor-grab bg-light py-3">Cursor grab</div>
</div>
<div class="col-4">
<div class="cursor-grabbing bg-light py-3">Cursor grabbing</div>
</div>
</div>