Bootstrap 5 Button Plugin
Last Updated :
22 Jul, 2024
Bootstrap 5 buttons plugin gives the flexibility to play around with setting the toggle states and also with adding certain predefined button methods which help to add utility to the button or even the ability to operate even outside the actual button.
Bootstrap 5 Button plugin used classes for toggling states:
- active: This class is added to pre-toggle the button.
- disabled: This class when added to the button disabled the button and we can click on it anymore.
Bootstrap 5 Button plugin used methods:
- toggle(): Changes the push status. This creates the impression that the button has been pressed.
- dispose(): 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(): 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:
// Adding un-toggled button:
<button type="button" class="btn"
data-bs-toggle="button">
<--Code Here-->
</button>
// Adding un-toggled button:
<button type="button" class="btn active"
data-bs-toggle="button">
<--Code Here-->
</button>
// Adding Disabled button:
<button type="button" class="btn"
disabled data-bs-toggle="button">
<--Code Here-->
</button>
// For using Button methods
button-instance.toggle()// or any other method
Example 1: This code example demonstrates how we can create Untoggled, Pre-toggled, and disabled-buttons. We can see how we toggle an Untoggled button and untoggle a Pre-toggled button and we can't do anything with the disabled-buttons.
HTML
<!doctype html>
<html lang="en">
<head>
<link href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet">
</head>
<body>
<h1 class="m-4 text-success">
GeeksforGeeks
</h1>
<h4 class="ms-4">
Bootstrap 5 Buttons plugin
</h4>
<div class="container d-flex flex-column mb-4 p-4">
<button type="button"
class="btn btn-success ms-5 mb-3 w-50"
data-bs-toggle="button">
Untoggled button
</button>
<button type="button"
class="btn btn-success active ms-5 mb-3 w-50"
data-bs-toggle="button" aria-pressed="true">
Pre-toggled button
</button>
<button type="button"
class="btn btn-success ms-5 mb-3 w-50"
disabled data-bs-toggle="button">
Disabled Toggle button
</button>
</div>
</body>
</html>
Output:
Example 2: This code example demonstrates how we can use the getOrCreateInstance() method and the toggle() and dispose() buttons methods. Here 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.
HTML
<!doctype html>
<html lang="en">
<head>
<link href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet">
<script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js">
</script>
</head>
<body>
<h1 class="m-4 text-success">
GeeksforGeeks
</h1>
<h4 class="ms-4">
Bootstrap 5 Buttons plugin
</h4>
<div class="container mt-4 p-4">
<button type="button"
class="btn btn-primary ms-5"
id="demoButton_1"
data-bs-toggle="button"
autocomplete="off">
First Demo button
</button>
<button type="button"
class="btn btn-warning ms-5"
id="demoButton_2"
data-bs-toggle="button"
autocomplete="off">
Second Demo button
</button>
</div>
<div class="container mt-2 p-4">
<button type="button"
class="btn btn-success"
id="toggle-btn"
data-bs-toggle="button"
autocomplete="off">
Get the instance of the button
with primary color and toggle it
</button>
</div>
<div class="container mt-2 p-4">
<button type="button"
class="btn btn-danger"
id="dispose-btn"
data-bs-toggle="button"
autocomplete="off">
Get the instance of the button
with warning color and dispose it
</button>
</div>
<script>
var button_1 = document.getElementById("demoButton_1")
var button_2 = document.getElementById("demoButton_2")
var btn_1 = document.getElementById("toggle-btn");
btn_1.addEventListener("click", function () {
// Using the getInstance method, catch
// the preinitialized instance
const buttonInstance_1 =
bootstrap.Button.getOrCreateInstance(button_1);
// Using the toggle function with the instance
// created in the line above
buttonInstance_1.toggle();
});
var btn_2 = document.getElementById("dispose-btn");
btn_2.addEventListener("click", function () {
// Using the getOrCreateInstance method to
// catch the preinitialized instance
const buttonInstance_2 =
bootstrap.Button.getOrCreateInstance(button_2);
console.log(buttonInstance_2);
// Using the dispose function with the
// instance created in the line above
buttonInstance_2.dispose();
console.log(buttonInstance_2);
});
</script>
</body>
</html>
Output:
Reference: https://getbootstrap.com/docs/5.0/components/buttons/#button-plugin
Similar Reads
Bootstrap 5 Buttons Disable text wrapping Bootstrap 5 Buttons Disable text wrapping is used if you don't want to wrap the button text. To disable the button text wrapping, we will use .text-nowrap class with .btn class. You can also use $btn-white-space: nowrap in SASS to disable text wrapping in each button.Buttons Disable text wrapping us
2 min read
Bootstrap 5 Buttons Button tags Bootstrap 5 Buttons Button tags are used to create buttons using <a>, <button>, and <input> elements. To design the button tags, we will use .btn class. After applying the .btn class on <a>, <button>, and <input> elements, browsers can render the elements in sligh
2 min read
Bootstrap 5 Button Outline Bootstrap 5 provides a series of classes that can be used to create outline buttons in our project, i.e. buttons without background color. The outline button classes remove any background color or background image style applied to the buttons. We will use .btn-outline-* class to create the outline b
2 min read
Bootstrap 5 Buttons Sizes Bootstrap 5 provides 2 different classes that allow changing the button sizes. The .btn-lg and .btn-sm classes are used for large and small buttons. Buttons Sizes Classes: .btn-lg: This class is used to create large-size buttons..btn-sm: This class is used to create small-size buttons. Syntax: // Fo
2 min read
Bootstrap 5 Buttons Disabled state The disabled option is used to create a button with the disabled state. It is a boolean attribute for any button element. The disabled button means the button is inactive and it will not be active after clicking or hovering the button. Disabled state Attribute: disabled: This attribute is used to cr
3 min read
Bootstrap 5 Buttons Block buttons Bootstrap 5 Block buttons are used to display the full-width responsive buttons. To make the block buttons, we will use .d-grid, and .d-flex classes. We can also use screen sizes classes to change the button sizes on different screen sizes.Block buttons used Classes:.d-flex: This class is used to di
2 min read
Bootstrap 5 Button Plugin Bootstrap 5 buttons plugin gives the flexibility to play around with setting the toggle states and also with adding certain predefined button methods which help to add utility to the button or even the ability to operate even outside the actual button.Bootstrap 5 Button plugin used classes for toggl
3 min read
Bootstrap 5 Button Methods 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
3 min read
Bootstrap 5 Buttons SASS Bootstrap 5 Buttons SASS can be used to change the default values provided for the buttons by customizing scss file of bootstrap 5.SASS variables of Buttons:$btn-padding-y: This variable provides the top and bottom padding of the button. By default, it is 0.375rem.$btn-padding-x: This variable provi
7 min read