Bootstrap Button - No Hand Cursor

Question

I am developing an MVC6 project in Visual Studio 2015. I just added Bootstrap 3.3.6 using Bower. In a very simple html page, I reference CSS in the header and Bootstrap in the lower body as follows:

<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" /> <script type="text/javascript" src="~/lib/bootstrap/dist/js/bootstrap.min.js"></script> 

I defined the button as follows:

 <button class="btn btn-primary">Hello</button> 

When I debug a project (IIS, IE11), the button appears and Bootstrap is clearly styled, but there is no cursor.

If I use a browser to go to the Bootstrap style button example, for example here: http://www.w3schools.com/bootstrap/bootstrap_buttons.asp , the hand cursor appears as I expected. So this is not my browser for the fault.

Can someone tell me why I do not get the cursor from a simple Bootstrap button?

Answer 1

Try adding role='button' . I had this problem, even though the download documentation says that type='button' should do the job, but mine didn't.

Answer 2

You are missing type = "button".

In the original boot source, fewer files exist, there are several CSS rules defined for the input rule [type = "button"]. ( Checked for version 3.3.6 )

You may not have to use it, but it is intended to be used with type = "button".

Both W3School and Bootstrap button demos use type = "button"

Your code:

 <button class="btn btn-primary">Hello</button> 

W3:

 <button type="button" class="btn btn-default">Default</button> 

If it doesn’t work after adding type = "button" (either submit or reset), try looking at your element with the inspector and see what overrides the css pointer rule: cursor.

Answer 3

Try adding a href button, such as href = "#".

 <button class="btn btn-primary" href="#">Hello</button> 

When you start changing your own types and type roles, there are other side effects, including how these elements interact with user accessibility. See this MDN link: Button role for more details.