Bootstrap button styles can be added to many different HTML elements, but the most common ones are BUTTON and INPUT.
Above, the first button is a BUTTON element and the second one is an INPUT element. There's no difference in appearance. Normally you would use an INPUT element only in an HTML form. All other buttons would be BUTTON elements. Learn more about the HTML BUTTON element.
There are two Bootstrap button classes, and they must be used together. The first is btn and the second is btn-{color} — with {color} being one of the Bootstrap color names, which are explained here.
Important: If you want a button to simply take the user to a new page, you can apply the Bootstrap button classes to an A element with an HREF attribute:
<a href="index.html" class="btn btn-info">Click Me</a>
The button above will open the Index page of this document set. Use the browser's Back button to return to this page.
Another common thing you'll want to do with a button is to open some kind of interactive element without leaving the current page. To do that, you'll need JavaScript to monitor the page and respond when the button is clicked.
Click the button above. You can view source on this page to see the JavaScript that makes it work. I'm using the Bootstrap class visually-hidden to hide a row (learn more). You can also see a commented version of the JavaScript. It can be messy to try to hide a column inside a row, but hiding an entire row usually works cleanly and well.
Note that there is no JavaScript code on the button itself. This is the modern way to use JavaScript. The JS is always external to the HTML.