Open In App

Bootstrap 5 Interactions

Last Updated : 26 Dec, 2022
Improve
Improve
Like Article
Like
Save
Share
Report

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/



Previous Article
Next Article

Similar Reads

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
2 min read
Bootstrap 5 Interactions Pointer Events
In bootstrap 5, Interactions is a utility class that controls how elements of a website are interacted with (how the user interacts with them). Pointer events in Interactions come with pe-none and pe-auto classes, to prevent or add element interactions. Let's see each of them in brief. Interactions Pointer Events Classes: pe-none: The pe-none class
2 min read
ReactJS MDBootstrap Interactions Utilities
MDBootstrap is a Material Design and bootstrap-based react UI library that is used to make good-looking webpages with its seamless and easy-to-use component. In this article, we will know how to use Interactions Utilities in ReactJS MDBootstrap. The Interactions Utilities allows a user to interact with the contents of a website. Syntax: &lt;p class
2 min read
Javascript MDBootstrap Interactions Utilities
MDBootstrap is a Material Design and bootstrap-based Javascript UI library that is used to make attractive webpages with its seamless and easy-to-use component. It is free for both personal &amp; commercial use. In this article, we will know how to use Interactions Utilities in Javascript MDBootstap. MDBootstrap Interactions Utilities allows a user
2 min read
React .js Blueprint Popover2 Interactions
Blueprint is a React-based UI toolkit for the web. This library is very optimized and popular for building interfaces that are complex and data-dense for desktop applications. In this article, we'll discuss React.js Blueprint Popover2 Interactions. Popovers help in displaying the floating content next to the target element. Interactions tell how a
7 min read
What are Touchable Interactions in React Native?
When building a mobile application with React Native, it is important to provide a responsive and interactive user interface. One way to accomplish this is through the use of touchable interactions. Touchable interactions in React Native refer to the components that provide touchable feedback in response to user interactions. These components can b
3 min read
5 Ways to Minimize DOM Interactions for Web Page Optimization
The Document Object Model (DOM) is the way web developers manipulate the structure and content of a webpage using JavaScript. However, interacting with the DOM can be slow, leading to poor website performance and user experience. In this article, we will discuss the importance of minimizing DOM interactions and provide some tips on how to do it. Wh
6 min read
Include Bootstrap in AngularJS using ng-bootstrap
AngularJS can be integrated with Bootstrap CSS and Javascript and can be used to create creative forms, tables, navigation bars, etc. Steps: Make sure the Angular CLI present in your system if not then run the command in the terminal to do so. npm install -g @angular/cli Create a new project on visual studio code by running the code ng new project-
2 min read
Difference between bootstrap.css and bootstrap-theme.css
Bootstrap is an HTML, CSS and JS front-end-framework used for developing responsive and mobile-first projects on the web. It is the framework that comes up with predefined terms, thus giving you the ability to use these codes instead of having to create the codes from scratch. It is a collection of HTML, CSS and JS code that is designed to help bui
5 min read
Difference Between Bootstrap 3 and Bootstrap 4
Bootstrap: Bootstrap was developed by Mark Otto and Jacob Thorton at Twitter in August 2011. It is an open-source framework that is used to design responsive websites faster and easier. It is the most popular open-source framework that includes HTML, CSS, and JavaScript. It can create web applications with any server-side Technology like Java, PHP,
2 min read