Buttons are all around us—and no, I'm not referring to the buttons on your favorite dress shirt. If you've ever been on an elevator (hey, some people absolutely refuse to step into one), you will no doubt see buttons—and pressing one of them will transport you to a place you want to go. The same thing goes with your TV remote—but instead of transporting you (at least not quite yet—but maybe in the future, y'all just never know), it transports your mind to another place from the very comfort of your living room. These buttons perform functional, meaningful tasks. How about buttons on a web page? Well, arguably, they also transport things—such as information, when you click the submit button on a form that you fill out. But perhaps an equally important feature of buttons is to help make your web pages attractive, and intuitive. Luckily, Bootstrap makes it super easy to add beautifully styled buttons to our web pages—100 times more refined than the default gray button that a browser renders when you add a button element.

Let's take a look at a few of these while exploring some of Bootstrap's pre-defined button classes (that is, styles).

Out of the box, without any tweaking necessary, we can easily insert a beautifully styled button by assigning two classes to the button element like this:

<button type="button" class="btn btn-primary">Click me</button>

That button is blue in color, but there are other default colors we have access to via these other classes:

• btn-secondary: Light charcoal gray, with white font
• btn-success: Light green, with white font
• btn-danger: Red, with white font 
• btn-warning: Goldenrod, with black font
• btn-info: Teal, with white font 
• btn-light: Light gray, with black font 
• btn-dark: Almost black, with white font

There's also a class for turning a button into a link: btn-link

If you prefer something more white, or less heavy on the color, Bootstrap has a set of classes that match the preceding classes called Outline buttons. The colors and class names are the same, with the only difference being the word outline between btn and secondary, success, danger, and so on. The buttons are transparent except for the outline, or border, and of course, the font color for the text on the button.

Here's what these class names look like:

• btn-outline-secondary: Light charcoal gray outline, with the same color for the font
• btn-outline-success: Light green outline, with the same color for the font
• btn-outline-danger: Red outline, with the same color for the font 
• btn-outline-warning: Goldenrod outline, with the same color for the font
• btn-outline-info: Teal outline, with the same color for the font 
• btn-outline-light: Light gray outline, with the same color for the font
• btn-outline-dark: Almost black outline, with the same color for the font

All these buttons come in a default size in terms of height, and font size. However, as you may have guessed, Bootstrap has a way in which to make the default button larger or smaller by adding the .btn-lg or .btn-sm class, respectively. Here is what that would look like:

• <button type="button" class="btn btn-primary btn-lg">I'm large</button>
• <button type="button" class="btn btn-primary btn-sm">I'm small</button>

You can read all you care to about Bootstrap's buttons here: https://getbootstrap.com/docs/4.0/components/buttons/