Bootstrap Code Editor - v5

<h2 class='m-5'>click/hover interactions</h2><div class='container pb-5'> <h6>click </h6>        
<p class="user-select-all">This paragraph will be entirely selected when clicked by the user.</p>
<p class="user-select-auto">This paragraph has default select behavior.</p>
<p class="user-select-none">This paragraph will not be selectable when clicked by the user.</p>
<h6 class="mt-5">click </h6>
<p><a href="#" class="pe-none" tabindex="-1" aria-disabled="true">This link</a> can not be clicked.</p>
<p><a href="#" class="pe-auto">This link</a> can be clicked (this is default behavior).</p>
<p class="pe-none"><a href="#" tabindex="-1" aria-disabled="true">This link</a> can not be clicked because the <code>pointer-events</code> property is inherited from its parent. However, <a href="#" class="pe-auto">this link</a> has a <code>pe-auto</code> class and can be clicked.</p>
</div>

 

Bootstrap is one of the most popular frontend framework for web development. It has pre define CSS style and JS bundle for faster web page development.

This tool is using bootstrap version v5.3.3

You can select or search top most used code snippets and see the result. You also can write your own custom code in text editor and run code on fly, Try to resize preview panel from resize handler and see responsive behavior. Bootstrap CSS and JS library is loaded by default in preview panel so you no need to load files manually.

resources

» Bootstrap Home