Cursor pointer Utility

[lucasdavidferrero]

Hello, It will be nice if someone could add a class that let you point the cursor.
example:

.c-pointer {
 cursor: pointer;
}

[andresgalante]

What does c-pointer means? is it a utility class?

[lucasdavidferrero]

It means that the cursor will be pointer (cursor: pointer). Another example could be the following:

.c-wait {
cursor: wait;
}

or

.c-help {
 cursor: help;
 }

These are utility classes. I missed the dot in my first comment.

[MartijnCuppens]

I like that idea. Maybe we can add all cursor-values? And maybe add a global option to enable/disable these classes like the grid classes?

[patrickhlauke]

there's a danger that we'd need to add utility classes for every single CSS property at that rate, though. is it really necessary to do this, or can authors not do their own minor CSS additions?

[andresgalante]

I agree with @patrickhlauke, I don't like the idea. If we add a single utility for each CSS property it'd be like writing inline styles.

[MartijnCuppens]

@patrickhlauke and @andresgalante, your comments make sense, these classes may indeed be more appropriate in custom stylesheets.

[rbonomo]

I don't see a problem with adding to the Bootstrap utilities. Why have utility classes for border-radius and not cursor? Do you have a prejudice against the cursor property? I do not agree with the above comments

[RavenHursT]

Judging by 👍's it would appear most people agree w/ you @rbonomo (myself included) as opposed to the project maintainers that chimed in here. 🤷‍♂️

[Ismaestro]

What does c-pointer means? is it a utility class?

omg, seriously?, Please reopen this issue, and add it.

[RavenHursT]

There's a whole slew of CSS properties that Bootstrap has enumerated the values for and provided utility classes for, another being .d-{value}: https://getbootstrap.com/docs/4.1/utilities/display/

It's great to see someone has reopened this. 💯

[patrickhlauke]

"There's a whole slew of CSS properties..." ... so let's strive to aim all the other ones too?

[RavenHursT]

Sure... Why the heck not? At least it'd b e consistent across the board.

[Euak]

I think it would make easier to override proprieties via JS.

[jaysee]

For pointer you could use the role="button" on the element as BS have the following css definition :

[role=button] {
  cursor: pointer;
}

I checked using BS3, works !

[Johann-S]

According to @patrickhlauke, @andresgalante and @MartijnCuppens feedbacks.

Closed.

/CC @mdo if you think we should add that

[RavenHursT]

"According to all the people that I agree with, including the one who's last response was an unhelpful bit of sarcasm, I'm gonna go ahead and close this, again.. even though it's clear this is a rather desirable feature." 🤦‍♂️

[owensco]

I think the devs are trying to prevent the ballooning out of utility classes.

[desthercz]

I think the devs are trying to prevent the ballooning out of utility classes.

And what exactly is wrong with that? It is rather usefull feature to have strong utility classes. Combination of Tailwind and Good ol' Bootstrap seems pretty amazing to me. Unfortunately devs dislike the idea so i guess we are done here.

[dallanlee]

I see Bootstrap as a tool for quick prototype implementation. For me, it's supposed to remove the need to write my own CSS for as long as possible. Not having a cursor utility class is just another barrier to getting a prototype closer to the 80% complete before fine-tuning everything with my own rules. If I'm building a web app on Bootstrap and can't control the cursor style in the moment, I could easily forget some of those subtle things later when I am writing my custom CSS to finish the last 20% of the prototype. I vote for cursor utility classes. I like @RavenHursT's comment—this was closed because a few didn't want it. The initial comment that opened this issue has 33 thumbs up at the time of writing my comment. Feels like the majority of the community is rudely dismissed on this one.

[tuuling]

If there ever was a case for a utility class, this is it. Every man and woman alive who has written Angular has had to write an utility class for pointer.

[matt-landers]

I created a package to handle these cases. It has all the pointer options as .c-xxx
https://www.npmjs.com/package/bootstrap-extensions

[RavenHursT]

See? Now that wasn't so hard, now was it?

Would be nice to have something like this in BS itself however, to help ensure classes and styles don't override or something as the two libs evolve...

But the BS-Gods have spoken... they're not interested, regardless of how many in the community see this as beneficial... c'est la vie 🤷‍♂️

[mdo]

We regularly unsubscribe, mute, and ignore old threads, apologies for that, and the snark y'all have received. Given v5's upcoming utilities API, we can likely add something like this to the project. 60 +1s on the opening comment is a pretty clear indication folks at least expect a set of utilities here.

/cc @MartijnCuppens again who commented favorably two years ago :).

[MartijnCuppens]

Well, I got to admit my opinion has changed quite a lot over the years 😛

I really don't mind adding more utilities. However, I'm a little concerned this utility will get abused too often. Elements which are clickable, should also be accessible with keyboard navigation. Links and buttons can be focused with keyboard navigation and have a pointer cursor.

Apart from elements with [role="button"], are there any other use cases where this utility makes sense? Otherwise we should just add

[role="button"] {
  cursor: pointer;
}

to our reboot (thanks for this suggestion @jaysee). This attribute can then be used as an accessible kind of utility?

Thoughts @mdo, @patrickhlauke?

[anthony0030]

I made and use utility for cursors written in SASS, it deals with all the options, by adding something like this behind a flag not to add bloat for people that won't use it, hope this helps:

$cursors: auto, default, none, context-menu, help, pointer, progress, wait, cell, crosshair, text, vertical-text, alias, copy, move, no-drop, not-allowed, grab, grabbing, all-scroll, col-resize, row-resize, n-resize, e-resize, w-resize, ne-resize, nw-resize, se-resize, sw-resize, ew-resize, ns-resize, nesw-resize, nwse-resize, zoom-in, zoom-out

@each $cursor in $cursors
  .cursor-#{$cursor}
    cursor: $cursor

[mdo]

Two PRs opened to address this in v4 (#30562) and v5 (#30563). v4's PR also brings over user-select to help bridge v4/v5 a little more since we're proposing adding this new class. Still up to the team on how we proceed here.

[mdo]

With the two PRs open, we still don't have a clear idea of why a cursor pointer utility is needed. I get it for some other cursors—like the help one—but those seem like something we'd push to custom styles anyway. What's everyone's use case here?

[desthercz]

My use case was when combining Bootstrap html with JS (in my case Vue framework) when i wanted to make some element obviously clickable without wrapping everything in "a" tag with "href" attribute as unnecessary clutter. Also utility classes in general are pretty addictive once you fully add them to your workflow so that may be a reason why people want more utilities. To be honest in my case i ended up using TailwindCSS just because of that - i don't have to use CSS itself that much and I even started enjoying writing frontend code a little bit (i am backend developer 99% of the time).

[ffoodd]

Maybe use a button? This is not a sufficient use case, IMHO.

To summarize our thoughts, if it's clickable it should almost always be a link or a button.

Links have pointer cursor as a default, and buttons have it in standard Bootstrap build.

Inputs and other interactive elements as details have appropriate defaults too.

If you're making something clickable and need to add a cursor, it's very likely you have an accessibility issue.

To me, not including this utility is a way to promote good ol' semantic markup for operable components.

[jacobcoro]

sometimes you want something clickable with a cursor:pointer that isn't a button. Please implement this!

[mdo]

We've since shipped v4.5.0 which includes a new role="button" addition to Reboot to add cursor: pointer. This keeps things semantically aligned and alleviated some concerns the maintainer team had around abusing this particular utility class.

See https://getbootstrap.com/docs/4.5/content/reboot/#pointers-on-buttons for details.

Hope this helps, but also weigh in with feedback if this is something we should be revisiting in some way.

[QiQiBiBi]

I created a package to handle these cases. It has all the pointer options as .c-xxx
https://www.npmjs.com/package/bootstrap-extensions

Oh great find after those administrative futinlity, this fulfills some of my needs ever since.