Bootstrap 4 Buttons


Basic Button

Bootstrap has .btn class and many contextual classes to better organize the buttons.

Example code

<button class="btn btn-primary">Basic Button</button>

Button with Elements

Bootstrap .btn class can be used on <a>,<input>,<button>

Hyperlink Button

Example code

<a href="#" class="btn btn-primary mr-3">Hyperlink Button</a>
<input type="button" name="" value="Input Button" class="btn btn-secondary mr-3">
<button class="btn btn-info mr-3">Normal Button</button>

Button with Contextual Classes

In Bootstrap, contextual classes are used to give buttons different background-colors. They are .btn-primary, .btn-secondary, .btn-info, .btn-success, .btn-warning, .btn-danger, .btn-dark, .btn-light.

Example code

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

Outline Button

The bootstrap outline button is a light color border on the outer side of the button and the main color of the button will float when the user moves his mouse over that button.

Example code

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

Button Sizes

There are three types of bootstrap button sizes.

  1. Large button(.btn-lg).
  2. Medium button(.btn).
  3. Small button(.btn-sm).

Example code

<button class="btn btn-primary btn-lg">Large Button</button>
<button class="btn btn-secondary">Medium Button</button>
<button class="btn btn-info btn-sm">Small Button</button>

Active/Disabled Button

A button in bootstrap can be activated or disabled (unclickable). To do this you need to add .active class and disable attributes. But in case of hyperlinks, .disable class should be added because hyperlinks do not support disable attributes.

Disabled Link

Example code

<button class="btn btn-primary active">Active Button</button>
<button class="btn btn-primary" disabled="true">Disabled Button</button>
<a href="#" class="btn btn-primary disabled">Disabled Link</a>

Full-Width Button

Bootstrap requires the .btn-block class to create a full-width block level button.

Example code

<button class="btn btn-primary btn-block">Full width button</button>