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.