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

      <a href="#" class="btn btn-*">Link Button</a>
<button type="button" class="btn btn-*">Button</button>

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.

Bootstrap 4 buttons: 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

      <button type="button" class="btn btn-* btn-lg">Large Button</button>
 <button type="button" class="btn btn-* btn-sm">Small Button</button>

Try it now

Source Code

          <div class="container mt-4">
  <h2>Large Button</h2>
  <div class="row">
    <div class="col-6 col-sm-6 mt-4">
      <button type="button" class="btn btn-secondary btn-lg">Large Secondary button</button>
    </div>
    <div class="col-6 col-sm-6 mb-4 mt-4">
      <button type="button" class="btn btn-primary btn-lg">Large Primary button</button>
    </div>
  </div>
  <h4>Smaller Button</h4>
  <br />
  <div class="row mt-4">
    <div class="col-6 col-sm-6 mt-4">
      <button type="button" class="btn btn-secondary btn-sm">Small Secondary button</button>
    </div>
    <div class="col-6 col-sm-6 mt-4">
      <button type="button" class="btn btn-primary btn-sm">Small Primary button</button>
    </div>
  </div>
</div>

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

      <button type="button" class="btn btn-* active">Active Button</button>
<button type="button" class="btn btn-* disabled">Disabled Button</button>

Try it now

Source Code

          <div class="container mt-4">
  <div class="col-12 col-sm-6">
    <h2>Active Button</h2>
    <button type="button" class="btn btn-primary active">Active Primary</button><br />
  </div>
  <div class="col-12 col-sm-6">
    <h2>Disabled Button</h2>
    <button type="button" class="btn btn-primary" disabled>Disabled Primary</button>
    <a href="#" class="btn btn-primary disabled">Disabled Link</a>
  </div>
</div>

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

      <button type="button" class="btn btn-outline-* ">Outline Button</button>
<a  href="#"  class="btn btn-outline-* ">Outline Button</a>

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

      <button type="button" class="btn btn-block">Block Level Button</button>
<a href="#" class="btn btn-block">Block Level Button</a>

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

      <button class="btn btn-*">
  <span class="spinner-border spinner-border-sm"></span>
</button>

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>

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

Web Tutorials

Html Tutorial HTML

Javascript Tutorial JAVASCRIPT

Css Tutorial CSS

Bootstrap 5 Tutorial BOOTSTRAP 5

Bootstrap 4 Tutorial BOOTSTRAP 4