Bootstrap 4 Tutorial
BS4 Introduction BS4 Getting Started BS4 Containers BS4 Typography BS4 Grid Basics BS4 Tables BS4 Images BS4 Jumbotron BS4 Buttons BS4 Button Groups BS4 Spinners BS4 Alerts BS4 Dropdowns BS4 Collapse BS4 Navs BS4 Navbars BS4 Pagination BS4 Breadcrumbs BS4 Badges BS4 Progress Bars BS4 List Groups BS4 Cards BS4 Forms BS4 Inputs BS4 Input Groups BS4 Custom Forms BS4 Carousel BS4 Modal BS4 Tooltips BS4 Popovers BS4 Toast BS4 Scrollspy BS4 Media Objects BS4 Filters BS4 Utilities Bootstrap 3 vs. Bootstrap 4
Bootstrap 4 Grid
BS4 Grid System BS4 Grid XSmall BS4 Grid Small BS4 Grid Medium BS4 Grid Large BS4 Grid XLarge
Bootstrap 4 Reference
JS Alert JS Carousel JS Collapse JS Dropdown JS Modal JS Popover JS Tab JS Toasts JS Tooltip

Bootstrap 4 Buttons


Button Styles

Anything that is given a class of .btn will inherit the default look of a transparent button with rounded corners.

However, Bootstrap 4 includes several predefined button styles, each serving its own semantic purpose.

Run code

Button Tags

The .btn-* classes are designed to be used with the <button> element. However, you can also use these classes on <a> or <input> elements (though some browsers may apply a slightly different rendering).

Link
Run code

When using button classes on <a> elements that are used to trigger in-page functionality (like collapsing content), rather than linking to new pages or sections within the current page, these links should be given a role="button" to appropriately convey their purpose to assistive technologies such as screen readers.



Outline Buttons

You can also create outline buttons by replacing the button modifier classes with the .btn-outline-* ones.

Run code

Button Sizes

Bootstrap 4 gives you option further to scaling a button up or down.

Add the .btn-lg class for large buttons or .btn-sm class for small buttons.

Run code

Button States

A button can be set to an active (appear pressed) or a disabled (unclickable) state.

Make buttons look active by adding the .active class to any <button> element.

Make buttons look inactive by adding the disabled boolean attribute to any <button> element.

Run code

Note that <a> elements do not support the disabled attribute and must therefore use the .disabled class to make it visually appear disabled.


Block Level Buttons

You can also create block level buttons (buttons that covers the full width of the parent elements) by adding .btn-block class.

Run code

Spinner Buttons

With Bootstrap 4 you can easily include spinner icon in a button to indicate the loading state in your application.

Run code

You can learn more about Bootstrap 4 spinners in our BS4 Spinners Tutorial.