Interactivity Classes

There are a few other classes related to how Bootstrap deals with certain interactive elements. Let's take a look.

Overflow

• overflow-{TYP}
  • TYP: auto hidden visible scroll

Try it

There are some classes that help you control what happens when text is longer than the space alloted to it.

overflow-auto - is the default and will show scrollbars

overflow-hidden - hides the extra content

overflow-visible lets the content overflow

overflow- displays the scrollbars by defaul

Stretched Link

stretched-link

Try it

This is one my favorite bootstrap classes. It will make the entire container of an element with a link clickable, which makes it easier to write code. It's magical.

User Select

• user-select-{TYP}
  • TYP: auto all none

Try it

User select is a great utility class that lets you control how selection works in an element. There are three options.

user-select-auto is the default and lets selection work normally.

user-select-all will select the entire block of text when any part of the text is clicked on. That's great if you need someone to copy some text quickly.

user-select-none prevents the user from selecting the text.

Pointer Events

• pe-{TYP}
  • none auto

Try it

There's a couple of classes you can use to turn clicking on or off individually to links.

The pe-none class lets you turn off clicking on a link. To get it to work properly on assistive devices you should also add the aria-disabled="true" property and the tabindex="-1".

The pe-auto is the default, so you don't normally use this, but you can use it to override an existing pe-none class.

Look in the example how I am adding a pe-none class to the div containing the link and then I'm overriding it with the pe-auto class.