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

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>

 

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.  Its design is minimalistic, almost…

View template

Share on Facebook Share on Twitter Share on LinkedIn