Hit enter after type your search item

Bootstrap 5 Button [With 6 Online Demos and Code]

Bootstrap 5 Buttons

You may use Bootstrap 5 buttons in:

  • Forms
  • Tables for data navigation
  • Dialogues
  • Modals
  • Accordions
  • & More

Bootstrap 5 Buttons are available with:

  • Different sizes (small, large, etc.)
  • States
  • & More

Quick Demos Online with code:

Pre-defined semantic classes, Large Button, Small Size, Disabled, Outlined buttons

The examples below show how to create buttons with Bootstrap 5 built-in classes. You can see style output as well as live examples with code.

Starting with the pre-defined semantic classes example

Bootstrap 5 (just like version 3, and BS 4 buttons) has predefined built-in classes for creating buttons. These styles have semantic meanings. For example, danger classes display the button as red that you may use for some critical action like deleting a record.

See the example below with available button classes:

Bootstrap-5-buttons

Making buttons large or small example

By default, the button size in Bootstrap is normal/medium-sized. For creating large or small-sized buttons, you may add the following classes along with the main .btn class:

  • .btn-lg (for large button)
  • .btn-sm (for small button)

The example below shows large buttons which is followed by small button example:

BS-buttons-large


The example code below shows the small button by using the btn-sm class:

BS-buttons-small

Creating disabled buttons example

Just like the normal HTML buttons, you may use the disabled attribute to make a button look in-active or disabled.

The example below shows various buttons with disabled attribute:

BS-buttons-disabled

Outline styled buttons

Want to create cool/soft-looking buttons using Bootstrap 5, simply use the .btn-outline-* as shown in the example below. This outline class removes the background color or image from the button. See the code and output below:

BS-buttons-outline

Creating block buttons example

By using a mix of display and gap utilities, you may create block buttons that are fully available width. See an example below:

BS-buttons-block


You can see that no button-specific size class is used in the above example while the button takes the full available width.
This div height required for enabling the sticky sidebar