Bootstrap 5 Interactions
Last Updated :
26 Dec, 2022
Bootstrap 5 Interactions help us to interact with the contents of the website. Utility classes like text selection and pointer events help us to interact with the website. The utilities classes include text selection and pointer events
- Text Selection: We can change the way in which the content is selected when the user interacts with it. .user-select-* class is used to format the selection of text
- Pointer events: Bootstrap provides .pe-none and .pe-auto classes to prevent or add element interactions. If a parent class contains .pe-none class then the child will inherit that property from the parent. To ensure that they are completely neutralized even for keyboard users, you may need to add tabindex=”-1″.
- SASS Interaction are declared in bootstrap API in scss/_utilities.scss. We can use our custom scss to modify the default values
Syntax :
// Text Selection
<p class="user-select-*">
...
</p>
// Pointer Events
<p>
<a href="#" class="pe-**" tabindex="-1">
...
</a>
</p>
The ‘*‘ can be replaced by all/auto/none to allow all/default/no selection respectively.
The ‘**‘ can be replaced by auto/none to allow/prohibit clicking on a link.
Example 1: In this example, we will see the use of Text selection in a paragraph
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<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=
rel="stylesheet">
</head>
<body>
<div class="text-center">
<h1 class="text-success">
GeeksforGeeks
</h1>
<h2>
Bootstrap 5 Interactions
</h2>
<br><br>
<p class="user-select-all">
A data structure is a storage that is used
to store and organize data. It is a way of
arranging data on a computer so that it can
be accessed and updated efficiently.
</p>
<hr>
<p class="user-select-auto">
This paragraph has default select behavior.
Java has been one of the most popular
programming languages for many years.
Java is Object Oriented.
</p>
<hr>
<p class="user-select-none">
Python is a high-level, general-purpose
and a very popular programming language.
</p>
</div>
</body>
</html>
|
Output :
Example 2 : Pointer events in <a> tags
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<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=
rel="stylesheet">
</head>
<body>
<div class="text-center">
<h1 class="text-success">
GeeksforGeeks
</h1>
<h2>
Bootstrap 5 Interactions
</h2>
<br>
<a href="#"
class="pe-none"
tabindex="-1">
Python
</a>
is a high-level, general-purpose and a very popular
programming language.<br><br>
<a href="#"
class="pe-auto">
Java
</a> has been one of the most popular
programming languages for many years.
<br><br>
<p class="pe-none">
<a href="#"
tabindex="-1">
C++
</a> is a general-purpose programming language and is
widely used nowadays for competitive programming.
</p>
</div>
</body>
</html>
|
Output :
References :
https://getbootstrap.com/docs/5.0/utilities/interactions/
Share your thoughts in the comments
Please Login to comment...