Bootstrap Buttons

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

Example

Steps to create a Bootstrap 5 buttons :

  • Add the btn class to the <button> element's base class.
  • To assign the button's background color, add contextual classes ( btn-*) to the <button> element's base.
  • The following are the contextual classes: btn-primary, btn-secondary, btn-success, btn-danger, btn-warning, btn-info, btn-light, btn-dark, and btn-link.

Source Code

          <a href="#" class="btn btn-secondary" role="button">Link Button</a>
<button type="button" class="btn btn-info">Button</button>
<input type="button" class="btn btn-primary" value="Input Button" />
<input type="submit" class="btn btn-success" value="Submit Button" />
        
Try it now

Code Explanation

Note: Please keep in mind that .btn & .btn-* classes can also be assigned to the <button>, <input>, and <a> element's base class to create a Bootstrap button.

Outline Button

Steps : To create an outline button:

  • Add the .btn class to any of the <button>, <a>, and <input> elements' base classes.
  • Assign the btn-outline-* class to any of the <button>, <a>, and <input> elements' base classes.
  • The following 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, and btn-outline-link.

Example

General Syntax

      <button type="button" class="btn btn-outline-*">Outline Button</button>
  
Try it now

Source Code

          <div class="container mt-4">
  <button type="button" class="btn btn-outline-primary">Primary</button>
  <button type="button" class="btn btn-outline-secondary">Secondary</button>
  <button type="button" class="btn btn-outline-success">Success</button>
</div>
        
Try it now

Buttons: Size

To create large and smaller buttons, use the .btn-lg & .btn-sm classes, respectively.

Example

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

          <b>Large Button</b>
<button type="button" class="btn btn-primary btn-lg">Large Primary button</button>
<b>Small Button</b>
<button type="button" class="btn btn-primary btn-sm">Small Primary button</button>
        
Try it now

Active & Disabled Button

To create an active button i.e. (appear pressed), use active class while to create a disabled button i.e (unclickable), use .disabled class.

Example

General Syntax

      <button type="button" class="btn btn-* active">Active Button</button>
<button type="button" class="btn btn-*" disabled>Disabled Button</button>
<a href="#" class="btn btn-* disabled">Disabled Link</a>
  
Try it now

Source Code

          <div class="container mt-4">
 <button type="button" class="btn btn-primary active">Active Button</button>
 <button type="button" class="btn btn-primary" disabled>Disabled Button</button>
 <a href="../../code-editor/375" class="btn btn-primary disabled">Disabled Link</a>
</div>
        
Try it now

Block Level Buttons

Block-level buttons span the entire width of the parent element, and they are created by the display and gap utility classes.

Example


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">
  <b class="text-center">Block Level Button</b>
  <div class="row">
    <div class="col-sm-8 offset-sm-2 d-grid gap-2">
      <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>
      <b>Button showing Block Level In md Breakpoint</b>
      <div class="d-grid gap-2 d-md-block">
        <button class="btn btn-primary" type="button">Button</button>
        <button class="btn btn-primary" type="button">Button</button>
      </div>
      <b>Centering The Button</b>
      <div class="d-grid gap-2 d-md-block mx-auto">
        <button class="btn btn-primary" type="button">Button</button>
        <button class="btn btn-primary" type="button">Button</button>
      </div>
      <b>Button Alignment</b>
      <div class="d-grid gap-2 d-md-flex justify-content-md-end">
        <button class="btn btn-primary me-md-2" type="button">Button</button>
        <button class="btn btn-primary" type="button">Button</button>
      </div>
    </div>
  </div><!--/row-->
</div><!--/container-->
        
Try it now

Code Explanation

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

Online Test / Quiz

Web Tutorials

Bootstrap Buttons
Html Tutorial HTML
Javascript Tutorial JAVASCRIPT
Css Tutorial CSS
Bootstrap 5 Tutorial BOOTSTRAP 5
Bootstrap 4 Tutorial BOOTSTRAP 4