Bootstrap Buttons

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

Steps to create bootstrap button :

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

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

General Syntax

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

Try It Now

Source Code

    <div class="container mt-5">
  <div class="row">
    <div class="col-sm-6 mb-4">
      <a href="#" class="btn btn-info" role="button">Link Button</a>
    </div>
    <div class="col-sm-6 mb-4">
      <button type="button" class="btn btn-info">Button</button>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-6 mb-4">
      <input type="button" class="btn btn-info" value="Input Button" />
    </div>
    <div class="col-sm-6 mb-4">
      <input type="submit" class="btn btn-info" value="Submit Button" />
    </div>
  </div>
</div>
<!--/container-->

Try it yourself

Source Code : Output

Link Button

Note:Please keep in mind that .btn & .btn-* is assigned to the <button> or <a> element base class.

Creating Bootstrap Outline Buttons

Steps : To create outline button:

Step1: Add .btn to any of the <button> , <a> & <input> element base class.
Step2: Assign btn-outline-* to any of the <button>,<a> & <input> element base class.
Step3: Followings are the outline contextual classes: btn-outline-primary,btn-outline-secondary,btn-outline-success,btn-outline-danger,btn-outline-warning,btn-outline-info,btn-outline-light,btn-outline-dark,btn-outline-link.

General Syntax

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

Try It Now

Source Code

    <div class="container my-5">
  <div class="row">
    <div class="col-sm-6 mb-5">
      <button type="button" class="btn btn-outline-primary">Primary</button>
    </div>
    <div class="col-sm-6 mb-3">
      <button type="button" class="btn btn-outline-secondary">Secondary</button>
    </div>
  </div>
</div>

Try it yourself

Source Code : Output

Note: To create outline button assign .btn & .btn-outline-* to the <button> or <a> element base class.

Button Size

To create large and smaller button,use .btn-lg & .btn-sm repectively.

General Syntax

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

Try It Now

Source Code

    <div class="container my-5">
  <div class="row">
    <div class="col-sm-6 mb-4">
      <button type="button" class="btn btn-primary btn-lg">
        Large button
      </button>
    </div>
    <div class="col-sm-6 mb-4">
      <button type="button" class="btn btn-success btn-sm">
        Small button
      </button>
    </div>
  </div>
</div>

Try it yourself

Source Code : Output

Note: Keep in mind that .btn-sm & .btn-lg is used to create smaller and larger buttons respectively.

Active & Disabled Button

An Active button(appear pressed) is created by assigning .active to the <button> base class while as to create disabled button(unclickable) assign .disabled to the <button> base class.

General Syntax

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

Try It Now

Source Code

    <div class="container my-5">
  <div class="row">
    <div class="col-md-4 mb-3">
      <button type="button" class="btn btn-primary active">
        Active Button
      </button>
    </div>
    <div class="col-md-4 mb-3">
      <button type="button" class="btn btn-info" disabled>
        Disabled Button
      </button>
    </div>
    <div class="col-md-4 mb-3">
      <a href="#" class="btn btn-primary disabled">Disabled Link</a>
    </div>
  </div>
  <!--/row-->
</div>
<!--/container-->

Try it yourself

Source Code : Output

Disabled Link

Note:To create active and disabled button assign .active & .disabled to the <button> or <a> element base class.

Block Level Buttons

The Block level button spans the entire width of the parent element and it is created by display and gap utility.

General Syntax

      <div class="d-grid gap-2">
  <button class="btn btn-primary" type="button">Button1</button>
  <button class="btn btn-primary" type="button">Button2</button>
</div>

Try It Now

Source Code

    <div class="container my-3 text-center">
  <div class="d-grid gap-2">
    <button class="btn btn-primary mb-4" type="button">Button1</button>
    <button class="btn btn-info" type="button">Button2</button>
  </div>
</div>
<!--/container-->

Try it yourself

Source Code : Output

Note: Please keep in mind that the block-level button covers the full available width.

Online Test / Quiz

Question set 1

Web Tutorials

Html Tutorial HTML

Css Tutorial CSS

Bootstrap 5 Tutorial BOOTSTRAP 5

Bootstrap 4 Tutorial BOOTSTRAP 4

Materialize CSS Tutorial MATERIALIZE CSS