Bootstrap 5 UtilitiesToggle visibility

Bootstrap 5 regulates element visibility without changing display content. In Bootstrap 5 the visibility of an element can be changed without using any display properties but by using the Utilities Toggle visibility classes. The display and layout properties of an element don't get changed due to these classes. In Bootstrap the default value of visibility of all the elements is visible. When the .invisible class is used it is hidden visually and for assistive technologies.

Syntax:

<div class="visible/invisible">
 ...
</div>

Bootstrap 5 UtilitiesToggle visibility used Classes:

• visible: This class is used to set the visibility of an element to enable.
• invisible: This class disables the visibility of an element to make it invisible.

Example 1: The code below demonstrates the change in visibility by the implementation of the Utilities Toggle visibility of a button by clicking itself. Here using JavaScript, a function is called on click of the button to change the class of the button to 'invisible':

Output:

Example 2: The code below demonstrates how the visibility of a card is toggled using a button in JavaScript while implementing Utilities Toggle visibility:

Output:

Reference:https://getbootstrap.com/docs/5.0/layout/utilities/#toggle-visibility