Bootstrap Form Layout with Button and Form Control Sizes

How to use this Bootstrap snippet

Form Layout: Default Form Control & Button Size

Default form control and button size.

HTML 
              
<div class="row g-3">
  <div class="col">
    <input class="form-control" type="text" placeholder=".form-control" aria-label=".form-control example">
  </div>
  <div class="col">
    <button type="button" class="btn btn-primary">Default Button</button>
  </div>
</div>

Form Layout: Small Form Control & Button Size

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

Add .btn-sm for small button size.

HTML 

<div class="row g-3">
  <div class="col">
    <input class="form-control form-control-sm" type="text" placeholder=".form-control-sm" aria-label=".form-control-sm example">
  </div>
  <div class="col">
    <button type="button" class="btn btn-primary btn-sm">Small Button</button>
  </div>
</div>

Form Layout: Large Form Control & Button Size

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

Add .btn-lg for large button size.

HTML 

<div class="row g-3">
  <div class="col">
    <input class="form-control form-control-lg" type="text" placeholder=".form-control-lg" aria-label=".form-control-lg example">
  </div>
  <div class="col">
    <button type="button" class="btn btn-primary btn-lg">Large Button</button>
  </div>
</div>

Form Layout: X-Large Form Control & Button Size

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

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

HTML 

<div class="row g-3">
  <div class="col">
    <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="col">
    <button type="button" class="btn btn-primary bsb-btn-xl">XL Button</button>
  </div>
</div>

Form Layout: 2X-Large Form Control & Button Size

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

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

HTML 

<div class="row g-3">
  <div class="col">
    <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="col">
    <button type="button" class="btn btn-primary bsb-btn-2xl">2XL Button</button>
  </div>
</div>

Form Layout: 3X-Large Form Control & Button Size

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

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

HTML 

<div class="row g-3">
  <div class="col">
    <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="col">
    <button type="button" class="btn btn-primary bsb-btn-3xl">2XL Button</button>
  </div>
</div>

Form Layout: 4X-Large Form Control & Button Size

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

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

HTML 

<div class="row g-3">
  <div class="col">
    <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="col">
    <button type="button" class="btn btn-primary bsb-btn-4xl">4XL Button</button>
  </div>
</div>

Form Layout: 5X-Large Form Control & Button Size

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

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

HTML 

<div class="row g-3">
  <div class="col">
    <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="col">
    <button type="button" class="btn btn-primary bsb-btn-5xl">5XL Button</button>
  </div>
</div>

How to use this Bootstrap Form Layout with Button and Form Control Sizes

Place the code in the <body> for Interface 
          
<!-- Form Layout 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 Layout: Default Form Control & Button Size</h2>
        <p>Default form control and button size.</p>
        <div class="bsb-code-snippet border rounded">
          <div class="p-4">
            <div class="row g-3">
              <div class="col">
                <input class="form-control" type="text" placeholder=".form-control" aria-label=".form-control example">
              </div>
              <div class="col">
                <button type="button" class="btn btn-primary">Default Button</button>
              </div>
            </div>
          </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">
              <code class="language-html m-0 p-0">
&lt;div class=&quot;row g-3&quot;&gt;
  &lt;div class=&quot;col&quot;&gt;
    &lt;input class=&quot;form-control&quot; type=&quot;text&quot; placeholder=&quot;.form-control&quot; aria-label=&quot;.form-control example&quot;&gt;
  &lt;/div&gt;
  &lt;div class=&quot;col&quot;&gt;
    &lt;button type=&quot;button&quot; class=&quot;btn btn-primary&quot;&gt;Default Button&lt;/button&gt;
  &lt;/div&gt;
&lt;/div&gt;</code>
            </pre>
          </div>
        </div>
      </div>
      <div class="col-12">
        <h2>Form Layout: Small Form Control & Button Size</h2>
        <p class="mb-0">Add <code>.form-control-sm</code> for small form control size.</p>
        <p>Add <code>.btn-sm</code> for small button size.</p>
        <div class="bsb-code-snippet border rounded">
          <div class="p-4">
            <div class="row g-3">
              <div class="col">
                <input class="form-control form-control-sm" type="text" placeholder=".form-control-sm" aria-label=".form-control-sm example">
              </div>
              <div class="col">
                <button type="button" class="btn btn-primary btn-sm">Small Button</button>
              </div>
            </div>
          </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">
<code class="language-html m-0 p-0">
&lt;div class=&quot;row g-3&quot;&gt;
  &lt;div class=&quot;col&quot;&gt;
    &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;
  &lt;/div&gt;
  &lt;div class=&quot;col&quot;&gt;
    &lt;button type=&quot;button&quot; class=&quot;btn btn-primary btn-sm&quot;&gt;Small Button&lt;/button&gt;
  &lt;/div&gt;
&lt;/div&gt;</code>
            </pre>
          </div>
        </div>
      </div>
      <div class="col-12">
        <h2>Form Layout: Large Form Control & Button Size</h2>
        <p class="mb-0">Add <code>.form-control-lg</code> for large form control size.</p>
        <p>Add <code>.btn-lg</code> for large button size.</p>
        <div class="bsb-code-snippet border rounded">
          <div class="p-4">
            <div class="row g-3">
              <div class="col">
                <input class="form-control form-control-lg" type="text" placeholder=".form-control-lg" aria-label=".form-control-lg example">
              </div>
              <div class="col">
                <button type="button" class="btn btn-primary btn-lg">Large Button</button>
              </div>
            </div>
          </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">
<code class="language-html m-0 p-0">
&lt;div class=&quot;row g-3&quot;&gt;
  &lt;div class=&quot;col&quot;&gt;
    &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;
  &lt;/div&gt;
  &lt;div class=&quot;col&quot;&gt;
    &lt;button type=&quot;button&quot; class=&quot;btn btn-primary btn-lg&quot;&gt;Large Button&lt;/button&gt;
  &lt;/div&gt;
&lt;/div&gt;</code>
            </pre>
          </div>
        </div>
      </div>
      <div class="col-12">
        <h2>Form Layout: X-Large Form Control & Button Size</h2>
        <p class="mb-0">Add <code>.bsb-form-control-xl</code> for X-Large form control size.</p>
        <p>Add <code>.bsb-btn-xl</code> for X-Large button size.</p>
        <div class="bsb-code-snippet border rounded">
          <div class="p-4">
            <div class="row g-3">
              <div class="col">
                <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="col">
                <button type="button" class="btn btn-primary bsb-btn-xl">XL Button</button>
              </div>
            </div>
          </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">
<code class="language-html m-0 p-0">
&lt;div class=&quot;row g-3&quot;&gt;
  &lt;div class=&quot;col&quot;&gt;
    &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;
  &lt;/div&gt;
  &lt;div class=&quot;col&quot;&gt;
    &lt;button type=&quot;button&quot; class=&quot;btn btn-primary bsb-btn-xl&quot;&gt;XL Button&lt;/button&gt;
  &lt;/div&gt;
&lt;/div&gt;</code>
            </pre>
          </div>
        </div>
      </div>
      <div class="col-12">
        <h2>Form Layout: 2X-Large Form Control & Button Size</h2>
        <p class="mb-0">Add <code>.bsb-form-control-2xl</code> for 2X-Large form control size.</p>
        <p>Add <code>.bsb-btn-2xl</code> for 2X-Large button size.</p>
        <div class="bsb-code-snippet border rounded">
          <div class="p-4">
            <div class="row g-3">
              <div class="col">
                <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="col">
                <button type="button" class="btn btn-primary bsb-btn-2xl">2XL Button</button>
              </div>
            </div>
          </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">
<code class="language-html m-0 p-0">
&lt;div class=&quot;row g-3&quot;&gt;
  &lt;div class=&quot;col&quot;&gt;
    &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;
  &lt;/div&gt;
  &lt;div class=&quot;col&quot;&gt;
    &lt;button type=&quot;button&quot; class=&quot;btn btn-primary bsb-btn-2xl&quot;&gt;2XL Button&lt;/button&gt;
  &lt;/div&gt;
&lt;/div&gt;</code>
            </pre>
          </div>
        </div>
      </div>
      <div class="col-12">
        <h2>Form Layout: 3X-Large Form Control & Button Size</h2>
        <p class="mb-0">Add <code>.bsb-form-control-3xl</code> for 3X-Large form control size.</p>
        <p>Add <code>.bsb-btn-3xl</code> for 3X-Large button size.</p>
        <div class="bsb-code-snippet border rounded">
          <div class="p-4">
            <div class="row g-3">
              <div class="col">
                <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="col">
                <button type="button" class="btn btn-primary bsb-btn-3xl">3XL Button</button>
              </div>
            </div>
          </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">
<code class="language-html m-0 p-0">
&lt;div class=&quot;row g-3&quot;&gt;
  &lt;div class=&quot;col&quot;&gt;
    &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;
  &lt;/div&gt;
  &lt;div class=&quot;col&quot;&gt;
    &lt;button type=&quot;button&quot; class=&quot;btn btn-primary bsb-btn-3xl&quot;&gt;2XL Button&lt;/button&gt;
  &lt;/div&gt;
&lt;/div&gt;</code>
            </pre>
          </div>
        </div>
      </div>
      <div class="col-12">
        <h2>Form Layout: 4X-Large Form Control & Button Size</h2>
        <p class="mb-0">Add <code>.bsb-form-control-4xl</code> for 4X-Large form control size.</p>
        <p>Add <code>.bsb-btn-4xl</code> for 4X-Large button size.</p>
        <div class="bsb-code-snippet border rounded">
          <div class="p-4">
            <div class="row g-3">
              <div class="col">
                <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="col">
                <button type="button" class="btn btn-primary bsb-btn-4xl">4XL Button</button>
              </div>
            </div>
          </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">
<code class="language-html m-0 p-0">
&lt;div class=&quot;row g-3&quot;&gt;
  &lt;div class=&quot;col&quot;&gt;
    &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;
  &lt;/div&gt;
  &lt;div class=&quot;col&quot;&gt;
    &lt;button type=&quot;button&quot; class=&quot;btn btn-primary bsb-btn-4xl&quot;&gt;4XL Button&lt;/button&gt;
  &lt;/div&gt;
&lt;/div&gt;</code>
            </pre>
          </div>
        </div>
      </div>
      <div class="col-12">
        <h2>Form Layout: 5X-Large Form Control & Button Size</h2>
        <p class="mb-0">Add <code>.bsb-form-control-5xl</code> for 5X-Large form control size.</p>
        <p>Add <code>.bsb-btn-5xl</code> for 5X-Large button size.</p>
        <div class="bsb-code-snippet border rounded">
          <div class="p-4">
            <div class="row g-3">
              <div class="col">
                <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="col">
                <button type="button" class="btn btn-primary bsb-btn-5xl">5XL Button</button>
              </div>
            </div>
          </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">
<code class="language-html m-0 p-0">
&lt;div class=&quot;row g-3&quot;&gt;
  &lt;div class=&quot;col&quot;&gt;
    &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;
  &lt;/div&gt;
  &lt;div class=&quot;col&quot;&gt;
    &lt;button type=&quot;button&quot; class=&quot;btn btn-primary bsb-btn-5xl&quot;&gt;5XL Button&lt;/button&gt;
  &lt;/div&gt;
&lt;/div&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-layouts/form-layout-1/assets/css/form-layout-1.css">

This Bootstrap layout example demonstrates the different sizes of Bootstrap Buttons and Bootstrap Form Controls. Increase in the size of both Bootstrap Buttons and Bootstrap Form Controls are in sync.