Interactive Components

Some components in Bootstrap rely on javascript to perform certain tasks, so let's go over those.

Dropdowns

• dropdown-menu-dark
• <li> dropdowns

Try it

There are just a couple of minor changes on dropdowns. The main change is that there is a dark menu option which looks great.

Another minor change is they now support list items, so that they're a bit more flexible.

Popovers

• arrow to popover-arrow
• whiteList to allowList

Try it

There are some very minor changes to popovers. You won't have to worry about these unless your existing code uses these properties.

Some of the classes that were a bit vague have been renamed, so for example, the arrow class is now the pop-over arrow class. That makes it harder to confuse with other classes that might use that name. This will really only matter if you're programmatically creating a template

One of the options available in the javascript has also had a minor modication, so who instead of whitelist, you use allowList. Just make sure you're looking for that if you're upgrading.

Toasts

• Can be positioned
• 5 second default
• whiteList to allowList

Try it

There are some very minor changes to popovers. You won't

The javascript whitelist option has been renamed to allowList. So again, make sure you're looking for that if you're upgrading.

Tooltips

• arrow to tooltip-arrow
• whiteList to allowList

Try it

There are some very minor changes to popovers. You might not even have to worry about these.

The arrow class is now the tooltip-over arrow class. Again, this will only matter if you're programmatically creating a template

The javascript whitelist option has been renamed to allowList. So again, make sure you're looking for that if you're upgrading.

Carousel

• carousel-dark variant

Try it

The main change with the carousel is the addition of the carousel-dark variant with black text. That's useful if you have a carousel with a light background since the normal carousel has white text.

Collapse

• collapse-horizontal

Try it

The collapse component has a new trick. It normally animates vertically so there's now a new class called collapse-horizontal.

Let's take a look at how that works.

I added a regular as well as a horizontal collapse so you can see them at work.

The second collapse has the additional collapse class. Notice that I've added a width attribute on the second collapse inside an extra div. Animating horizontally basically changes the width of elements, so it looks weird without adding this extra measurement. Sometimes you'll need to add a height as well.