My question is: Are there any CSS classes or attributes in Bootstrap 4 specifically designed for applying the pointer: cursor property to buttons or links?
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<button type="button" class="btn btn-success">Sample Button</button>In June of 2020, it was discovered that adding role='button' to any HTML tag would automatically give the element styling of cursor: "pointer".
<span role="button">Non-button element button</span>
If you would like more information about this feature, feel free to check out the official discussion on GitHub at this link.
For documentation on this topic, visit this page.
Regrettably, Bootstrap does not currently have a predefined class for cursor: pointer as of the latest update on January 27th, 2019.
Upon reviewing the Bootstrap code, I identified several existing classes that utilize cursor: pointer. However, it is advised against using any of them exclusively for this purpose.
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;
}
A Viable Solution:
I recommend creating a custom class in your CSS file named cursor-pointer. This approach is straightforward and effective.
.cursor-pointer{
cursor: pointer;
}<div class="cursor-pointer">Hover on me</div>The cursor: pointer; property has been reinstated, so now buttons will automatically show the cursor on hover:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<button type="button" class="btn btn-success">Sample Button</button>Currently, there is no default setting for this. You would need to create custom CSS for it.
If you simply require a link that resembles a button (with pointer), use the following method:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<a class="btn btn-success" href="#" role="button">Sample Button</a>If you want to change the cursor to a pointer when hovering over an element, you can assign the role attribute with a value of button.
<any-html-element role="button" />
Here is a simple custom CSS snippet that I like to use, inspired by the W3School example. Each cursor style is prefixed 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;}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<button type="button" class="btn btn-success cursor-pointer">Sample Button</button>Unfortunately, I am unable to contribute comments due to my lack of reputation. However, for those who are following this discussion, it is important to note that simply adding the .btn class does not only change the cursor style, but also applies various other styles. This could be beneficial if you want a button with Bootstrap styling, but may cause conflicts with other elements.
As suggested by Hari Das and as I personally recommend, the best approach is to use the following CSS code:
.cursor-pointer {
cursor: pointer;
}
By using this CSS class, you can easily apply pointer cursor to any element like so:
<div class="cursor-pointer"> .. </div>
I discovered that by adding the btn class to an element, you can make the mouse cursor change to a hand or pointer when hovering over it. Give it a try!
For example:
<span class="btn">Hovering over this should change the mouse cursor to a hand or pointer!</span>
Enjoy!
In my experience with Bootstrap 3, simply adding the "btn" Class did the trick.
Lacking a pointer cursor:
<span class="label label-success">text</span>
Including a pointer cursor:
<span class="label label-success btn">text</span>
Uncertain of the time it was added, but its documentation mentions the presence of btn-link.
<!doctype html>
<html lang="en>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<button type="button" class="btn btn-link">Click Me, Hover Me Link</button>
<body>
</html>Associated Link:
Consider using type = button for better functionality
<span type="button">Try hovering over me</span>If you need to complete your task, there are a couple of options you can choose from:
First option: utilize type=button;
<!-- displayed as a link -->
<button type="button" class="btn btn-link">Click Me, Hover Me Link</button>
<!-- displayed as a button -->
<button type="button" class="btn btn-primary">Click Me, Hover Me Link</button>
Second option: utilize an anchor with role=button;
<a role="button" class="btn btn-primary" href="#">Click Me, Hover Me Link</a>
Either way, when you hover over it, you'll see a hand cursor...
Unfortunately, there are no specific classes for that purpose. However, you can easily apply inline styles to your div or other elements by using the following code:
<div class="" style="cursor: pointer;">
I have been experimenting with toggling table rows using jquery. Initially, the state is hidden This feature is functioning properly $('.table tr.items.' + name).each(function() { $(this).show(); }); Furthermore, this snippet of code is wor ...
I recently encountered an issue with the code found on this website (the repository can be viewed on Github here): @media only screen and (max-width: 600px) { img {width: 100%; height: 100%; margin: 0; padding: 0; } a.box { width: 100%; pa ...
I'm struggling with creating a corner like the one shown in the image. As a beginner in frontend development, I attempted to write the following code but now I'm stuck. The Snippet: * { margin: 0; padding: 0; } body { height: 100vh; ...
When opening a modal in Bootstrap according to the documentation, it only hides the scrollbar thumb, like shown in the examples below: However, my modal hides the entire scrollbar. How can I modify it to hide only the scrollbar thumb? body { height: ...
I'm currently working on designing a simple navigation bar but I'm facing difficulties in aligning the elements correctly. See my progress here: https://jsfiddle.net/zigzag/bL1jxfax/ Here are my objectives: 1) Ensure that the navigation bar rea ...
Does anyone know a more efficient way to find the colspan of table cells in IE, specifically when it's other than 1? The current selector I'm using feels clunky. Any suggestions on how to improve this? if (isIE) { selector = "> tbody > ...
I have been working on this HTML/CSS code and I am trying to change the style of a div using a JavaScript button click event so that the div becomes visible and clickable. However, despite my efforts, it doesn't seem to be working as expected. Whenev ...
Struggling with a JS/Jquery issue on my portfolio website, I admit that I am still just an average programmer. My portfolio website has five buttons, each representing a different project. For each project, there is a corresponding text description and an ...
I am facing an issue where my div does not display as 100% width in the mobile version. Below is the JSX code I am using: <div> <div expand="lg" className="login-header"> <h1>logo</h1> <h1&g ...
I encountered an issue with my Angular project where the view resizes properly in Chrome and Firefox, but not in IE 11. When the scrollbar appears, some components get covered by the scrollbar. Here is the CSS for the menu: #menu-principal .navbar-lower ...
I have created a div with a date picker inside a form for future fields, but the initial display is next to the table instead of above it. I've searched for solutions similar to my issue, but none seem to work for me. You can view the correct layout ...
As I delve into the official documentation on incorporating Twitter Bootstrap in Rails, I stumbled upon an interesting tidbit: It mentions to eliminate all the *= require_self and *= require_tree . statements from the Sass file and opt for @import to im ...
While checking my HTML code using the W3 validator, I encountered an error and warning message: Line 21, Column 23: The ID menuItem was first used here. <li id="menuItem"><a href="#visit">Ten Places to Visit</a></li> ✉ Line 29 ...
I'm struggling with aligning this button in CSS to the center: .btn { background-color: #44c767; -moz-border-radius: 28px; -webkit-border-radius: 28px; border-radius: 28px; border: 1px solid #18ab29; display: inline-block; cursor: poi ...
Being a beginner in the world of coding, I am determined to learn by building my own personal website. However, I have encountered a challenge with after effects. I have designed an animation for the welcome screen of my website using my logo and a welcome ...
I would like to customize the tooltip in Bootstrap 4 based on the screenshot provided below: https://i.stack.imgur.com/wg4Wu.jpg <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta chars ...
So, within my render function, the following code is used: render() { <div> <form id="one"> <TextField id="t1" ... /> <Button id="b1" /> </form> <div id="empty"><div ...
After implementing a redirect from http to https in my application, I encountered an issue with custom cursor images not displaying as intended. Prior to the redirect, the custom cursor images worked fine and were visible on the page. The URL for these cur ...
In my Python 2.7 project, I have a folder containing multiple HTML pages that I need to extract only words from. My current process involves opening the HTML file, using the Beautiful Soup library to extract text, and then writing it to a new file. However ...
Is there a way to change the input color for this textarea so I can type green text on a black background? textarea{ background-color: black; } <textarea id="htmlCode" class="1111" placeholder="HTML"></textarea> ...