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=
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:
Bootstrap 5 Interactions Text Selection
Example 2: In this example, we will learn about classes like user-select-none.
HTML
<!DOCTYPE html> <html>
<head>
<link href=
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:
Bootstrap 5 Interactions Text Selection
References: https://getbootstrap.com/docs/5.0/utilities/interactions/#text-selection