Bulma Unselectable

Last Updated : 14 Feb, 2022

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= 
'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'> 
</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> 