Bootstrap Form Control Size Increase

How to use this Bootstrap snippet

Form Control Size: Default

Default form control size.

HTML 
              <input class="form-control" type="text" placeholder=".form-control" aria-label=".form-control example">

Form Control Size: Small

Add .form-control-sm for small form control size.

HTML 
              <input class="form-control form-control-sm" type="text" placeholder=".form-control-sm" aria-label=".form-control-sm example">

Form Control Size: Large

Add .form-control-lg for large form control size.

HTML 
              <input class="form-control form-control-lg" type="text" placeholder=".form-control-lg" aria-label=".form-control-lg example">

Form Control Size: X-Large

Add .bsb-form-control-xl for X-Large form control size.

HTML 
              <input class="form-control bsb-form-control-xl" type="text" placeholder=".bsb-form-control-xl" aria-label=".bsb-form-control-xl example">

Form Control Size: 2X-Large

Add .bsb-form-control-2xl for 2X-Large form control size.

HTML 
              <input class="form-control bsb-form-control-2xl" type="text" placeholder=".bsb-form-control-2xl" aria-label=".bsb-form-control-2xl example">

Form Control Size: 3X-Large

Add .bsb-form-control-3xl for 3X-Large form control size.

HTML 
              <input class="form-control bsb-form-control-3xl" type="text" placeholder=".bsb-form-control-3xl" aria-label=".bsb-form-control-3xl example">

Form Control Size: 4X-Large

Add .bsb-form-control-4xl for 4X-Large form control size.

HTML 
              <input class="form-control bsb-form-control-4xl" type="text" placeholder=".bsb-form-control-4xl" aria-label=".bsb-form-control-4xl example">

Form Control Size: 5X-Large

Add .bsb-form-control-5xl for 5X-Large form control size.

HTML 
              <input class="form-control bsb-form-control-5xl" type="text" placeholder=".bsb-form-control-5xl" aria-label=".bsb-form-control-5xl example">

How to use this Bootstrap Form Control Size Increase

Place the code in the <body> for Interface 
          
<!-- Form Control 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>Form Control Size: Default</h2>
        <p>Default form control size.</p>
        <div class="bsb-code-snippet border rounded">
          <div class="p-4">
            <input class="form-control" type="text" placeholder=".form-control" aria-label=".form-control example">
          </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;">&lt;input class=&quot;form-control&quot; type=&quot;text&quot; placeholder=&quot;.form-control&quot; aria-label=&quot;.form-control example&quot;&gt;</code>
            </pre>
          </div>
        </div>
      </div>
      <div class="col-12">
        <h2>Form Control Size: Small</h2>
        <p>Add <code>.form-control-sm</code> for small form control size.</p>
        <div class="bsb-code-snippet border rounded">
          <div class="p-4">
            <input class="form-control form-control-sm" type="text" placeholder=".form-control-sm" aria-label=".form-control-sm example">
          </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;">&lt;input class=&quot;form-control form-control-sm&quot; type=&quot;text&quot; placeholder=&quot;.form-control-sm&quot; aria-label=&quot;.form-control-sm example&quot;&gt;</code>
            </pre>
          </div>
        </div>
      </div>
      <div class="col-12">
        <h2>Form Control Size: Large</h2>
        <p>Add <code>.form-control-lg</code> for large form control size.</p>
        <div class="bsb-code-snippet border rounded">
          <div class="p-4">
            <input class="form-control form-control-lg" type="text" placeholder=".form-control-lg" aria-label=".form-control-lg example">
          </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;">&lt;input class=&quot;form-control form-control-lg&quot; type=&quot;text&quot; placeholder=&quot;.form-control-lg&quot; aria-label=&quot;.form-control-lg example&quot;&gt;</code>
            </pre>
          </div>
        </div>
      </div>
      <div class="col-12">
        <h2>Form Control Size: X-Large</h2>
        <p>Add <code>.bsb-form-control-xl</code> for X-Large form control size.</p>
        <div class="bsb-code-snippet border rounded">
          <div class="p-4">
            <input class="form-control bsb-form-control-xl" type="text" placeholder=".bsb-form-control-xl" aria-label=".bsb-form-control-xl example">
          </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;">&lt;input class=&quot;form-control bsb-form-control-xl&quot; type=&quot;text&quot; placeholder=&quot;.bsb-form-control-xl&quot; aria-label=&quot;.bsb-form-control-xl example&quot;&gt;</code>
            </pre>
          </div>
        </div>
      </div>
      <div class="col-12">
        <h2>Form Control Size: 2X-Large</h2>
        <p>Add <code>.bsb-form-control-2xl</code> for 2X-Large form control size.</p>
        <div class="bsb-code-snippet border rounded">
          <div class="p-4">
            <input class="form-control bsb-form-control-2xl" type="text" placeholder=".bsb-form-control-2xl" aria-label=".bsb-form-control-2xl example">
          </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;">&lt;input class=&quot;form-control bsb-form-control-2xl&quot; type=&quot;text&quot; placeholder=&quot;.bsb-form-control-2xl&quot; aria-label=&quot;.bsb-form-control-2xl example&quot;&gt;</code>
            </pre>
          </div>
        </div>
      </div>
      <div class="col-12">
        <h2>Form Control Size: 3X-Large</h2>
        <p>Add <code>.bsb-form-control-3xl</code> for 3X-Large form control size.</p>
        <div class="bsb-code-snippet border rounded">
          <div class="p-4">
            <input class="form-control bsb-form-control-3xl" type="text" placeholder=".bsb-form-control-3xl" aria-label=".bsb-form-control-3xl example">
          </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;">&lt;input class=&quot;form-control bsb-form-control-3xl&quot; type=&quot;text&quot; placeholder=&quot;.bsb-form-control-3xl&quot; aria-label=&quot;.bsb-form-control-3xl example&quot;&gt;</code>
            </pre>
          </div>
        </div>
      </div>
      <div class="col-12">
        <h2>Form Control Size: 4X-Large</h2>
        <p>Add <code>.bsb-form-control-4xl</code> for 4X-Large form control size.</p>
        <div class="bsb-code-snippet border rounded">
          <div class="p-4">
            <input class="form-control bsb-form-control-4xl" type="text" placeholder=".bsb-form-control-4xl" aria-label=".bsb-form-control-4xl example">
          </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;">&lt;input class=&quot;form-control bsb-form-control-4xl&quot; type=&quot;text&quot; placeholder=&quot;.bsb-form-control-4xl&quot; aria-label=&quot;.bsb-form-control-4xl example&quot;&gt;</code>
            </pre>
          </div>
        </div>
      </div>
      <div class="col-12">
        <h2>Form Control Size: 5X-Large</h2>
        <p>Add <code>.bsb-form-control-5xl</code> for 5X-Large form control size.</p>
        <div class="bsb-code-snippet border rounded">
          <div class="p-4">
            <input class="form-control bsb-form-control-5xl" type="text" placeholder=".bsb-form-control-5xl" aria-label=".bsb-form-control-5xl example">
          </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;">&lt;input class=&quot;form-control bsb-form-control-5xl&quot; type=&quot;text&quot; placeholder=&quot;.bsb-form-control-5xl&quot; aria-label=&quot;.bsb-form-control-5xl example&quot;&gt;</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/form-controls/form-control-1/assets/css/form-control-1.css">

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