Anything given a class .btn will inherit the default look of a gray button with rounded corners. However, Bootstrap provides some options for styling of buttons. The following table below summarizes these options -
Sr.No. | Class & Description |
---|---|
1 | btn Default/ Standard button. |
2 | btn-primary Provides extra visual weight and identifies the primary action in a set of buttons. |
3 | btn-success Indicates a successful or positive action. |
4 | btn-info Contextual button for informational alert messages. |
5 | btn-warning Indicates caution should be taken with this action. |
6 | btn-danger Indicates a dangerous or potentially negative action. |
7 | btn-link Deemphasize a button by making it look like a link while maintaining button behavior. |
Example
<!-- Standard button --> <button type = "button" class = "btn btn-default">Default</button> <!-- Provides extra visual weight and identifies the primary action in a set of buttons --> <button type = "button" class = "btn btn-primary">Primary</button> <!-- Indicates a successful or positive action --> <button type = "button" class = "btn btn-success">Success</button> <!-- Contextual button for informational alert messages --> <button type = "button" class = "btn btn-info">Info</button> <!-- Indicates caution should be taken with this action --> <button type = "button" class = "btn btn-warning">Warning</button> <!-- Indicates a dangerous or potentially negative action --> <button type = "button" class = "btn btn-danger">Danger</button> <!-- Deemphasize a button by making it look like a link while maintaining button behavior --> <button type = "button" class = "btn btn-link">Link</button>
Output
Button Size
Sr.No. | Class & Description |
---|---|
1 | .btn-lg This makes the button size large. |
2 | .btn-sm This makes the button size small. |
3 | .btn-xs This makes the button size extra small. |
4 | .btn-block This creates block level buttons—those that span the full width of a parent. |
Example
<p> <button type = "button" class = "btn btn-primary btn-lg"> Large Primary button </button> <button type = "button" class = "btn btn-default btn-lg"> Large button </button> </p> <p> <button type = "button" class = "btn btn-primary"> Default size Primary button </button> <button type = "button" class = "btn btn-default"> Default size button </button> </p> <p> <button type = "button" class = "btn btn-primary btn-sm"> Small Primary button </button> <button type = "button" class = "btn btn-default btn-sm"> Small button </button> </p> <p> <button type = "button" class = "btn btn-primary btn-xs"> Extra small Primary button </button> <button type = "button" class = "btn btn-default btn-xs"> Extra small button </button> </p> <p> <button type = "button" class = "btn btn-primary btn-lg btn-block"> Block level Primary button </button> <button type = "button" class = "btn btn-default btn-lg btn-block"> Block level button </button> </p>
Output
Button State
Active State
Following table below summarizes classes used to make button and anchor elements active -
Element | Class |
---|---|
Button element | Use .active class to show that it is activated. |
Anchor element | Use .active class to <a> buttons to show that it is activated. |
Example
<p> <button type = "button" class = "btn btn-default btn-lg "> Default Button </button> <button type = "button" class = "btn btn-default btn-lg active"> Active Button </button> </p> <p> <button type = "button" class = "btn btn-primary btn-lg"> Primary button </button> <button type = "button" class = "btn btn-primary btn-lg active"> Active Primary button </button> </p>
Output
Disabled State
Following table below summarizes classes used to make button elements and anchor elements disabled -
Element | Class |
---|---|
Button element | Add the disabled attribute to <button> buttons. |
Anchor element | Add the disabled class to <a> buttons. Note − This class will only change the <a>'s appearance, not its functionality. You need to use custom JavaScript to disable links here. |
Example
<p> <button type = "button" class = "btn btn-default btn-lg"> Default Button </button> <button type = "button" class = "btn btn-default btn-lg" disabled = "disabled"> Disabled Button </button> </p> <p> <button type = "button" class = "btn btn-primary btn-lg"> Primary button </button> <button type = "button" class = "btn btn-primary btn-lg" disabled = "disabled"> Disabled Primary button </button> </p> <p> <a href = "#" class = "btn btn-default btn-lg" role = "button"> Link </a> <a href = "#" class = "btn btn-default btn-lg disabled" role = "button"> Disabled Link </a> </p> <p> <a href = "#" class = "btn btn-primary btn-lg" role = "button"> Primary link </a> <a href = "#" class = "btn btn-primary btn-lg disabled" role = "button"> Disabled Primary link </a> </p>
Output
Button Tags
Example
<a class = "btn btn-default" href = "#" role = "button">Link</a> <button class = "btn btn-default" type = "submit">Button</button> <input class = "btn btn-default" type = "button" value = "Input"> <input class = "btn btn-default" type = "submit" value = "Submit">
Output
Feel free to ask your questions where necessary and we will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.
Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.
Thanks for reading and bye for now.