Bootstrap 5 Interactions Text Selection

Bootstrap 5 Interactions Text selection helps us to change the way when a user tries to select the content displayed.

Bootstrap 5 Interactions Text selection Classes:

user-select-all: When this class is active the entire text will get selected.
user-select-auto: When this class is active user can select any amount of text.
user-select-none: When this class is active user cannot select any text.

Syntax: The * can be substituted with values like all, auto, and none.

<p class="user-select-*">
    ...
</p>

Example 1: In this example, we will learn about classes like user-select-all and user-select-auto.

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>
    <div >
        <h1 class="text-success">
            GeeksforGeeks
        </h1>
        <h2>Bootstrap5 Interactions Text selection</h2>
        <p class="user-select-all">
            GeeksforGeeks is a computer science portal
        </p>
        <p class="user-select-auto">
            It provides learnings of various kind 
            of courses like Java, C++, Python, 
            Javascript etc.
        </p>
    </div>
</body>
</html>

Output:

Example 2: In this example, we will learn about classes like user-select-none.

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 class="m-5">
    <div >
        <h1 class="text-success">
            GeeksforGeeks
        </h1>
        <h2>Bootstrap 5 Interactions Text selection</h2>
        <p class="user-select-none">
            GeeksforGeeks is a computer 
            science portal
        </p>
    </div>
</body>
</html>

Output:

References: https://getbootstrap.com/docs/5.0/utilities/interactions/#text-selection

Bootstrap 5 Interactions Text Selection

Explore