Bootstrap 5 Reboot Pointers on Buttons

Bootstrap 5 Reboot is a collection of element-specific CSS that changes in a single file, kickstart Bootstrap provides an elegant, consistent, and simple baseline to build upon. Reboot Pointers on buttons can be created by adding role="button" attribute to the element. It changes the default cursor to the pointer when we hover over the element.

Reboot Pointers on buttons used Attribute:

role="button": This attribute is used to change the default cursor style to the pointer on the element.

Syntax:

<span role="button" tabindex="0">...</span>

Example 1: In this example, we will learn about Reboot Pointers on buttons.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>
        BootStrap5 Reboot Pointers on buttons
    </title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
        rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
        crossorigin="anonymous">
</head>

<body class="container">
    <div>
        <h1 class="text-success">
            GeeksforGeeks
        </h1>

        <h3>Reboot Pointers on buttons</h3>
        
        <p>
            Point on GeeksforGeeks, cursor will 
            be changes to pointer: &nbsp;
            <span role="button" tabindex="0">
                GeeksforGeeks
            </span>
        </p>
    </div>
</body>

</html>

Output:

Example 2: In this example, we will see how can we display some information of element along with changing cursor to pointer. This can be done by using title attribute

HTML

<!DOCTYPE html>
<html>

<head>
    <title>
        BootStrap5 Reboot Pointers on buttons
    </title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
        rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
        crossorigin="anonymous">
</head>

<body class="container">
    <div>
        <h1 class="text-success">
            GeeksforGeeks
        </h1>

        <h3> Reboot Pointers on buttons</h3>
        
        <p>
            Point on GeeksforGeeks, cursor will 
            be changes to pointer: &nbsp;
            <span role="button" tabindex="0" 
                title="www.geeksforgeeks.org">
                GeeksforGeeks
            </span>
        </p>
    </div>
</body>

</html>

Output

Reference: https://getbootstrap.com/docs/5.0/content/reboot/#pointers-on-buttons

Bootstrap 5 Reboot Pointers on Buttons

Explore