Bootstrap 4 Button

Bootstrap 4 button is used to perform interactive action such as form submit, reset, redirecting to other page, 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 class: btn-primary,btn-secondary,btn-success,btn-danger,btn-warning,btn-info,btn-light,btn-dark,btn-link.

Button Example

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.

Example

General Syntax

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

Try It Now

Source Code

	
		<div class="container my-5">
  <div class="row">
    <div class="col col-md-4 mb-3">
      <button type="button" class="btn btn-primary">Primary Button</button>
    </div>
    <div class="col col-md-4 mb-3">
      <button type="button" class="btn btn-secondary">Secondary Button</button>
    </div>
    <div class="col col-md-4 mb-3">
      <button type="button" class="btn btn-success">Success Button</button>
    </div>
  </div>
  <!--/row-->
</div>
<!--/container-->

Try it yourself

Source Code : Output

Note: Here,.btn and .btn-* is applied to the<button>,<a>,<input> element base class 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.
Larger 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-primary btn-lg">Large Primary button</button>
<button type="button" class="btn btn-primary btn-sm">Small Primary button</button>

Try It Now

Source Code

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

Try it yourself

Source Code : Output

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-primary active">Active Primary</button>
<button type="button" class="btn btn-primary" disabled>Disabled Primary</button>
<a href="#" class="btn btn-primary disabled">Disabled Link</a>

Try It Now

Source Code

	
		<div class="container">
  <div class="row">
    <div class="col mb-5">
      <button type="button" class="btn btn-primary active">Active Primary</button>
    </div>
    <div class="col mb-5">
      <button type="button" class="btn btn-primary" disabled>Disabled Primary</button>
    </div>
  </div>
  <!--/row-->
</div>
<!--/container-->

Try it yourself

Source Code : Output

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

Creating Bootstrap 4 Outline Button

Follow the given below statement to create boostrap outline button.

Step1:Add .btn to the <button>,<input>,<a> element base class.
Step2:Now Add other contextual classes.btn-* to the <button>,<input>,<a> element base class.
Step3: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-primary">Primary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-warning">Warning</button>

Try It Now

Source Code

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

Try it yourself

Source Code : Output

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-primary btn-block">Full-Width Button</button>

Try It Now

Source Code

	
		<div class="container">
  <div class="row">
    <div class="col mb-5">
      <button type="button" class="btn btn-primary btn-block">Full-Width Button</button>
    </div>
    <div class="col mb-5">
      <button type="button" class="btn btn-info btn-block">Full-Width Button</button>
    </div>
  </div>
  <!--/row-->
</div>
<!--/container-->

Try it yourself

Source Code : Output

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 project application.

Process of creating spinner button.

Step1 Assign .spinner-border & .spinner-border-* to the child element(<span>) of button.
Step2 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-primary" disabled>
  <span class="spinner-border spinner-border-sm"></span>
  Loading..
</button>

Try It Now

Source Code

	
		<div class="container mt-5">
  <div class="row">
    <div class="col mb-5">
      <button class="btn btn-primary">
        <span class="spinner-border spinner-border-sm"></span>
      </button>
    </div>
    <div class="col mb-5">
      <button class="btn btn-primary">
        <span class="spinner-border spinner-border-sm"></span>
      </button>
    </div>
    <div class="col mb-5">
      <button class="btn btn-primary">
        <span class="spinner-border spinner-border-sm"></span>
        Loading..
      </button>
    </div>
  </div>
</div>

Try it yourself

Source Code : Output

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.

Our Tutorials

Html Tutorial HTML

Css Tutorial CSS

Bootstrap 5 Tutorial BOOTSTRAP 5

Bootstrap 4 Tutorial BOOTSTRAP 4

Materialize CSS Tutorial MATERIALIZE CSS