Gateway for IT Experts and Tech Geeks

Bootstrap Buttons Complete Guide for Web Developers

Buttons are one of the most useful components that are being used for various purposes like Showing, hiding submitting and much more. Bootstrap 4 includes several types of buttons which each serving its own semantic purpose, with a few extra functionalities including different colours, different sizes, and different states. let’s find out more about the bootstrap 4 buttons.

Buttons in Bootstrap

Bootstrap 4 has different classes for the buttons that allow us to have control over its colour, state, size. These buttons are normally being used with  the  <a>, <input> and <buttons> elements but can be used with any elements.

In Bootstrap the .btn class define a button. which are mostly used with the <button> element.

Define a button in Bootstrap as below

<button type="button" class="btn">Button</button>

Bootstrap 4 Buttons: Color

Like many other components of Bootstrap 4, the buttons component has different classes for styling the button.  It basically includes the following classes for the colours.

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

The Result will be as the below

Bootstrap 4 buttons

 Sizes In Bootstrap 4 Buttons

Bootstrap has it too easy to bring changes to the size or styles of your components. There are 5 available size for the buttons in bootstraps which includes  large ( .btn-lg ), Medium ( .btn-md ), Small ( .btn-sm ), and the ( .btn-block ) Block level button which spans the entire width of the parent element.

Note: Bootstrap 4 has dropped the  .btn-xs extra small size button.

<button type="button" class="btn btn-success btn-sm">Small</button>
<button type="button" class="btn btn-success">Default</button>
<button type="button" class="btn btn-success btn-lg">Large</button>
<button type="button" class="btn btn-primary btn-block">Block Level button </button>

Bootstrap 4 button Sizes

Bootstrap 4 Button Block

States of Buttons Bootstrap 4

There are two available states in the bootstrap, the active state, and the disabled state.

1- Active state:

In the Active state, the buttons will appear pressed ( darker ). you can define it with the .active class followed by aria-pressed=” true” attribute.

<a href="#" class="btn btn-primary btn-lg active" role="button" aria-pressed="true">Primary link</a>
<a href="#" class="btn btn-secondary btn-lg active" role="button" aria-pressed="true">Link</a>

Bootstrap Active Buttons

Disabled state

The Disabled state is being used to look inactive. for the buttons, you don’t need to define a .dsabled class, but for the buttons with <a> elements its different, you should use the .disabled class to make it look disabled.

<button type="button" class="btn btn-lg btn-primary" disabled>Primary button</button>
<!-- Link Disabled  --->
<a href="#"class="btn btn-secondary btn-lg disabled" role="button" aria-disabled="true">Button</a>

Bootstrap 4 Disabled buttons

 Bootstrap 4 Outline Buttons

Do you like me and many others like buttons with hefty background colours? fortunately bootstrap has brought us the .btn-outline classes to remove background images and colours of any buttons.

to to define an outline button, just add the .btn-outline classes to your buttons classes as 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>

Bootstrap 4 Outline Buttons

 Using Icons With Bootstrap 4 Buttons

    <a href="#" class="btn btn-success btn-lg">
      <span class="glyphicon glyphicon-print"></span> Print 

Using Icons With Bootstrap Buttons

Grouped Buttons

Display a series of buttons with .btn inside the .btn-group  as below:

  • Use the class .btn-group-vertical to create a vertical button group.
  • Add the class .btn-group-* to control the size of your grouped buttons.
Bootstrap 4 Grouped Buttons Display vertically Plus Large Size


That’s it about the Bootstrap 4 buttons. This article is a comprehensive guide about the Bootstrap 4 buttons. If you are interested to learn more about details of the bootstrap Components and find out more about bootstrap 4 read the bootstrap 4 documentation through their website.

Leave A Reply

Your email address will not be published.