Bootstrap - Interactions

This chapter discuss about Bootstrap utility classess that change the way users interact with contents of a website.

Text selection

This section demostrates how Bootstrap utility classess user-select-* change the way in which content is selected during user interactions.

Example

You can edit and try running this code using Edit & Run option.

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - Interactions</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
        <p class="user-select-all">When the user clicks on this paragraph, the entire text will be selected.</p>
        <p class="user-select-auto">The select behavior of this paragraph is set to its default state.</p>
        <p class="user-select-none">When the user clicks on this paragraph, it will not be selectable.</p>
    </body>
    </html>

Pointer events

Bootstrap classes .pe-none and .pe-auto classes prevents and enabling of element interactions as demostrated in the following example.

Example

You can edit and try running this code using Edit & Run option.

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Interactions</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <p>Use the "pe-none" class to make the <a href="#" class="pe-none" tabindex="-1" aria-disabled="true">link</a> inactive.</p>
    <p>Use the "pe-auto" class to make the <a href="#" class="pe-auto">link</a> active.</p>
    <p class="pe-none"><a href="#" tabindex="-1" aria-disabled="true">This link </a> is not active due to the inherited pointer-events property. Now, <a href="#" class="pe-auto">This link</a> is an active.</p>
  </body>
  </html>

  • The .pe-none class, along with the pointer-events CSS property it applies, is designed to disable interactions specifically with a pointer, such as a mouse, stylus, or touch input. By default, links, and controls with .pe-none remain functional and accessible for keyboard users.

  • In order to achieve full neutralization for keyboard users, additional attributes can be included for keyboard users. These attributes may include tabindex="-1" to prevent keyboard focus, aria-disabled="true" to indicate their disabled state to assistive technologies, and JavaScript could also be utilized to fully prevent any action on them.

If possible, it can be done in a simpler way:

  • For form controls: You can add the disabled attribute in the HTML.

  • For links: Remove the "href" attribute from links, effectively making them non-interactive or placeholder elements.

Advertisements