Bootstrap 4
Bootstrap 4 Buttons
Bootstrap 4 provides nine predefined button styles. Use Bootstrap's .btn class, followed by the desired styles .btn-primary, .btn-success, .btn-warning, .btn-secondary, .btn-info, .btn-danger, .btn-light, .btn-dark, .btn-link. For example class="btn btn-primary"  results in a primary button.
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-danger">Danger</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>
Output :
Button tags

The .btn classes are designed to be used with the <button> element. However, you can also use these classes on <a> or <input> elements (though some browsers may apply a slightly different rendering).

<a class="btn btn-primary" href="#" role="button">Submit</a>
<button class="btn btn-primary" type="submit">Sign In</button>
<input class="btn btn-primary" type="button" value="Sign Up">
<input class="btn btn-primary" type="submit" value="Login">
<input class="btn btn-primary" type="reset" value="Register">
Output :
Button Sizes

Bootstrap 4 buttons are .btn-lg, .btn-sm or .btn-block for additional sizes.

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

<hr />

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

<hr />

<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>
Output :
Active & Disabled state

The Bootstrap 4 Active State Button are .active (and include the aria-pressed="true" attribute) should you need to replicate the state programmatically and Disables State Button are adding the disabled boolean attribute to any <button> element.

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

<hr />

<button type="button" class="btn btn-lg btn-primary" disabled>Disabled button</button>
<button type="button" class="btn btn-secondary btn-lg" disabled>Button</button>
Output :
Checkbox and radio buttons

The Bootstrap 4 Active State Button are .active (and include the aria-pressed="true" attribute) should you need to replicate the state programmatically and Disables State Button are adding the disabled boolean attribute to any <button> element.

<h4>Checkboxes</h4>
<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-secondary active">
    <input type="checkbox" checked autocomplete="off"> HTML5
  </label>
  <label class="btn btn-secondary">
    <input type="checkbox" autocomplete="off"> CSS3
  </label>
  <label class="btn btn-secondary">
    <input type="checkbox" autocomplete="off"> Bootstrap 4
  </label>
</div>

<hr />

<h4>Radio buttons</h4>
<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="radio" name="options" id="" autocomplete="off" checked> PHP
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="" autocomplete="off"> Python
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="" autocomplete="off"> Java
  </label>
</div>
Output :

We see you’re using an ad blocker.

Our website is made possible by displaying ads to our visitors.

Please help us continue to provide you with free. So please disabling your ad blocker.