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.

Free Intro Guide to HTML & CSS [Download Now]

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.

Bootstrap default modifier classes

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.

Please note: I’ll be using the W3Schools Online Code Editor to create the examples below. That means you can click any of the Source links to see the full code snippet behind the example.

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 demo

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.

  • .btn-primary
  • .btn-secondary
  • .btn-success
  • .btn-danger
  • .btn-warning
  • .btn-info
  • .btn-light
  • .btn-dark
  • .btn-link

Each has different use cases. The first and second can be used to provide more visual weight to a button while representing a primary and secondary action for visitors to take on the page. The next two classes — “success” and “danger” — can be used to indicate a successful or positive action and a potentially dangerous or negative action. Similarly, the “warning” and “info” classes can represent a warning and informational alert. The next two classes — “light” and “dark” — were added when Bootstrap expanded its default color options.

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

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

Source

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 color defined by CSS class selector

Source

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

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 example

Source

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:

 

Bootstrap button sizes example

Source

You 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 example

Source

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:

Bootstrap button states example-1

 

Source

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:

Bootstrap toggle buttons

Source

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:

Bootstrap Radio toggle buttons example-min

Source

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.

New Call-to-action

 css introduction

Originally published May 18, 2020 7:00:00 AM, updated July 22 2020

Topics:

Bootstrap CSS