bootstrap 4:BS Button

Bootstrap 4 buttons

Bootstrap 4 buttons are used to perform interactive actions such as form submit, reset, redirecting to other pages, etc.

Steps to create bootstrap 4 buttons :

Add .btn to the <button> element base class.
To assign background color of the <button>,use contextual class(.btn-*) to the <button> element base class to provide background color of the button.
Followings are the contextual class: btn-primary, btn-secondary, btn-success, btn-danger, btn-warning, btn-info, btn-light, btn-dark,btn-link.

Button Example

General Syntax

Try it now

Source Code

<div class="container mt-4">

    <h2>Bootstrap Button</h2>


<div class="row">
     
 <div class="col-6 col-sm-6 col-md-4 col-lg-3 mb-4">
  
     <button type="button" class="btn btn-primary">
         Primary Button
     </button>


 </div>

  <div class="col-6 col-sm-6 col-md-4 col-lg-3 mb-4">
  
     
    <button type="button" class="btn btn-danger">

      Danger Button

    </button>


 </div>


  <div class="col-6 col-sm-6 col-md-4 col-lg-3 mb-4">
  
      <button type="button" class="btn btn-success">

        Success Button 

        </button>


 </div>

  <div class="col-6 col-sm-6 col-md-4 col-lg-3 mb-4">
  
     <button type="button" class="btn btn-secondary">

      Secondary Button

     </button>


 </div>

</div><!--/row-->


<p class="text-justify">

      Button classes can also be applied to hyperlink and form input.

</p>


<div class="row">
     
 <div class="col-6 col-sm-6 col-md-4 col-lg-3 mb-4">
  
       <input type="submit" class="btn btn-info" value="Submit Button">
           

 </div>

  <div class="col-6 col-sm-6 col-md-4 col-lg-3 mb-4">
     
     <input type="button" class="btn btn-success" value="Input Button">
   
  </div>


  <div class="col-6 col-sm-6 col-md-4 col-lg-3 mb-4">
     
      <button type="button" class="btn btn-danger">Info Button</button>
  
  </div>

  <div class="col-6 col-sm-6 col-md-4 col-lg-3 mb-4">
    
      <a href="#" class="btn btn-secondary" role="button">Link Button</a>

   
 </div>

</div><!--/row-->


</div><!--/container-->

Try it now

Source Code : Output

Bootstrap Button

Button classes can also be applied to hyperlink and form input.

Link Button

Note: Here,.btn and .btn-* is applied to the<button>,<a>,<input> element base class to create button.

Note! Please keep in mind that button can also be created by <a> and <input> elements. You have to follow above mention step to create button.

Button Size

Follow the following steps to create larger and smaller button.

Larger Button: To create large button assign .btn-lg to the <button>, <a> & <input> element base class.
Small Button: To create small button assign .btn-sm to the <button>, <a> & <input> element base class.

Large Button

Smaller Button

General Syntax

Try it now

Source Code

Try it now

Source Code : Output

Large Button

Smaller Button

Note: In the above example you are observing that for large button .btn-lg is used while for small button .btn-sm is used.

Creating Active & Disabled Buttons

To create active and disabled button ,follow the given below statement.

Active Button: An Active button(appear pressed) is created by assigning .active to the <button>, <a>,<input> base class.
Disable Button: To create disabled button(unclickable) is created by assigning .disabled to the <button>, <a>,<input> base class.

Active & Disabled Button Example

Disabled Link

General Syntax

Try it now

Source Code

Try it now

Source Code : Output

Active Button

Disabled Button

Disabled Link

Note:In the above example,.active & .disabled is assigned to <button>,<a> & <input> element base class.

Creating Bootstrap Outline Button

Follow the given below statement to create boostrap outline button.

Add .btn to the <button>,<input>,<a> element base class.
Now Add other contextual classes.btn-* to the <button>,<input>,<a> element base class.
Followings are the list of contextual classes like btn-primary, btn-secondary,btn-success, btn-danger,btn-warning, btn-info,btn-dark, btn-light, btn-link.

Outline Button Example

General Syntax

Try it now

Source Code

<div class="container mt-4">

      <h2>Bootstrap Outline Button</h2>

      <div class="row">
     
     <div class="col-6 col-sm-6 col-md-4 col-lg-3 mb-4">
      
      <button type="button" class="btn btn-block  btn-outline-warning">Warning</button>


     </div>

     <div class="col-6 col-sm-6 col-md-4 col-lg-3 mb-4">
         
          <button type="button" class="btn btn-block  btn-outline-danger">Danger</button>

     </div>

     <div class="col-6 col-sm-6 col-md-4 col-lg-3 mb-4">
        
        <button type="button" class="btn btn-block  btn-outline-success ">Success</button>

     </div>

     <div class="col-6 col-sm-6 col-md-4 col-lg-3 mb-4">
       
         <button type="button" class="btn btn-block btn-outline-secondary">Secondary</button>
    
     </div>

     <div class="col-6 col-sm-6 col-md-4 col-lg-3 mb-4">
       
        <button type="button" class="btn btn-block btn-outline-primary">Primary</button>

     </div>

    
      <div class="col-6 col-sm-6 col-md-4 col-lg-3 mb-4">
      
        <button type="button" class="btn btn-block btn-outline-info">Info</button>

     </div>

     <div class="col-6 col-sm-6 col-md-4 col-lg-3 mb-4">
      
      
      <button type="button" class="btn btn-block btn-outline-dark">Dark</button>


     </div>

    <div class="col-6 col-sm-6 col-md-4 col-lg-3 mb-4">
      
        <button type="button" class="btn btn-block btn-outline-light">Light</button>

     </div>

     </div>
    
</div><!--/container-->

Try it now

Source Code : Output

Bootstrap Outline Button

Creating bootstrap outline button is very easy.You have to add .btn class followed by one of the contextual class to <a>,<button> or <input> element base class.

Block Level Buttons

To create block level button that spans the entire width of the parent container,use .btn-block class to the <button> ,<a> , <input> element base class.

General Syntax

Try it now

Source Code

<div class="container mt-4">

<h2>Bootstrap Block Level Button</h2>

<div class="row">

<div class="col-6 col-sm-6 col-md-4 col-lg-3 mb-4">
   
   <button type="button" class="btn btn-block btn-danger">Danger</button>

</div> 

<div class="col-6 col-sm-6 col-md-4 col-lg-3 mb-4">
   
   <button type="button" class="btn btn-block btn-success">Success</button>

</div> 


<div class="col-6 col-sm-6 col-md-4 col-lg-3 mb-4">
    
    <button type="button" class="btn btn-block btn-secondary">Secondary</button>

  
</div> 


<div class="col-6 col-sm-6 col-md-4 col-lg-3 mb-4">
   
   <button type="button" class="btn btn-block btn-primary">Primary</button>


</div>   


<div class="col-6 col-sm-6 col-md-4 col-lg-3 mb-4">
   
   <button type="button" class="btn btn-block btn-warning">Warning</button>


</div>   

<div class="col-6 col-sm-6 col-md-4 col-lg-3 mb-4">
   
   <button type="button" class="btn btn-block btn-info">Info</button>


</div>


<div class="col-6 col-sm-6 col-md-4 col-lg-3 mb-4">
   
   <button type="button" class="btn btn-block btn-dark">Dark</button>

</div>


<div class="col-6 col-sm-6 col-md-4 col-lg-3 mb-4">
   
   <button type="button" class="btn btn-block btn--light">Light</button>

</div>


</div>

<h2>Bootstrap Outline Block Level Button</h2>


<div class="row mt-4">

<div class="col-6 col-sm-6 col-md-4 col-lg-3 mb-4">

    <button type="button" class="btn btn-block btn-outline-primary">Primary</button>

</div>

<div class="col-6 col-sm-6 col-md-4 col-lg-3 mb-4">

   <button type="button" class="btn btn-block btn-outline-danger">Danger</button>

</div>

<div class="col-6 col-sm-6 col-md-4 col-lg-3 mb-4">
    

    <button type="button" class="btn btn-block btn-outline-success">Success</button>


</div>

<div class="col-6 col-sm-6 col-md-4 col-lg-3 mb-4">

   <button type="button" class="btn btn-block btn-outline-secondary">Secondary</button>

</div>


<div class="col-6 col-sm-6 col-md-4 col-lg-3 mb-4">

  <button type="button" class="btn btn-block btn-outline-warning">Warning</button>

</div>


<div class="col-6 col-sm-6 col-md-4 col-lg-3 mb-4">

   <button type="button" class="btn btn-block btn-outline-info">Info</button>


</div>

<div class="col-6 col-sm-6 col-md-4 col-lg-3 mb-4">

  <button type="button" class="btn btn-block btn-outline-dark">Dark</button>


</div>


<div class="col-6 col-sm-6 col-md-4 col-lg-3 mb-4">

  <button type="button" class="btn btn-block btn-outline-light">Light</button>

</div>


</div><!--/row-->


</div><!--/container-->

Try it now

Source Code : Output

Bootstrap Block Level Button

Bootstrap Outline Block Level Button

Bootstrap block level element can take full available width and it is created by assigning .btn-block to the <button>,<a> or <input> element base class.

Spinner Buttons

Bootstrap provides class that indicate the loading state inside the web page.

Process of creating bootstrap 4 spinner buttons.

Assign .spinner-border & .spinner-border-* to the child element(<span>) of button.
Please keep in mind that .spinner-border-* is used to control the size of spinner. To create smaller spinner use .spinner-border-sm & for larger spinner size use .spinner-border-lg.

Spinner Button Example

General Syntax

Try it now

Source Code

<div class="container mt-4">

<h2>Bootstrap Spinner Button</h2>

<div class="row">

<div class="col-6 col-sm-6 col-md-4 col-lg-3 mb-4">

  <button class="btn btn-primary">

  <span class="spinner-border spinner-border-sm"></span>

  </button>

</div>

<div class="col-6 col-sm-6 col-md-4 col-lg-3 mb-4">

  <button class="btn btn-primary" disabled>

    <span class="spinner-border spinner-border-sm"></span>

    Loading..

  </button>

</div>



<div class="col-6 col-sm-6 col-md-4 col-lg-3 mb-4">

  <button class="btn btn-primary">

  <span class="spinner-border spinner-border-sm"></span>

  Loading..

  </button>

</div>


<div class="col-6 col-sm-6 col-md-4 col-lg-3 mb-4">

  
    <button class="btn btn-primary" disabled>

    <span class="spinner-grow spinner-grow-sm"></span>

    Loading..

    </button>

</div>

</div>

</div><!--/container-->

Try it now

Source Code : Output

Bootstrap Spinner Button

Note:In the above example,.spinner-border & .spinner-border is assigned to the <button> child element base class to create a loading spinner inside the project.

Online Test / Quiz

Question set 1

Bootstrap 4 buttons

Button Example

General Syntax

Source Code

Source Code : Output

Bootstrap Button

Button Size

Large Button

Smaller Button

General Syntax

Source Code

Source Code : Output

Large Button

Smaller Button

Creating Active & Disabled Buttons

Active & Disabled Button Example

General Syntax

Source Code

Source Code : Output

Active Button

Disabled Button

Creating Bootstrap Outline Button

Outline Button Example

General Syntax

Source Code

Source Code : Output

Bootstrap Outline Button

Block Level Buttons

General Syntax

Source Code

Source Code : Output

Bootstrap Block Level Button

Bootstrap Outline Block Level Button

Spinner Buttons

Spinner Button Example

General Syntax

Source Code

Source Code : Output

Bootstrap Spinner Button

Online Test / Quiz

Our Tutorials