Bootstrap 5 Interactions Pointer Events

Last Updated : 20 Jan, 2023

In bootstrap 5, Interactions is a utility class that controls how elements of a website are interacted with (how the user interacts with them). Pointer events in Interactions come with pe-none and pe-auto classes, to prevent or add element interactions. Let’s see each of them in brief.

Interactions Pointer Events Classes:

pe-none: The pe-none class is used to prevent element interaction. If you use the pe-none class inside the anchor tag, the link will be not accessible.
pe-auto: This class helps to add the interactions with the pointer. Basically, this shows the default behavior. For example, if you use the pe-auto class inside the anchor tag, the link can be easily accessible

Syntax: The * is replaceable with none and auto.

<p>
    <a href="" class="pe-*">...</a> 
    ....
</p>

Below examples illustrate the Bootstrap 5 Interactions Pointer Events:

Example 1: The following example illustrates the use of the pe-none class. In this example, the link will be not accessible to any pointer and keyboard devices.

HTML

<!DOCTYPE html>
<html>
<head>
    <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>
    <center>
        <h1 class="text-success">GeeksforGeeks</h1>
        <strong>Bootstrap 5 Interactions Pointer Events</strong>
        <p>
            <!-- Used pe-none class to prevent interactions -->
            <a href="#" class="pe-none">This link</a>
            is not accessible as we have used pe-none class
        </p>
    </center>
</body>
</html>

Output:

Bootstrap 5 Interactions Pointer Events

Example 2: The pe-auto class will add interactions to the pointer. This is like the default behavior of any hyperlinked text. You can try it out with the help of the below example.

HTML

<!DOCTYPE html>
<html>
<head>
    <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>
    <center>
        <h1 class="text-success">GeeksforGeeks</h1>
        <strong>Bootstrap 5 Interactions Pointer Events</strong>
        <p>
            <a href="#" class="pe-auto">The link</a>
            is accessible now, as we have
            used pe-auto
        </p>
    </center>
</body>
 
</html>

Output:

Bootstrap 5 Interactions Pointer Events

Even if we disable pointer events using pe-none, by default the links still can be focusable and accessible by the keyboard users. To avoid that, we are using the below attributes along with the pe-none class. This will completely block the interactions from keyboard users.

tabindex=”-1″: Prevent the elements from receiving keyboard focus.
aria-disabled=”true”: Share the fact they are effectively disabled to assistive technologies.

Reference: https://getbootstrap.com/docs/5.0/utilities/interactions/#pointer-events