Bootstrap 4 button CSS classes

Posted by Editorial Staff | Updated on

Below are the list of Bootstrap 4 button CSS classes with the descriptions.

Button ClassDescription
.btnAdds basic styling to any button
.btn-blockMakes a block-level button (spans the full width of the parent element)
.btn-dangerIndicates a dangerous or potentially negative action
.btn-darkDark grey button
.btn-defaultIndicates a default/standard button
.btn-infoContextual button for informational alert messages
.btn-lgMakes a large button
.btn-lightLight grey button
.btn-linkMakes a button look like a link (will still have button behavior)
.btn-outline-*Creates an outlined/bordered button. Use any of the contextual classes as * (btn-outline-primary, btn-outline-success, etc)
.btn-primaryProvides extra visual weight and identifies the primary action in a set of buttons
.btn-smMakes a small button
.btn-successIndicates a successful or positive action
.btn-secondaryIndicates a “less” important action
.btn-toolbarCombine sets of button groups into button toolbars for more complex components
.btn-warningIndicates caution should be taken with this action
.activeMakes the button appear pressed
.disabledMakes the button disabled

Bootstrap 4 Buttons Example


If you like this question & answer and want to contribute, then write your question & answer and email to freewebmentor[@]gmail.com. Your question and answer will appear on FreeWebMentor.com and help other developers.

Related Questions & Answers