Bootstrap buttons

HTML elements

The button classes are designed to be used with the <button>, <a> or <input> elements. 

To create a basic button, add the class .btn to an <a> or <input> element. This will apply default styles to it.

Button classes

Base buttons and their colors

Bootstrap includes nine base button styles, each of them serving its own semantic purpose.

The buttons have a white-colored text and a background based on the btn-[colour] class that's used along with the btn class. E.g., btn-primary creates a button with a primary background, btn-success with a green background, etc.

As these buttons stand out quite a lot, they are good to be used as main Call-to-Action buttons or primary action buttons.

Primary action buttons are the most important element on your page and should be used to direct visitors to your site's main goal.

When you use a special btn-link class, the button will look like a text link with padding. I usually use these buttons for secondary actions like "Go back".

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

Outline buttons

Bootstrap 4 and Bootstrap 5 come also with the outline (ghost) buttons, for cases you would need more subtle buttons without the strong background colors.

To create the outline button, replace the default button-modifier class with the  .btn-outline-*  variant.

All possibilities for the outline buttons are shown below.

<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>

Transparent buttons are not only easy on the eyes, but they also give you a lot more freedom when designing them compared to regular opaque buttons.

Buttons with transparent backgrounds can be used to blend into the background of your website or blog.

This is especially useful if you have a lot of content that's important for readers to see right away, but don't want it competing with your buttons and other design elements.

When using transparent buttons with text, make sure there's enough contrast between the text color and the background color of your button, otherwise, it will be difficult for people with color blindness or poor vision to see what's going on.

Button sizes

Small and large

Buttons in Bootstrap 4 and 5 have three different sizes. There are small, large, and medium buttons. The default size is medium.

You can very easily change button size by adding btn-lg or btn-sm class to it. These classes modify the button's padding and also the font size and the CSS border radius.

<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-secondary btn-lg">Large button</button>
<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-secondary btn-sm">Small button</button>

When to use the big button in your web design?

A big button on your web page gives the user an enhanced experience.

The bigger the size of the button, the more likely they will notice it and click on it. It also makes it easy for them to click on it as they don't have to move their fingers much to find the right spot to click on.

It's important that your buttons stand out from the rest of the elements on your page so that users can see them easily and clearly understand what they do when clicked.

When to use the small button?

In some cases, you may want to use another kind of button, like secondary buttons or small buttons.

Small buttons are useful when you want to provide information about action without taking up too much space on your screen, especially if you have other things going on at the same time

Padding

If you want to change the button's padding, I recommend using the utility classes again.

E.g. if you want to add a bit more padding to the button, use .p-4 or even .p-5 classes on the button. This will override the standard button's padding.

What I really love about Bootstrap is its flexibility. So, it's also possible to apply the different padding only e.g. horizontally or use a combination of utility classes.

Here are a few examples:

<button type="button" class="btn btn-primary p-4">Standard button with more padding</button>
<button type="button" class="btn btn-primary btn-sm p-3">Small button with more padding</button>

<!-- Standard button with slightly more horizontal padding & increased vertical padding -->
<button type="button" class="btn btn-primary px-4 py-5">Combination of classes</button>

Block buttons

Full-width buttons are useful in a number of situations. They can be used as the primary call to action on a website or on a landing page, as an alternative to the hamburger menu icon, or as an element in navigation menus.

I usually use them on mobile screens and replace them with the standard width button on bigger devices.

Their syntax differs between Bootstrap 5 and Bootstrap 4.

Let's have a look:

Bootstrap 5

<div class="d-grid gap-2">
  <button class="btn btn-primary" type="button">Button</button>
  <button class="btn btn-secondary" type="button">Button</button>
</div>

Responsive Block Buttons in Bootstrap 5

The following example shows how to create block buttons on mobile that will become standard buttons on bigger viewports.

The trick is in using the combination of display utility classes on the parent div: .d-grid and .d-md-block.

<div class="d-grid gap-2 d-md-block">
  <button class="btn btn-primary" type="button">Button</button>
  <button class="btn btn-secondary" type="button">Button</button>
</div>

Bootstrap 4

Add btn-block class to the button to create a block button that spans the full width of its parent.

<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-secondary btn-lg btn-block">Block level button</button>

Active and disabled buttons

Active buttons

Buttons, when used with the <button> element will appear pressed (i.e., with a darker background and darker border) automatically when active.

When using button classes on <a> element, you will need to .active class to it to achieve the same.

Disabled buttons

To disable a button if you're using a <button> element, add a disabled attribute to it.

When you are using a <a class="btn">, simply add .disabled class to the button as in the example below.

As a best practice, include the aria-disabled="true" attribute to indicate the state of the element to assistive technologies.

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

<a href="#" class="btn btn-primary btn-lg disabled" tabindex="-1" role="button" aria-disabled="true">Primary link button</a>

See it live

Aligning Bootstrap buttons

You can nicely align Bootstrap buttons using Bootstrap utility classes on the button's parent.

Align the button to the left

Use the text-start (Bootstrap 5) or the text-left (Bootstrap 4) utility class to align the Bootstrap button to the left.

<!-- Bootstrap 5 -->
<div class="text-start">
    <a href="#" class="btn btn-primary">Left align</a>
</div>

<!-- Bootstrap 4 -->
<div class="text-left">
    <a href="#" class="btn btn-primary">Left align</a>
</div>

Center Bootstrap button

Use text-centerutility class to center the Bootstrap button.

<div class="text-center">
    <a href="#" class="btn btn-primary">Center align</a>
</div>

Align the button to the right

Use text-end (Bootstrap 5) or the text-right (Bootstrap 4) utility class to align the Bootstrap button to the right.

<!-- Bootstrap 5 -->
<div class="text-end">
    <a href="#" class="btn btn-primary">Right align</a>
</div>

<!-- Bootstrap 4 -->
<div class="text-right">
    <a href="#" class="btn btn-primary">Right align</a>
</div>

See it live

Space between the buttons

The easiest way to add spacing to the Bootstrap buttons is to add some right margin.

This can be done using the .me-* classes in Bootstrap 5 or the .mr-* classes in Bootstrap 4.

Usually, what is enough is to give it a horizontal margin of 1 or 2 steps.

Here's an example of two Bootstrap buttons side by side with some space:

<a href="#" class="btn btn-primary me-2">Add some right margin here.</a>
<a href="#" class="btn btn-primary">No margin necessary</a>

Bootstrap Button group and Toolbar

Button group

To create a nice-looking group of buttons, wrap them into a .btn-group parent element. 

Also, you can use Bootstrap JavaScript plugins to turn the button group into a Radio button.

<div class="btn-group" role="group" aria-label="Button group example">
  <button type="button" class="btn btn-primary">Left</button>
  <button type="button" class="btn btn-primary">Middle</button>
  <button type="button" class="btn btn-primary">Right</button>
</div>

Button Toolbar

To create a toolbar, wrap more button groups into a .btn-toolbar.

No spacing is added automatically between the button groups. To add some spacing to your toolbar, use Bootstrap spacing utilities.

<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
  <div class="btn-group mr-2" role="group" aria-label="Button group example">
    <button type="button" class="btn btn-outline-secondary">B</button>
    <button type="button" class="btn btn-outline-secondary">I</button>
    <button type="button" class="btn btn-outline-secondary">U</button>
  </div>

  <div class="btn-group" role="group" aria-label="Button group example">
    <button type="button" class="btn btn-outline-secondary">L</button>
    <button type="button" class="btn btn-outline-secondary">R</button>
    <button type="button" class="btn btn-outline-secondary">T</button>
  </div>
</div>

See it live

Bootstrap Radio Button

Bootstrap’s button styles can be applied to other elements, such as <label>s, to provide checkbox or radio style button toggling.

Add data-toggle="buttons" to a .btn-group containing these modified buttons to enable their toggling behaviour via JavaScript and add .btn-group-toggle to appropriately style the <input>s within your buttons. 

Note that pre-checked buttons require you to manually add the .active class to the input’s <label> and also the checked attribute to the input itself.

<div class="btn-group btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="radio" name="options" id="option1" autocomplete="off" checked> Active
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option2" autocomplete="off"> Radio
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option3" autocomplete="off"> Radio
  </label>
</div>

See it live

Special & custom buttons

A custom file upload button

Bootstrap 5 contains a nicely styled custom file upload button, but you can also create a completely custom button that launches a file browser to select a file upload quite easily.

See more on this topic, including examples, in my Bootstrap file upload snippet.

Bootstrap circle buttons

With a bit of custom CSS styling, you can also create custom Bootstrap 5 circle buttons. See more in my snippet.