Cursor Pointer and other classes for Bootstrap 5

By default, Bootstrap 5 does not include classes for the CSS cursor properties. Here is how you can quickly add these properties which is similar to tailwindcss in your Bootstrap 5 library.

@import "~bootstrap/scss/bootstrap-utilities";

//Generate utilites for Cursor
$utilities: map-merge(
  $utilities,
  (
    "cursor": (
      property: cursor,
      values: auto default pointer wait text move help not-allowed
    ),
  )
);

@import '~bootstrap/scss/bootstrap';

Here are the classes, that will be generated by this

Class Properties
cursor-auto cursor: auto;
cursor-default cursor: default;
cursor-pointer cursor: pointer;
cursor-wait cursor: wait;
cursor-text cursor: text;
cursor-move cursor: move;
cursor-help cursor: help;
cursor-not-allowed cursor: not-allowed;

Laravel / WP Hosting on Cloudways

Easy website management with Amazing Site Speed and Affordable Prices (Starting 5 $ / month)
Use promo 5Balloons for 10% discount

Related Articles

Site Footer