Bootstrap includes six predefined button styles, each serving its own semantic purpose.
Use a class .btn-outline-{color}to quickly create a outline button.
Use .btn-flat-{color}to create a flat button
use bg-gradient-{color}create gradient buttons
Use .btn-relief-{color}to create a relief button
Use a class .squarewith outline button class to create square outline button.
Use a class .roundwith outline button class to create round outline button.
You can change the font color of buttons, using .text-{color}
You can use .btn-icon. you can create a rounded button by using .rounded-circlewith .btn-icon. You can only use .btn-iconwhen you only want icon in your button
Group a series of buttons together on a single line with the button group. Wrap a series of buttons with .btnin .btn-group.
Add .btn-lgor .btn-smfor Fancy larger or smaller buttons size.
Add .btn-lgor .btn-smwith .btn-outline-*for outline btn in diffrent sizes
Create block level buttons—those that span the full width of a parent—by adding .btn-block.
The .btnclasses are designed to be used with the <button>element. However, you can also use these classes on <a>or <input>elements.
Make a set of buttons appear vertically.
Vertical variation with different colors
Vertical variation with Outlines