The buttons are used for a variety of purposes.
Styling them according to their usage not only makes them look good but also understandable to the user.
Let’s have a look at the different features that Bootstrap has for buttons.
Bootstrap Button Styles
Bootstrap 4 has following contextual classes for styling the buttons.
- .btn: Basic styling class for button element.
- .btn-default: For a standard button style.
- .btn-primary: Has two purposes. Styling the button with extra visual weight and identifying the primary action in a set of buttons
- .btn-success: To indicate any positive or successful action
- .btn-info: Any informative alert message or neutral action can be indicated using this class with the buttons
- .btn-warning: A cautionary notification button suggesting special attention for any action
- .btn-danger: Any non-recommended or potentially negative action can be notified usin this button class.
- .btn-link: The button, using this class, looks like a link.
Here’s a sample code illustrating the use of all these classes while describing their purpose.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <button type="button" class="btn">Basic</button> <button type="button" class="btn btn-default">Default</button> <button type="button" class="btn btn-primary">Primary</button> <button type="button" class="btn btn-success">Success</button> <button type="button" class="btn btn-info">Info</button> <button type="button" class="btn btn-warning">Warning</button> <button type="button" class="btn btn-danger">Danger</button> <button type="button" class="btn btn-link">Link</button> |
The above mentioned classes can be used with button (<button>
), anchor <a>
or even input (<input>
) elements. Here’s an example
1 2 3 4 5 6 7 | <a href="#" class="btn btn-info" role="button">Link Button</a> <button type="button" class="btn btn-info">Button</button> <input class="btn btn-info" value="Input Button" type="button"> <input class="btn btn-info" value="Submit Button" type="submit"> |
Bootstrap Button Sizes
There are four classes to indicate different button sizes in Bootstrap.
Here are the four:
- .btn-lg: For a large sized button
- .btn-sm: For a small sized buttons
- .btn-xs: For extra-small sized buttons
- .btn-block: For block level buttons.
Here’s the sample code to illustrate the uses for these contextual classes:
1 2 3 4 5 6 7 | <button type="button" class="btn btn-primary btn-lg">Large</button> <button type="button" class="btn btn-primary btn-md">Medium</button> <button type="button" class="btn btn-primary btn-sm">Small</button> <button type="button" class="btn btn-primary btn-xs">XSmall</button> |
Bootstrap Block Level Buttons
These are special type of buttons that take the entire width of whatever containing element they are in.
the class .btn-block can be used to create such block level buttons:
1 | <button type="button" class="btn btn-primary btn-block">Button 1</button> |
Bootstrap Active/Disabled Buttons
You can set the active (appear pressed) or a disabled (unclickable) state by using the .active and unclickable classes.
Following code illustrates the same:
1 2 3 | <button type="button" class="btn btn-primary active">Active Primary</button> <button type="button" class="btn btn-primary disabled">Disabled Primary</button> |
Bootstrap Button Group Classes
These are special group classes that can also be used with <a> and <input> tags along with the <button> elements:
- .btn-group: Used to group the buttons on a single line.
- .btn-group-justified: Along with grouping the buttons like above, it makes them span across the entire screen width
- .btn-group-lg: Making buttons larger in a group. Basically, the padding and the font sizes are increased for all the grouped buttons
- .btn-group-sm: Making buttons small in a group. Basically, the padding and the font sizes are made small for all the grouped buttons
- .btn-group-xs Making buttons extra-small in a group. Basically, the padding and the font sizes are made extra-small for all the grouped buttons
- .btn-group-vertical: The grouped buttons are stacked vertically as per the space or screen requirement.