Buttons are used for various purposes on a web page, like submitting a form. And sometimes we want a link to look like a button, and have to figure out how to make that work.
Luckily, Bootstrap has given us several classes to make working with buttons and building buttons much easier! This includes both input form elements that look like a button, button elements, and links that we want to look like a button.
The .btn class is designed to be used with the <button> element but, you can also use it on <a> or <input> elements. There may be some slight variations in rendering the elements in different browsers, but they should be minor.
In addition to the .btn class, there are other sets of classes to use on the buttons.
For example, the .btn-primary class will display the button using the primary color, and if you use .btn-outline-primary, it will create a button with the outline the color of the primary color.
Button Colors
In addition to the primary color, you can also use your other colors such as secondary, success, warn, etc. Regardless of if you use a filled in color, or an outline, you will have to have both the .btn class and the other class as well. See before for an example.
<a class="btn btn-primary" href="#" role="button">Link</a>
<button class="btn btn-primary" type="submit">Button</button>
<button type="button" class="btn btn-outline-primary">Primary</button>Button Sizes
In addition to making the basic buttons, you can also change the size. This is good for trying to have a larger button as part of a call to action, or a smaller button if you need.
<button type="button" class="btn btn-primary btn-lg">Large button</button>
<a class="btn btn-secondary btn-lg">Large button</a>
<button type="button" class="btn btn-primary btn-sm">Small button</button>
<a class="btn btn-secondary btn-sm">Small button</a>Other Types of Buttons
You can also style radio buttons and checkboxes with the .btn classes to stylize your forms a little more. While I personally like the toggle switch, for a checkbox others prefer these buttons.
The radio button builds a group with one selected, and looks nice, as well as being accessible.
You can see from the example below how simple it is to modify the form element and build a completely different design than the standard HTML form, but still work within the format of the Bootstrap themed form.
<div class="btn-group-toggle" data-toggle="buttons">
<label class="btn btn-secondary active">
<input type="checkbox" checked autocomplete="off"> Checked
</label>
</div>
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-secondary active">
<input type="radio" name="options" id="option1" autocomplete="off" checked> Active
</label>
<label class="btn btn-secondary">
<input type="radio" name="options" id="option2" autocomplete="off"> Radio
</label>
<label class="btn btn-secondary">
<input type="radio" name="options" id="option3" autocomplete="off"> Radio
</label>
</div>Building Better Buttons in Bootstrap was originally found on Access 2 Learn
