Buttons are an important element of web design. They can help draw the visitor’s eye, provide them with important information, or persuade them to take action on your site.

Understanding the importance of this design element, the front-end development toolkit Bootstrap CSS 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.

Download Now: Free Intro Guide to HTML & CSS

In this post, we’ll explain how you can create buttons, what the button classes are, and what styles are possible in Bootstrap.

How to Create a Button in Bootstrap

Creating a button in Bootstrap is easy thanks to the predesigned templates included in the toolkit. 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.

Buttons with the nine Bootstrap default modifier classes applied and their respective code examples

Source

You’re not limited to these default options, however. Whether you’re looking to match your site’s branding more closely or do more with your buttons, Bootstrap supports multiple colors, sizes, and states so you can change the appearance and behavior of your buttons.

To understand how to change their appearance and behavior, 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.

Here's the code for the button:

 

 

  <button type="button" class="btn">Click Me</button>

Here's the result:

Bootstrap button with no modifier class is unstyled but clickable

Source

To make the button more visible (and clickable!) to visitors on the front end of your site, you can add modifier classes.

Bootstrap buttons have nine default modifier classes, which are shown in the screenshot in the previous section. Each has different use cases. Let's take a closer look at these default modifier classes below.

.btn-primary

The "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. 

.btn-secondary

The "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. 

Bootstrap buttons with .btn-primary and .btn-secondary classes invitiing visitors to get and demo a product, respectively

.btn-success

The “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.

.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.

Bootstrap buttons with .btn-success and .btn-danger classes invitiing visitors to submit or review the form before submitting, respectively-1

.btn-warning

Similarly, the “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. 

.btn-info

The "info" class can represent an informational alert.

On an account registration form, an info button might indicate that a user can click to edit their profile. 

Bootstrap buttons with .btn-warning and .btn-info classes instructing visitors to complete their registration or edit their profile, respectively

.btn-light

The “light” class was added when Bootstrap expanded its default color options. It's a great option for web pages with dark background colors.

Bootstrap button with light class stands out against dark background

.btn-dark

The “dark” class was also added when Bootstrap expanded its default color options. It's a great option for web pages with light background colors.

Bootstrap button with dark class stands out against light background

.btn-link

You can use the “link” class if you’re looking to deemphasize the appearance of a button. This last default modifier class will make a button look like a link but still behave like a button.

For example, you might send out an email newsletter featuring recent blog posts. Below the post title, you might include a brief description as well as a button with the link class inviting readers to read more. Below is how the button would appear when clicked.

Bootstrap button with link modifier class inviting email subscribers to read more

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

While Bootstrap’s button classes are designed to be used with the <button> element, they can be used on <a> or <input> elements. That means you can use button classes on href elements 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 in-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 code snippet includes examples of button classes being used with the <button> and <input> element.

 

 

   <a class="btn btn-info" href="#" role="button">Link</a>

<button class="btn btn-primary" type="submit">Button</button>

<input class="btn btn-secondary" type="button" value="Input">

<input class="btn btn-success" type="submit" value="Submit">

<input class="btn btn-warning" type="reset" value="Reset">

Here is how these elements would appear on the front-end of your Bootstrap site.

Bootstrap button styles applied to <button>, <a>, and <input> elements example-n

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 one of the default modifier classes will change the color of the text and background color of your buttons. .Btn-danger will make the button red and font white, while .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 by using the .btn class in your HTML and the class selector in your CSS. Let’s say I want to make the background color of my button dark sea green and the text white. Then I’d use the CSS selector .btn, the style properties color and background-color, and the hex color codes for dark sea green (#8FBC8F) and white (#FFFFFF).

Here’s my HTML:

 

 

   <button type="button" class="btn">Click Me</button>

Here’s my CSS:

 

 

    .btn {

  color: #FFFFFF;

  background-color: #8FBC8F

  }

Here’s the result:

Bootstrap button with sage green color defined by CSS class selector

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

Bootstrap Outline Buttons

If you’d prefer your buttons to have colored outlines, not colored backgrounds, then you can 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.

Bootstrap outline buttons default options with their respective code examples

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. You’ll simply use the class .btn btn-outline in your HTML instead of .btn and the CSS style property border-color instead of background-color. For fun, we’ll also use the hex color code for salmon. Otherwise, you’re using the same CSS class selector .btn and the style property color to change the text color.

Here’s my HTML:

 

 

  <button type="button" class="btn btn-outline">Click Me</button>

Here’s my CSS:

 

 

     .btn {

  color: #FA8072;

  border-color: #FA8072 

  }

Here’s the result:

bootstrap outline button with salmon color defined by CSS selector

Bootstrap Button Size

In Bootstrap, you can control the size as well as the color of your buttons. To change the size of your buttons, you can add the following modifier classes in your HTML:

  • .btn-lg
  • .btn-sm

Let’s compare these sizes using the following HTML:

 

 

  <button type="button" class="btn btn-info btn-lg">Large button</button>

<button type="button" class="btn btn-info">Default size button</button>

<button type="button" class="btn btn-info btn-sm">Small button</button>

Here’s the result:

Large, default, and small Bootstrap button sizes side-by-sideYou can also create block level buttons (buttons that span the full width of a parent element) by combining the .btn-large modifier class with .btn-block.

Here’s my HTML:

 

 

  <button type="button" class="btn btn-secondary btn-lg btn-block">Click me</button> 

Here’s the result:

Bootstrap block level button takes up entire line space

Bootstrap Button States

If you’d like to change your button’s state of appearance, then you can 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, you can use the disabled attribute to make a button look as if it can’t be pressed. Note that disabled is an attribute, not a class, so it will go outside the apostrophes in the HTML.

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

Below let’s take a look at the different code for each button state, and how they display on the front-end.

Here’s my HTML:

 

 

  <button type="button" class="btn btn-info active">Active Button</button>

<button type="button" class="btn btn-info" disabled>Disabled Button</button>

<a href="#" class="btn btn-danger disabled">Disabled Link</a>

Here’s the result:

User clicking on Bootstrap button in active state, hovering over button in disabled state, and hovering over disabled link

Bootstrap Toggle Buttons

If you’d like your Bootstrap button to switch 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, these buttons will retain their darker background, darker border, and inset shadow. (The inset shadow does disappear when the visitor clicks elsewhere on the page.)

Here’s my HTML including several button colors:

 

 

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

<button type="button" class="btn btn-success" data-toggle="button"> Success toggle </button>

<button type="button" class="btn btn-warning" data-toggle="button"> Warning toggle </button>

<button type="button" class="btn btn-light" data-toggle="button"> Light toggle </button>

Here’s the result:

User clicking on four Bootstrap toggle buttons buttons so that they retain their darker background, darker border, and inset shadow

Bootstrap Radio Buttons

A radio button is typically found in a predefined set of related options (known as a radio group). What’s unique about this button group is that only one radio button can be selected at a time. So say you select one button. Selecting another in the group will automatically deselect the first button.

The HTML code for this is a little trickier than the other examples so we’ll walk through it slower.

The syntax of a radio button is <input type="radio"> so let’s copy and paste that 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 name. We’ll call them option 1, option 2, and option 3. Here’s what we’ve got so far:

 

 

  <input type="radio" name="options" id="option1"> Radio

<input type="radio" name="options" id="option2"> Radio

<input type="radio" name="options" id="option3"> Radio

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

 

 

    <label class="btn btn-secondary">

    <input type="radio" name="options" id="option1"> Radio

  </label>

  <label class="btn btn-secondary">

    <input type="radio" name="options" id="option2"> Radio

  </label>

  <label class="btn btn-secondary">

    <input type="radio" name="options" id="option3"> Radio

  </label>

Lastly, we just have to wrap this in a <div> element 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 snippet:

 

 

    <<div class="btn-group btn-group-toggle" data-toggle="buttons">

  <label class="btn btn-secondary">

    <input type="radio" name="options" id="option1" checked> Radio

  </label>

  <label class="btn btn-secondary">

    <input type="radio" name="options" id="option2"> Radio

  </label>

  <label class="btn btn-secondary">

    <input type="radio" name="options" id="option3"> Radio

  </label>

</div>

And here’s the result:

User clicking on each of the three Bootstrap Radio toggle buttons so the previous is deselected

Create a Bootstrap Button

Using the CodePen module below, you can test your knowledge and create your own Bootstrap Button. 

To get you started, I've created a primary button and placed it in a container

See the Pen Create a Bootstrap Button by Christina Perricone (@hubspot) on CodePen.

Adding 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.

New Call-to-action

 css introduction

Originally published May 18, 2021 7:00:00 AM, updated May 18 2021

Topics:

Bootstrap & CSS