Bulma is an open-source CSS framework that ships with pre-styled elements and components which makes it easier to develop responsive and beautiful web interfaces. In this article, we will be seeing how to make text unselectable using the is-unselectable modifier in Bulma.
Bulma Unselectable Classes:
- is-unselectable: Using this class on an element makes the text unselectable inside it.
Syntax:
<p class="is-unselectable">...</p>
Example: The example below shows the use of the is-unselectable modifier to prevent some text from being selected.
HTML
<!DOCTYPE html> <html>
<head>
<title>Bulma Unselectable</title>
<link rel='stylesheet' href=
</head>
<body class="has-text-centered">
<h1 class="is-size-2 has-text-success">
GeeksforGeeks
</h1>
<b class="is-size-4">Bulma Unselectable</b>
<div class="container mt-5 is-fluid">
<p>This text will get selected.</p>
<p class="is-unselectable">
This text will not get selected as
it has <code>is-unselectable</code>
modifier on it.
</p>
<p>This text will also get selected.</p>
</div>
</body>
</html>
|
Output:
Reference: https://bulma.io/documentation/helpers/other-helpers/