Bootstrap Button Size Increase

How to use this Bootstrap snippet

Button Size: Default

Default button size.

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

Button Size: Small

Add .btn-sm for small button size.

HTML 
              <button type="button" class="btn btn-primary btn-sm">Small Button</button>

Button Size: Large

Add .btn-lg for large button size.

HTML 
              <button type="button" class="btn btn-primary btn-lg">Large Button</button>

Button Size: X-Large

Add .bsb-btn-xl for X-Large button size.

HTML 
              <button type="button" class="btn btn-primary bsb-btn-xl">XL Button</button>

Button Size: 2X-Large

Add .bsb-btn-2xl for 2X-Large button size.

HTML 
              <button type="button" class="btn btn-primary bsb-btn-2xl">2XL Button</button>

Button Size: 3X-Large

Add .bsb-btn-3xl for 3X-Large button size.

HTML 
              <button type="button" class="btn btn-primary bsb-btn-3xl">3XL Button</button>

Button Size: 4X-Large

Add .bsb-btn-4xl for 4X-Large button size.

HTML 
              <button type="button" class="btn btn-primary bsb-btn-4xl">4XL Button</button>

Button Size: 5X-Large

Add .bsb-btn-5xl for 5X-Large button size.

HTML 
              <button type="button" class="btn btn-primary bsb-btn-5xl">5XL Button</button>

How to use this Bootstrap Button Size Increase

Place the code in the <body> for Interface 
          
<!-- Button 1 - Bootstrap Brain Component -->
<section class="py-3 py-md-5">
  <div class="container">
    <div class="row gy-3 gy-md-5">
      <div class="col-12">
        <h2>Button Size: Default</h2>
        <p>Default button size.</p>
        <div class="bsb-code-snippet border rounded">
          <div class="p-4">
            <button type="button" class="btn btn-primary">Default Button</button>
          </div>
          <div class="d-flex align-items-center px-4 py-3 border-0 border-top border-bottom bg-light">
            <div class="font-monospace text-body-secondary text-uppercase">
              HTML
            </div>
            <div class="ms-auto">
              <a href="#!" class="bsb-clipboard" data-bs-toggle="tooltip" data-bs-title="Copy to clipboard">
                <i class="bsb-icon bi-clipboard"></i>
              </a>
            </div>
          </div>
          <div class="bsb-highlight px-4 py-3 bg-light">
            <pre class="m-0 p-0 bg-transparent" style="white-space: pre-line;">
              <code class="language-html m-0 p-0" style="white-space: pre-line;">&#x3C;button type=&#x22;button&#x22; class=&#x22;btn btn-primary&#x22;&#x3E;Default Button&#x3C;/button&#x3E;</code>
            </pre>
          </div>
        </div>
      </div>
      <div class="col-12">
        <h2>Button Size: Small</h2>
        <p>Add <code>.btn-sm</code> for small button size.</p>
        <div class="bsb-code-snippet border rounded">
          <div class="p-4">
            <button type="button" class="btn btn-primary btn-sm">Small Button</button>
          </div>
          <div class="d-flex align-items-center px-4 py-3 border-0 border-top border-bottom bg-light">
            <div class="font-monospace text-body-secondary text-uppercase">
              HTML
            </div>
            <div class="ms-auto">
              <a href="#!" class="bsb-clipboard" data-bs-toggle="tooltip" data-bs-title="Copy to clipboard">
                <i class="bsb-icon bi-clipboard"></i>
              </a>
            </div>
          </div>
          <div class="bsb-highlight px-4 py-3 bg-light">
            <pre class="m-0 p-0 bg-transparent" style="white-space: pre-line;">
              <code class="language-html m-0 p-0" style="white-space: pre-line;">&#x3C;button type=&#x22;button&#x22; class=&#x22;btn btn-primary btn-sm&#x22;&#x3E;Small Button&#x3C;/button&#x3E;</code>
            </pre>
          </div>
        </div>
      </div>
      <div class="col-12">
        <h2>Button Size: Large</h2>
        <p>Add <code>.btn-lg</code> for large button size.</p>
        <div class="bsb-code-snippet border rounded">
          <div class="p-4">
            <button type="button" class="btn btn-primary btn-lg">Large Button</button>
          </div>
          <div class="d-flex align-items-center px-4 py-3 border-0 border-top border-bottom bg-light">
            <div class="font-monospace text-body-secondary text-uppercase">
              HTML
            </div>
            <div class="ms-auto">
              <a href="#!" class="bsb-clipboard" data-bs-toggle="tooltip" data-bs-title="Copy to clipboard">
                <i class="bsb-icon bi-clipboard"></i>
              </a>
            </div>
          </div>
          <div class="bsb-highlight px-4 py-3 bg-light">
            <pre class="m-0 p-0 bg-transparent" style="white-space: pre-line;">
              <code class="language-html m-0 p-0" style="white-space: pre-line;">&#x3C;button type=&#x22;button&#x22; class=&#x22;btn btn-primary btn-lg&#x22;&#x3E;Large Button&#x3C;/button&#x3E;</code>
            </pre>
          </div>
        </div>
      </div>
      <div class="col-12">
        <h2>Button Size: X-Large</h2>
        <p>Add <code>.bsb-btn-xl</code> for X-Large button size.</p>
        <div class="bsb-code-snippet border rounded">
          <div class="p-4">
            <button type="button" class="btn btn-primary bsb-btn-xl">XL Button</button>
          </div>
          <div class="d-flex align-items-center px-4 py-3 border-0 border-top border-bottom bg-light">
            <div class="font-monospace text-body-secondary text-uppercase">
              HTML
            </div>
            <div class="ms-auto">
              <a href="#!" class="bsb-clipboard" data-bs-toggle="tooltip" data-bs-title="Copy to clipboard">
                <i class="bsb-icon bi-clipboard"></i>
              </a>
            </div>
          </div>
          <div class="bsb-highlight px-4 py-3 bg-light">
            <pre class="m-0 p-0 bg-transparent" style="white-space: pre-line;">
              <code class="language-html m-0 p-0" style="white-space: pre-line;">&#x3C;button type=&#x22;button&#x22; class=&#x22;btn btn-primary bsb-btn-xl&#x22;&#x3E;XL Button&#x3C;/button&#x3E;</code>
            </pre>
          </div>
        </div>
      </div>
      <div class="col-12">
        <h2>Button Size: 2X-Large</h2>
        <p>Add <code>.bsb-btn-2xl</code> for 2X-Large button size.</p>
        <div class="bsb-code-snippet border rounded">
          <div class="p-4">
            <button type="button" class="btn btn-primary bsb-btn-2xl">2XL Button</button>
          </div>
          <div class="d-flex align-items-center px-4 py-3 border-0 border-top border-bottom bg-light">
            <div class="font-monospace text-body-secondary text-uppercase">
              HTML
            </div>
            <div class="ms-auto">
              <a href="#!" class="bsb-clipboard" data-bs-toggle="tooltip" data-bs-title="Copy to clipboard">
                <i class="bsb-icon bi-clipboard"></i>
              </a>
            </div>
          </div>
          <div class="bsb-highlight px-4 py-3 bg-light">
            <pre class="m-0 p-0 bg-transparent" style="white-space: pre-line;">
              <code class="language-html m-0 p-0" style="white-space: pre-line;">&#x3C;button type=&#x22;button&#x22; class=&#x22;btn btn-primary bsb-btn-2xl&#x22;&#x3E;2XL Button&#x3C;/button&#x3E;</code>
            </pre>
          </div>
        </div>
      </div>
      <div class="col-12">
        <h2>Button Size: 3X-Large</h2>
        <p>Add <code>.bsb-btn-3xl</code> for 3X-Large button size.</p>
        <div class="bsb-code-snippet border rounded">
          <div class="p-4">
            <button type="button" class="btn btn-primary bsb-btn-3xl">3XL Button</button>
          </div>
          <div class="d-flex align-items-center px-4 py-3 border-0 border-top border-bottom bg-light">
            <div class="font-monospace text-body-secondary text-uppercase">
              HTML
            </div>
            <div class="ms-auto">
              <a href="#!" class="bsb-clipboard" data-bs-toggle="tooltip" data-bs-title="Copy to clipboard">
                <i class="bsb-icon bi-clipboard"></i>
              </a>
            </div>
          </div>
          <div class="bsb-highlight px-4 py-3 bg-light">
            <pre class="m-0 p-0 bg-transparent" style="white-space: pre-line;">
              <code class="language-html m-0 p-0" style="white-space: pre-line;">&#x3C;button type=&#x22;button&#x22; class=&#x22;btn btn-primary bsb-btn-3xl&#x22;&#x3E;3XL Button&#x3C;/button&#x3E;</code>
            </pre>
          </div>
        </div>
      </div>
      <div class="col-12">
        <h2>Button Size: 4X-Large</h2>
        <p>Add <code>.bsb-btn-4xl</code> for 4X-Large button size.</p>
        <div class="bsb-code-snippet border rounded">
          <div class="p-4">
            <button type="button" class="btn btn-primary bsb-btn-4xl">4XL Button</button>
          </div>
          <div class="d-flex align-items-center px-4 py-3 border-0 border-top border-bottom bg-light">
            <div class="font-monospace text-body-secondary text-uppercase">
              HTML
            </div>
            <div class="ms-auto">
              <a href="#!" class="bsb-clipboard" data-bs-toggle="tooltip" data-bs-title="Copy to clipboard">
                <i class="bsb-icon bi-clipboard"></i>
              </a>
            </div>
          </div>
          <div class="bsb-highlight px-4 py-3 bg-light">
            <pre class="m-0 p-0 bg-transparent" style="white-space: pre-line;">
              <code class="language-html m-0 p-0" style="white-space: pre-line;">&#x3C;button type=&#x22;button&#x22; class=&#x22;btn btn-primary bsb-btn-4xl&#x22;&#x3E;4XL Button&#x3C;/button&#x3E;</code>
            </pre>
          </div>
        </div>
      </div>
      <div class="col-12">
        <h2>Button Size: 5X-Large</h2>
        <p>Add <code>.bsb-btn-5xl</code> for 5X-Large button size.</p>
        <div class="bsb-code-snippet border rounded">
          <div class="p-4">
            <button type="button" class="btn btn-primary bsb-btn-5xl">5XL Button</button>
          </div>
          <div class="d-flex align-items-center px-4 py-3 border-0 border-top border-bottom bg-light">
            <div class="font-monospace text-body-secondary text-uppercase">
              HTML
            </div>
            <div class="ms-auto">
              <a href="#!" class="bsb-clipboard" data-bs-toggle="tooltip" data-bs-title="Copy to clipboard">
                <i class="bsb-icon bi-clipboard"></i>
              </a>
            </div>
          </div>
          <div class="bsb-highlight px-4 py-3 bg-light">
            <pre class="m-0 p-0 bg-transparent" style="white-space: pre-line;">
              <code class="language-html m-0 p-0" style="white-space: pre-line;">&#x3C;button type=&#x22;button&#x22; class=&#x22;btn btn-primary bsb-btn-5xl&#x22;&#x3E;5XL Button&#x3C;/button&#x3E;</code>
            </pre>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
Place the <link> tag in the <head> for CSS 
          
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/tutorials/buttons/button-1/assets/css/button-1.css">

Bootstrap includes three button sizes. Apart from Default button size, Add .btn-lg for larger or .btn-sm for smaller buttons. For additional sizes, Add button-1.css stylesheet in your Bootstrap Project. You can use .bsb-btn-* classes to increase the Bootstrap button size.