Bootstrap 4 Buttons

Bootstrap 4 Buttons

Learn How to use Bootstrap  4 Button classes 

Bootstrap 4 buttons

Bootstrap 4 Buttons

Bootstrap 4 provides six predefined button styles, which each type having its own semantic and visual purpose. The six classes are as follows:

btn-primary : To create buttons indicating primary action.

btn-secondary : To create an outline button.

btn-success : To create a button denoting success or positive action.

btn-warning : To create a button denoting caution or warning.

btn-danger : To create a button denoting danger or negative actions.

btn-link : To create a button which looks like a link but performs the action of a button.

Any Element with the class .btn will inherit the default grey button with round corners, additional colors are added using the above classes.

 

<!-- To create buttons indicating primary action -->
<button type="button" class="btn btn-primary">Primary</button>

<!--  To create an outline button -->
<button type="button" class="btn btn-secondary">Secondary</button>

<!-- To create a button denoting success or positive action -->
<button type="button" class="btn btn-success">Success</button>

<!-- To create a button denoting caution or warning -->
<button type="button" class="btn btn-warning">Warning</button>

<!-- To create a button denoting danger or negative actions -->
<button type="button" class="btn btn-danger">Danger</button>

<!-- To create a button which looks like a link but performs the action of a button  -->
<button type="button" class="btn btn-link">Link</button>

 

Bootstrap 4 Button Tags

Bootstrap 4 button classes are ideally meant to be used with <button> elements, but can be used with either<a> or <input> element as well.

While using the .btn class with element <a> for in page action instead of external link, use role="button" to specify appropriately for screen readers.

 

Bootstrap Button Tags

<!-- <a> element with role="button" --> 
<a class="btn btn-primary" href="#" role="button">Link</a>
 <!-- <button> element with type="submit" -->  
<button class="btn btn-primary" type="submit">Button</button>
 <!-- <input> element with type="button" -->  
<input class="btn btn-primary" type="button" value="Input">
 <!-- <input> element with type="submit" -->  
<input class="btn btn-primary" type="submit" value="Submit">

Bootstrap 4 Button Sizes

Bootstrap 4 provides can also be used to create button with sizes greater than and lesser than default button.

A Larger button can be created using class btn-lg

A Smaller button can be created using class btn-sm

<!-- Large Button -->
<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-secondary btn-lg">Large button</button>
  
 <!-- Small 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>

 

Bootstrap 4 Block Level Buttons

Bootstrap 4 Block level buttons which spans entire width of parent element can be created using class .btn-block.

Bootstrap 4 Buttons Block Lavel

 

<!--block level buttons using class btn-block , large button-->
<button type="button" class="btn btn-primary btn-lg btn-block">Block level button(large)</button>
<button type="button" class="btn btn-secondary btn-lg btn-block">Block level button(large)</button>
 
<!--block level buttons using class btn-block , default button-->
<button type="button" class="btn btn-primary  btn-block">Block level button(normal)</button>
<button type="button" class="btn btn-secondary  btn-block">Block level button(normal)</button>
  
 <!--block level buttons using class btn-block , small button-->
<button type="button" class="btn btn-primary btn-sm btn-block">Block level button(small)</button>
<button type="button" class="btn btn-secondary btn-sm btn-block">Block level button(small)</button>

 

Bootstrap 4 Active State Buttons

Buttons when pressed the background and border color becomes darker, and inset shadow effects are applied to denote active state. No need to apply pseudo class

In order to apply active button state programmatically to any button use class .active with any button.

<!-- Active class on buttons -->
<button type="button" class="btn btn-primary active">Primary</button>
<button type="button" class="btn btn-secondary active">Secondary</button>
<button type="button" class="btn btn-success active">Success</button>
<button type="button" class="btn btn-warning active">Warning</button>
<button type="button" class="btn btn-danger active">Danger</button>
<button type="button" class="btn btn-link active">Link</button>
<hr>
<!-- Active class on <a> Links -->
<a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a>
<a href="#" class="btn btn-secondary btn-lg active" role="button">Secondary Link</a>

 

Bootstrap 4 Disabled State Buttons

Bootstrap 4 Buttons in disabled state can be created by using class .disabled on any button element

Bootstrap 4 Tutorial

 

<!-- Disabled class on buttons -->
<button type="button" class="btn btn-primary disabled">Primary</button>
<button type="button" class="btn btn-secondary disabled">Secondary</button>
<button type="button" class="btn btn-success disabled">Success</button>
<button type="button" class="btn btn-warning disabled">Warning</button>
<button type="button" class="btn btn-danger disabled">Danger</button>
<button type="button" class="btn btn-link disabled">Link</button>
<hr>
<!-- Disabled class on <a> Links -->
<a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>
<a href="#" class="btn btn-secondary btn-lg disabled" role="button">Secondary Link</a>

 

Bootstrap 4 Outline Buttons

Bootstrap 4 provides a new button variation without background color using class .btn-*-outline, it creates an outine button with border color of the modifier class.

Bootstrap 4 Tutorial

<!-- To create outline buttons indicating primary action -->
<button type="button" class="btn btn-primary-outline">Primary</button>

<!--  To create an outline button -->
<button type="button" class="btn btn-secondary-outline">Secondary</button>

<!-- To create an outline button denoting success or positive action -->
<button type="button" class="btn btn-success-outline">Success</button>

<!-- To create an outline button denoting caution or warning -->
<button type="button" class="btn btn-warning-outline">Warning</button>

<!-- To create an outline button denoting danger or negative actions -->
<button type="button" class="btn btn-danger-outline">Danger</button>

 

 

Thank You for visit Webriceter.com Design & Develop by Abdur Rahaman