BOOTSTRAP 4 BUTTONS
In this tutorial, you will learn to create different types of buttons using bootstrap.
Bootstrap Buttons
Bootstrap provides us nine different kinds of button styles which can be achieved just by adding few classes. To start with the button use .btn class. Other than this you need to add any of nine classes.
The other extra classes can be used to easily create buttons of different styles, each serves its own semantic purpose.
Bootstrap 4 provide us nine different types of button, use these button classes to create a button of your choice. The button classes are:
- btn-primary - A button with a blue background color.
- btn-success - A button with a green background color.
- btn-info - A button with an blue background color.
- btn-warning - A button with a orange background color.
- btn-danger - A button with a red background color.
- btn-secondary - A button with a gray background color.
- btn-light - A button with a light background color.
- btn-dark - A button with a dark background color.
- btn-link - A button with a bluish style.
Example:
Code:
Example
<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>
▶ Run the code
Bootstrap button on <a> and <input> tag
Bootstrap's .btn
classes are designed to be used with <button>
tag, but it can be used with <a>
and <input>
tags also.
Add role="button"
on <a>
tag to appropriately convey their purpose.
Example:
Code:
Example
<a class="btn btn-primary" href="#" role="button">Link</a>
<button class="btn btn-primary" type="submit">Button primary</button>
<input class="btn btn-primary" type="button" value="Input">
<input class="btn btn-primary" type="submit" value="Submit Button">
<input class="btn btn-primary" type="reset" value="Reset Button">
▶
Run the code
Outline Buttons
The bootstrap's outline button has a transparent background, colored text, and colored border.
Add btn-outline-*
class to <button>
tag to get the outline button.
Example:
Code:
Example
<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">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>
▶ Run the code
Button Sizes
Bootstrap provides us four different sizes of buttons, use these classes to create a button of your choice. The button size classes are:
- btn-sm - A small button.
- btn-lg - A large button.
Example:
Code:
Example
<button class="btn btn-primary btn-lg">Large button</button>
<button class="btn btn-primary">Normal button</button>
<button class="btn btn-primary btn-sm">Small button</button>
▶
Run the code
You can also create a block-level button that covers the full width of the parent element by adding .btn-block
.
Code:
Example
<button class="btn btn-primary btn-block">Block Level Button</button>
<button class="btn btn-secondary btn-block">Block Level Button</button>
▶ Run the code
Bootstrap Disabled Buttons
There are many situations when we want a disabled button. Example: when the user has not filled all necessary input of a form when the user has not accepted terms and conditions and many more. So in such a situation, we disable the button to stop further actions.
To make a button disabled use the disabled
boolean attribute to any button element.
Example:
Code:
Example
<button type="button" class="btn btn-primary" disabled>Disabled button</button>
<button type="button" class="btn btn-secondary" disabled>Disabled button</button>
▶ Run the code
Note: disabled
is a button attribute you can't
use on anchor tag (<a>).
To create a disabled button for <a> tag use .disabled
class to make it visibally disabled.
Disabled buttons should include the aria-disabled="true"
attribute to indicate the state of the element.
<a href="#" class="btn btn-primary disabled" role="button" aria-disabled="true">Primary link</a>
<a href="#" class="btn btn-secondary disabled" role="button" aria-disabled="true">Link</a>
▶ Run the code
Bootstrap Active Button
As we can disable a button, we can also make a button visibly active button. To make a button active use .active
class.
Example:
Code:
Example
<button type="button" class="btn btn-primary active">Active button</button>
<button type="button" class="btn btn-primary">Normal button</button>
▶
Run the code
Conclusion
We have covered all the button types and their use cases. We have also covered how to make a button look like a link and how to make a button look like a block-level element.
To learn how to make a button look like a button with an icon.
Points to remember:
- To create a basic button use
.btn
class. - Bootstrap 4 provides 9 different types of button styles which are of different colors indicating different meanings.
- To create bordered button use
.btn-bordered-*
class (replace * with button theme you want)