Bootstrap 5 Interactions Text Selection
Last Updated :
29 Nov, 2022
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
Share your thoughts in the comments
Please Login to comment...