Interactions
Bootstrap 5 Interactions
Utility classes that change how users interact with contents of a website.
Text selection
Change the way in which the content is selected when the user interacts with it.
This paragraph will be entirely selected when clicked by the user.
This paragraph has default select behavior.
This paragraph will not be selectable when clicked by the user.
<p class="user-select-all">This paragraph will be entirely selected when clicked by the user.</p>
<p class="user-select-auto">This paragraph has default select behavior.</p>
<p class="user-select-none">This paragraph will not be selectable when clicked by the user.</p>
Pointer events
Bootstrap provides pe-none
and pe-auto
classes to prevent or add
element interactions.
<p><a href="#" class="pe-none">This link</a> can not be clicked.</p>
<p><a href="#" class="pe-auto">This link</a> can be clicked (this is default behaviour).</p>
<p class="pe-none">
<a href="#">This link</a> can not be clicked because the pointer-events property is inherited from its parent.
However, <a href="#" class="pe-auto">this link</a> has a pe-auto class and can be clicked.
</p>
The .pe-none
class (and the pointer-events
CSS property it sets) only prevents interactions with a pointer (mouse,
stylus, touch). Links and controls with .pe-none
are, by default, still focusable and actionable for keyboard users.
To ensure that they are completely neutralized even for keyboard users, you may need to add further attributes such as
tabindex="-1"
(to prevent them from receiving keyboard focus) and aria-disabled="true"
(to convey the fact they are
effectively disabled to assistive technologies), and possibly use JavaScript to completely prevent them from being
actionable.
If possible, the simpler solution is:
-
For form controls, add the
disabled
HTML attribute. -
For links, remove the
href
attribute, making it a non-interactive anchor or placeholder link.