Buttons

Bootstrap includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control. If you don’t want the button text to wrap, you can add the .text-nowrap class to the button. In Sass, you can set $btn-white-space: nowrap to disable text wrapping for each button.

Button Colors

 Copy<a href="#x" class="btn btn-primary">Primary</a>
<a href="#x" class="btn btn-secondary">Secondary</a>
<a href="#x" class="btn btn-success">Success</a>
<a href="#x" class="btn btn-info">Info</a>
<a href="#x" class="btn btn-warning">Warning</a>
<a href="#x" class="btn btn-danger">Danger</a>

Button Styles

Light Buttons

Replace the default modifier classes with the .btn-*-light to make all buttons appear in their light color variant.

Outline Buttons

In need of a button, but not the hefty background colors they bring? Replace the default modifier classes with the .btn-outline-* ones to remove all background images and colors on any button.

Gradient Buttons

Replace the default modifier classes with the .btn-gradient-* to add a gradient background-color to the buttons.

Examples:

 Copy<a href="#x" class="btn btn-primary-light">Primary Light</a>
<a href="#x" class="btn btn-outline-primary">Primary Outline</a>
<a href="#x" class="btn btn-gradient-primary">Primary Gradient</a>

Button Shapes

To change the button's shapes you can add helper classes, like .sharp to remove border-radius, .pill to add 50% border-radius and .rounded-[value] utility classes, the rounded values are from 5 to 30, increasing in steps of 5 (px).

 Copy<a href="#x" class="btn btn-primary sharp">Sharp</a>
<a href="#x" class="btn btn-primary">Default</a>
<a href="#x" class="btn btn-primary rounded-10">Rounded-10</a>
<a href="#x" class="btn btn-primary pill">Pill</a>

Button Sizes

Fancy larger or smaller buttons? Add .btn-lg, .btn-sm or .btn-xs for additional sizes.

 Copy<a href="#x" class="btn btn-xs btn-primary">xSmall</a>
<a href="#x" class="btn btn-sm btn-primary">Small</a>
<a href="#x" class="btn btn-primary">Medium</a>
<a href="#x" class="btn btn-lg btn-primary">Large</a>

Icon Buttons

Buttons with icons added besides text and buttons built just to include icons, without additional text. Utility classes like .sharp, .rounded-*, .pill, .btn-circle and button colors like .btn-outline-*, .btn-*-light and .btn-gradient-* can also be used on icon buttons.

 Copy<a href="#x" class="btn btn-primary"><span class="fas fa-check mr-10"></span> <span>Check</span></a>
<a href="#x" class="btn btn-primary-light pill"><span>Next</span> <span class="fas fa-chevron-right ml-10"></span></a>
<a href="#x" class="btn btn-icon btn-circle btn-outline-primary"><span class="fas fa-lock"></span></a>
<a href="#x" class="btn btn-icon btn-no-border btn-gradient-primary"><span class="fas fa-flag"></span></a>