There are tons of uses for buttons in Bootstrap. And since we are all web developers, buttons are a mainstay for what we do. Overall, they are very simple to use. There are a few tips I will include to make their use easier and above all, user-friendly.
Bootstrap contains a button for each of the color options available. There are two additional ones you should be aware of: transparent and link. Link buttons simply treat a hyperlink as a button - with all of the padding and spacing of a button. Transparent buttons do the same thing but are actual button elements. More on how I use that one later.
Example solid buttons.
Button markup is very simple. You assign the class btn to the element and then follow with the class btn-{color} markup that sets the color.
<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-transparent">Transparent</button>
<button type="button" class="btn btn-link">Link</button>
I like to use the transparent button as a "spacer" between buttons. Because buttons are block level elements - meaning they are "blocks", not just lines of text, it is hard to place text between buttons evenly. I like to place a disabled transparent button between buttons to allow for better spacing.
<button type="button" class="btn btn-primary">Save</button>
<a type="button" class="btn btn-transparent disabled">-OR-</a>
<button type="button" class="btn btn-danger">Cancel</button>Since there are 3 types of buttons available in HTML (button, submit, & reset) you can adjust them all to appear as Bootstrap buttons! You can apply the same thing to hyperlinks - which comes in really handy! Note the optional ending tag style of coding buttons instead of using a value attribute.
<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">
<button class="btn btn-primary" type="submit">No value button</button>
<a class="btn btn-primary" href="#" role="button">Link</a>There are alternate outline versions of each button color class. Keep in mind, these are transparent - so the center isn't white - it will show your background color through. This, oddly, is a known thing and cannot be corrected without custom CSS.
<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>The easiest way to create a custom button in Bootstrap is to:
buttons.csslink to your new CSS file AFTER the call to the Bootstrap CSS file.
Let's talk about usability for a second. One of the easiest ways to make an app easy to navigate is urging users in the direction you want/need them to go. Bootstrap makes this easier on us as developers with their colors and sizing options. If we take the buttons as an example, many of us (self included) have just thrown a standard gray submit button at the bottom of a form and called it quits.
Earlier, I showed a simple way to split button options using a disabled button between your two calls to action. If we take that as an example here and you are giving your user the option to do something destructive....delete, purge, etc. you should use a solid button for the positive task and an outline button for the destructive one (adding a simple javascript confirm option is a good idea too) to help visually separate the options.
Why do this? Let's face it...nobody likes to read anymore. if you throw two gray buttons down there and the user clicks the wrong one because they had to read the buttons, we all know it's their fault but they won't see it that way. So, to make it easier, we convey "press this one" to them by adding a blue or green button for the positive action and add a less prominent red or gray destructive option, then their brain will focus on the brighter button by default.
There are three size options in Bootstrap. The standard btn btn-{color} chain of classes creates a standard sized button. If you want something larger, you can add btn btn-{color} btn-lg to create a large button. Need a small button for something? You can add btn btn-{color} btn-sm to create a small button.
<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-primary">Standard button</button>
<button type="button" class="btn btn-secondary btn-lg">Large button</button>Sometimes you need a button to span across a column, DIV, table cell, or other container. This is super easy in Bootstrap - just use the btn-block class and it will span 100% of the parent containing element.
<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-success btn-lg btn-block">Block level button</button>