Categories
Bootstrap HTML

Bootstrap 5 — Buttons

Spread the love

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.

Leave a Reply

Your email address will not be published.

If you like the content of this blog, subscribe to my email list to get exclusive articles not available to anyone else.