Before we move on to more advanced configuration, let's cover the basics of creating Bootstrap buttons. If you aren't new to Bootstrap, you may want to skip this section. Bootstrap comes with six different button color options out of the box. Here's a breakdown of their names and when to use them:

Now that I've explained all the button variations, let's check out the code for a button:

<button type="button" class="btn btn-primary">Primary</button> 

As you can see, I'm using the <button> tag and I've added a couple of CSS classes to it. The first is the .btn class, which I mentioned you need to include on all buttons. The second is the .btn-primary class, which indicates that you want to use the Primary button variation. If you want to use a different button style, you simply change up that second class to use the corresponding keyword. Let's take a look at the code for all of the button variations:

<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-info">Info</button> 
 
<button type="button" class="btn btn-warning">Warning</button> 
 
<button type="button" class="btn btn-danger">Danger</button> 
 
<button type="button" class="btn btn-link">Link</button> 

It's as easy as that. Note that the last line is a Link button option that I haven't talked about. This variation will appear as a text link in the browser, but will act as a button when you click or hover over it. I don't often use this variation so I left it out at first. If you view this code in your browser, you should see the following buttons: