Get access to an awe-inspiring collection Of 87 Beautiful Wordpress themes for the price of one Get it now Ad

Bootstrap buttons

Published: 5.12.2018 | Last update: 3.2.2019

Bootstrap contains a handy CSS component for buttons.

In this tutorial, I will show you how to use Bootstrap 4 buttons to build and style your website more easily and quickly.

HTML elements

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


Button classes

Base buttons and their colours

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

The buttons have a white-coloured 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.

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 comes also with the outline (ghost) buttons, for cases you would need more subtle buttons without the strong background colours.

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>

Button sizes

Small and large

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

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

Block buttons

Add btn-block class to the button to create a block button that that span 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 <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 to the button as in the example below.

See it live

See the Pen Bootstrap buttons: active and disabled classes by Ondrej (@ondrejsvestka) on CodePen.


Aligning Bootstrap buttons

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

Align button to the left

Use text-left utility class to align the Bootstrap button to the left.

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

Center Bootstrap Button

Use text-centerutility class to centre the Bootstrap button.

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

Align button to the right

Use text-right utility class to align the Bootstrap button to the right.

<div class="text-right mb-3">
    <a href="#" class="btn btn-primary">Right align</a>
</div>

See it live

See the Pen Bootstrap Buttons: Align - Left, Center, Right by Ondrej (@ondrejsvestka) on CodePen.


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

See the Pen Bootstrap buttons: button groups and toolbars by Ondrej (@ondrejsvestka) on CodePen.


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

See the Pen Bootstrap buttons: Radio button by Ondrej (@ondrejsvestka) on CodePen.

Hi, I'm Ondrej, creator of Bootstrapious. I have published Bootstrap tutorials and freebies here since 2015.

Thanks for stopping by and have a great day ;)

Ondrej, Bootstrapious

You might also like one of my Free Templates

Italiano - Restaurant or Café Template

Italiano is my free Bootstrap 4 HTML responsive template. You can use it to build an elegant…

View template

Foliou - Bootstrap Portfolio
Premium

Foliou - Bootstrap Portfolio

Foliou is a responsive one-page Bootstrap 4 portfolio template. It presents your work in a…

View template

Bootstrap Blog

Bootstrap Blog is a free Bootstrap 4 blog template. Minimalistic design, mostly grayscale elements. Included are 3 HTML page templates - Homepage, Category page and Blog post. Seven colour variants.

More than 10,000 users trusted this template.

View template

Share on Facebook Share on Twitter Share on LinkedIn