Bootstrap 5 is in alpha when this is written and it’s subject to change.*
Bootstrap is a popular UI library for any JavaScript apps.
In this article, we’ll look at how to add buttons with Bootstrap 5.
Buttons
We can add buttons with Bootstrap 5.
They come in a variety of styles.
For example, we can write:
<button type="button" class="btn btn-primary">button</button>
<button type="button" class="btn btn-secondary">button</button>
<button type="button" class="btn btn-success">button</button>
<button type="button" class="btn btn-danger">button</button>
<button type="button" class="btn btn-warning">button</button>
<button type="button" class="btn btn-info">button</button>
<button type="button" class="btn btn-light">button</button>
<button type="button" class="btn btn-dark">button</button>
<button type="button" class="btn btn-link">link</button>
Then we get the buttons in a variety of colors.
btn-link styles the button as a link.
Disable Text Wrapping
We can add the .text-nowrap class to disable text wrapping.
Button Tags
The .btn class is supposed to be applied to the button elements, but we can also use them on a and input elements.
For instance, we can write:
<a class="btn btn-primary" href="#" role="button">link</a>
<button class="btn btn-primary" type="submit">button</button>
<input class="btn btn-primary" type="button" value="Input">
<input class="btn btn-primary" type="submit" value="Submit">
<input class="btn btn-primary" type="reset" value="Reset">
We add the .btn class to a and input elements as we do with buttons.
Outline Buttons
Buttons are also available in outline styles.
For example, we can write:
<button type="button" class="btn btn-outline-primary">button</button>
<button type="button" class="btn btn-outline-secondary">button</button>
<button type="button" class="btn btn-outline-success">button</button>
<button type="button" class="btn btn-outline-danger">button</button>
<button type="button" class="btn btn-outline-warning">button</button>
<button type="button" class="btn btn-outline-info">button</button>
<button type="button" class="btn btn-outline-light">button</button>
<button type="button" class="btn btn-outline-dark">button</button>
We have the btn-outline class to add the outline.
Sizes
The .btn-lg and .btn-sm classes let us make buttons large and small respectively.
To use them, we write:
<button type="button" class="btn btn-primary btn-lg">large button</button>
to make it big.
And we write:
<button type="button" class="btn btn-primary btn-sm">small button</button>
to make it small.
Disabled State
We can make buttons disabled with the disabled attribute.
For example, we can write:
<button type="button" class="btn btn-lg btn-primary" disabled>disabled button</button>
We just add the attribute to the button.
a tags don’t support the disabled attribute, but we can use the .disabled class to make it appear disabled visually.
pointer-events will also be set to none so that when we click on the link, it won’t do anything.
Toggle States
We can make buttons that we can toggle.
For example, we can write:
<button type="button" class="btn btn-primary" data-toggle="button" autocomplete="off">Toggle button</button>
<button type="button" class="btn btn-primary active" data-toggle="button" autocomplete="off">Active toggle button</button>
<button type="button" class="btn btn-primary" disabled data-toggle="button" autocomplete="off">Disabled toggle button</button>
We add the data-toggle attribute to make it toggleable.
Now we’ll see effects when we click on them.
It’ll be darker when it’s toggled on and lighter if it’s toggled off.
Methods
We can create a button instance with the button constructor.
For instance, we can write:
<button class="btn btn-primary">button</button>
in our HTML file and:
const button = document.querySelector('button')
const bsButton = new bootstrap.Button(button)
in our JavaScript file to create a Bootstrap button with the bootstrap.Button constructor.
The button has the toggle method to let us toggle it.
So we can write:
button.toggle()
to toggle it on and off.
Conclusion
Bootstrap 5 comes with various classes for styling buttons.
Also, we can make the toggleable with some attributes.
