Bootstrap Buttons: Classes & Styles Explained

Buttons are a key element of web design. They draw the visitor’s eye and help them take action on your website.

Knowing the importance of this element, the CSS framework Bootstrap provides ready-made templates for buttons. These templates allow you to quickly and easily create and customize buttons on your Bootstrap site. You’ll just need to have some technical knowledge of HTML and CSS to do so.

In this post, you’ll learn how to create buttons with Bootstrap, what the button classes are, and what styles are possible with Bootstrap.

How to Create a Button in Bootstrap

Creating a button in Bootstrap is easy thanks to the predesigned templates. You can simply copy and paste the code of any of the predefined styles (shown below) into the body section of your HTML file to add buttons to your site.

Image Source

You’re not limited to these default options, however. Bootstrap supports multiple colors, sizes, and states so you can change the appearance and behavior of your buttons.

To understand how to change the appearance and behavior of Bootstrap buttons, we first have to understand button classes.

Bootstrap Button Classes

The Bootstrap button class is .btn. Using this button class with a <button> element will create an unformatted button.

See the Pen bootstrap button by HubSpot (@hubspot) on CodePen.

To make the button more visible (and clickable!) to visitors, you can add modifier classes.

Bootstrap buttons have nine default modifier classes, each with different use cases. Let's take a closer look at these default modifier classes below.

.btn-primary

The .btn-primary class can be used to provide more visual weight to a button while representing a primary action for visitors to take on the page. For example, on a business site's homepage, the primary button might invite visitors to purchase their product.

See the Pen bootstrap button - primary by HubSpot (@hubspot) on CodePen.

.btn-secondary

The .btn-secondary class can be used to provide more visual weight to a button while representing a secondary action for visitors to take on the page.

While a primary button might invite visitors to purchase a product on a business site's homepage, the secondary button might invite visitors to demo it. Here’s an example of the two classes together.

See the Pen bootstrap button - secondary by HubSpot (@hubspot) on CodePen.

.btn-success

The .btn-success class can be used to indicate a successful or positive action. For example, at the end of a form, the success button can encourage visitors to submit.

See the Pen bootstrap button - success by HubSpot (@hubspot) on CodePen.

.btn-danger

The “danger” class can be used to indicate a potentially dangerous or negative action.

While the success button can encourage visitors to submit a form, you might want to use a danger button instead to ensure visitors review their information before submitting. This is especially important if they can't go back and change their information once they submit.

Here’s an example of the .btn-success and .btn-danger classes side-by-side.

See the Pen bootstrap button - danger by HubSpot (@hubspot) on CodePen.

.btn-warning

Similarly, the .btn-warning class can represent a warning. For example, if a user is creating an account, the warning button can indicate that some required fields were missed and must be filled in before continuing with registration.

See the Pen bootstrap button - warning by HubSpot (@hubspot) on CodePen.

.btn-info

The .btn-info class can represent an informational alert. For example, on an account registration form, an info button might indicate that a user can click to edit their profile.

See the Pen bootstrap button - info by HubSpot (@hubspot) on CodePen.

.btn-light

The .btn-light class is a great option for web pages with dark background colors.

See the Pen bootstrap button - light by HubSpot (@hubspot) on CodePen.

.btn-dark

The .btn-dark class works well for web pages with light background colors.

See the Pen bootstrap button - dark by HubSpot (@hubspot) on CodePen.

.btn-link

You can use the .btn-link class if you’re looking to deemphasize the appearance of a button. It will make a button look like a link but still behave like a button.

See the Pen bootstrap button - link by HubSpot (@hubspot) on CodePen.

For more customization options, you can either replace these default modifier classes or combine them with other CSS classes for additional color, size, and state options.

Before we take a closer look at these style options, it’s important to note that .btn classes can be used with other elements in Bootstrap.

How to Use Bootstrap Button Classes with Other Elements

While Bootstrap’s button classes are designed to be used with the <button> element, they can also be used on <a> or <input> elements. That means you can use button classes to link to new pages or sections within a current page.

You can also button classes on <a> elements to collapse content or otherwise trigger on-page functionality. In that case, these links should be given a role="button" to appropriately convey their purpose to assistive technologies such as screen readers, as shown below.

In addition to showing a button class being used with an <a> element, the following example includes button classes being used with the <button> and <input> element.

See the Pen bootstrap button - using classes with other elements by HubSpot (@hubspot) on CodePen.

Now that we understand how button classes work on <button>, <a>, and <input> elements, let’s take a look at the different button styles you can use on your Bootstrap site.

Bootstrap Button Styles

As mentioned earlier, you can create new styles for your Bootstrap buttons by replacing any of the nine default modifier classes or by combining them with other classes. Both methods will enable you to create buttons in additional colors, sizes, and states.

Let’s take a closer look at these button design options below.

Bootstrap Button Colors

Using a default modifier class will change the color of the text and background color of your button. .btn-danger will make the button red and font white, .btn-warning will make the button yellow and font black, and so on.

But, say you want to apply a different text and background color to your buttons. You can do this by using the .btn class in your HTML and a class selector in your CSS.

Say you want to make the background color of your button purple and the text white. Then you’d use the CSS selector .btn, paired with declarations that change the text and background colors. See the example below:

See the Pen bootstrap button - unsing bootstrap with other elements by HubSpot (@hubspot) on CodePen.

To learn more about overriding Bootstrap's default styling, check out our post How to Edit, Customize, and Override Bootstrap CSS.

Bootstrap Outline Buttons

If you prefer your buttons to have colored outlines instead of colored backgrounds, use the modifier class .btn-outline. The same default options for button colors are available for outline buttons, as shown below. No CSS is required to use any of these styles.

Image Source

If you’re looking for more design options, you can change the outline color to any color you want using the same method as outlined above. Just use the class .btn btn-outline in your HTML instead of .btn and the CSS style property border-color instead of background-color.

See the Pen bootstrap button - outline by HubSpot (@hubspot) on CodePen.

Bootstrap Button Size

You can also control the size of your buttons with the modifier class .btn-lg or .btn-sm.

See the Pen bootstrap button - button sizes by HubSpot (@hubspot) on CodePen.

Bootstrap Button States

To change your button’s state, use the class .active to make the button look like it’s been pressed. It will have a darker background, darker border, and inset shadow.

For the opposite effect, use the disabled attribute to make a button look like it can’t be pressed. Note that disabled is an attribute, not a class.

It’s also important to note that <a> elements do not support the disabled attribute. You’ll have to use the .disabled class to make <a> elements appear inactive. Since the .disabled class disables the link functionality of <a> elements, these modified elements will not only appear unclickable — they will be unclickable.

See the Pen bootstrap button - states by HubSpot (@hubspot) on CodePen.

Bootstrap Toggle Buttons

To create a Bootstrap button that switches from its default state to an active state when a visitor clicks on it, you can add data-toggle="button" after your .btn class. Once clicked, this button will retain its darker background, darker border, and inset shadow. (The inset shadow does disappear when the visitor clicks elsewhere on the page.)

See the Pen bootstrap button - toggle by HubSpot (@hubspot) on CodePen.

Bootstrap Radio Buttons

Radio buttons are usually presented in groups. Within a group of radio buttons, only one button can be selected at a time. Selecting a button will automatically deselect the currently selected button.

The HTML code for this is a little trickier than the other examples, so we’ll go through it step-by-step.

The syntax of a radio button is <input type="radio">. Let’s insert that code three times to create a group of three. Each button has to share the same name attribute, so we’ll add name=”options” to the same line. And since we may want to apply different styles to each <input> element, we’ll give each its own ID.

Here’s what we have so far:

To apply button styles to these <input> elements in Bootstrap, we have to nest them in <label> tags and add .btn classes. In this example, we’ll add the .btn-secondary modifier class. Now we’ve got this:

Finally, we just have to wrap all of this in a <div> and apply the classes .btn-group, .btn-group-toggle, and data-toggle=”buttons” to ensure that each button in the group toggles from its default state to an active state when clicked. Here’s the final code:

See the Pen bootstrap button - radio by HubSpot (@hubspot) on CodePen.

Add buttons to your Bootstrap site.

When designed and placed well, buttons can help persuade visitors to take action. Any of the button types described above can be re-created and customized to your unique Bootstrap site. You’ll just need some familiarity with HTML and CSS to get started.

Editor's note: This post was originally published in May 2020 and has been updated for comprehensiveness.