Bootstrap Buttons

Buttons are made with the class .btn, and a color class like .btn-primary. You can use it on a button, an a or an input tag.

Button colors

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>

Outline buttons

<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-dark">Dark</button>

Sizes

<button type="button" class="btn btn-primary btn-lg">Large</button>
<button type="button" class="btn btn-primary">Default</button>
<button type="button" class="btn btn-primary btn-sm">Small</button>

Full width (block) buttons

In Bootstrap 5 the class .btn-block is removed. Put the buttons in a d-grid wrapper instead:

<div class="d-grid gap-2">
  <button class="btn btn-primary" type="button">Full width button</button>
  <button class="btn btn-outline-secondary" type="button">Another full width button</button>
</div>

Disabled buttons

<button type="button" class="btn btn-primary" disabled>Disabled button</button>
<a href="#" class="btn btn-secondary disabled" tabindex="-1" aria-disabled="true" role="button">Disabled link</a>

For a button, use the disabled attribute. For a link, use the class .disabled together with aria-disabled="true".

Button group

<div class="btn-group" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-outline-primary">Left</button>
  <button type="button" class="btn btn-outline-primary">Middle</button>
  <button type="button" class="btn btn-outline-primary">Right</button>
</div>

Toggle button

With data-bs-toggle="button", a button switches the class active on every click. Let us test it in real Chrome:

<button type="button" id="tog" class="btn btn-outline-primary" data-bs-toggle="button">Toggle me</button>

const btn = document.getElementById('tog');
console.log('before click, has active class: ' + btn.classList.contains('active'));
btn.click();
console.log('after 1st click, has active class: ' + btn.classList.contains('active') + ', aria-pressed = ' + btn.getAttribute('aria-pressed'));
btn.click();
console.log('after 2nd click, has active class: ' + btn.classList.contains('active'));

Close button

<button type="button" class="btn-close" aria-label="Close"></button>

The .btn-close is used in alerts, modals and offcanvas. It replaces the old .close of Bootstrap 4.

• Previous Page
• Next Page

---

Exercises & Assignments
No Content Found.

Interview Questions & Answers
No Content Found.