In bootstrap, we have different classes to extend the default style of HTML buttons. By using the bootstrap button (.btn) classes, we can change the button color, size, state, etc. based on our requirements.
The bootstrap has provided different type of classes like .btn-primary, .btn-success, .btn-info, etc. to apply different style on buttons based on our requirements.
<button type="button" class="btn">Default</button>
<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>
If you observe the above example, we applied different bootstrap button style classes on the <button> element to change the appearance of buttons.
The above example will return the result like as shown below.
In bootstrap, the button (.btn) classes are designed to use with button (<button>) element. However, you can also apply these classes on <a> and <input> elements like as shown below.
<a class="btn btn-primary" href="#" role="button">Link</a>
<button class="btn btn-primary" type="submit">Button</button>
<input class="btn btn-primary" type="button" value="Input">
<input class="btn btn-primary" type="submit" value="Submit">
<input class="btn btn-primary" type="reset" value="Reset">
The above example will return the result like as shown below.
The bootstrap has provided different type of outline / bordered button classes (.btn-outline-*) to remove background colors and images on any button.
<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</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-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-light text-dark">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>
If you observe the above example, we used .btn-outline-* classes to create outlined / bordered buttons without any backgrounds.
The above example will return the result like as shown below.
By using bootstrap classes such as .btn-lg and .btn-sm we can change the size of buttons to larger or smaller based on our requirements.
<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-primary">Default Button</button>
<button type="button" class="btn btn-primary btn-sm">Small button</button>
The above example will return the result like as shown below.
By adding .btn-block class to button (<button>) element, we can create block level buttons and those will cover the full width of the parent elements.
<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-secondary btn-lg btn-block">Block level button</button>
The above example will return the result like as shown below.
In bootstrap, we can create a buttons with active or inactive (disabled) state by adding .active class and disabled attribute to any <button> element.
The .active class will make the button appear pressed, and the disabled attribute will make the button not clickable. The disabled attribute will not support <a> element so the buttons which created with hyper link (<a>) element must add .disabled class to make it visually appear disabled.
<button type="button" class="btn btn-primary active">Active Button</button>
<button type="button" class="btn btn-primary" disabled>Disabled Button</button>
<a href="#" class="btn btn-primary active" role="button">Active link</a>
<a href="#" class="btn btn-primary disabled" role="button">Disabled link</a>
The above example will return the result like as shown below.
By using bootstrap .spinner-border and .spinner-grow classes, we can add spinners to the button. We will learn more about spinners in next chapters.
<button type="button" class="btn btn-primary">
<span class="spinner-border spinner-border-sm"></span>
</button>
<button type="button" class="btn btn-primary" disabled>
<span class="spinner-border spinner-border-sm"></span> Loading...
</button>
<button type="button" class="btn btn-primary">
<span class="spinner-grow spinner-grow-sm"></span>
</button>
<button type="button" class="btn btn-primary" disabled>
<span class="spinner-grow spinner-grow-sm"></span> Loading...
</button>
The above example will return the result like as shown below.
This is how we can change the default style of buttons using bootstrap classes based on our requirements.