Bootstrap 5 List group Fade effect

Bootstrap 5 List group Fade effect is used to fade the visible element. This fade effect hides or shows an element by fading it. A fade-in effect begins with a solid color and then fades.

Bootstrap 5 List group Fade effect class:

• fade: This class is used to make the tabs panel fade in the list group. This class should use each tab-pane class used elements to make it fade in.

Syntax:

<div class="tab-content">
 <div class="tab-pane fade active" id="..." >
 ....
 </div>
</div>

Example 1: In this example, we set a group of elements list with the fade content using fade class.

Output:

Example 2: In this example, we set the list elements in the horizontal direction and made the content fade using fade class.

Output:

Reference: https://getbootstrap.com/docs/5.0/components/list-group/#fade-effect