VOOZH about

URL: https://www.geeksforgeeks.org/bootstrap/bootstrap-5-button-methods/

⇱ Bootstrap 5 Button Methods - GeeksforGeeks


  • Courses
  • Tutorials
  • Interview Prep

Bootstrap 5 Button Methods

Last Updated : 1 Aug, 2024

Bootstrap 5 has specially designed buttons that can be used in different utilities and the buttons can be used. To customize the usage of a user predefined methods can be used with JavaScript. The Button Methods with their function are given below:

Bootstrap 5 Buttons Methods:

  • toggle(): It changes the push status. This creates the impression that the button has been pressed.
  • dispose(): It destroys a button on an element. (Deletes the DOM element's stored data)
  • getInstance(): You may access the button instance linked to a DOM element using a static method.
  • getOrCreateInstance(): It is a static function that creates a new button instance if the one connected with the DOM element wasn't initialized or returns the related button instance.

Syntax:

button-instance.toggle();

Example 1: The code example demonstrates how we can use the getInstance() method and the toggle() buttons method. The instance is created and then fetched using the getInstance() method and it can be seen in the browser dev tools, and then the button is toggled using the toggle method.

Output:

Example 2: The code example demonstrates how we can use the getOrCreateInstance() method,  toggle(), and dispose() buttons methods. The instance is created using the getOrCreateInstance() method and then the button is toggled and disposed of using the toggle and dispose methods. Disposing of the second demo button is shown in the browser dev tools.

Output:

Reference: https://getbootstrap.com/docs/5.0/components/buttons/#methods

Comment
Article Tags:

Explore