bootstrap: interaction

by istiq20

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Interaction</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
    <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>

    <p>
      <a href="#" class="pe-none" tabindex="-1" aria-disabled="true">This link</a>
      can not be clicked.
    </p>
    <p>
      <a href="#" class="pe-auto">This link</a> can be clicked (this is default behavior).
    </p>
    <p class="pe-none">
      <a href="#" tabindex="-1" aria-disabled="true">This link</a> can not be
      clicked because the <code>pointer-events</code> property is inherited from
      its parent. However, <a href="#" class="pe-auto">this link</a> has a
      <code>pe-auto</code> class and can be clicked.
    </p>

    <script src="bootstrap/js/bootstrap.bundle.min.js"></script>
  </body>
</html>