Bootstrap Form Control Size Increase

Bootstrap form control sizes play a pivotal role in enhancing user experience. This tutorial will explore the significance of increasing Bootstrap form control sizes and how it positively impacts usability.

Bootstrap 5 Tutorial Update

We have updated this Bootstrap tutorial to Bootstrap 5.3.3 and BSB Framework 2.0.4. We have rechecked this Bootstrap example on May 3, 2024.

Best Ready to Use Web Themes & Templates

Download Now

Bootstrap Form Control Size Increase

Form controls, including input fields, buttons, checkboxes, and dropdowns, are the core elements of web forms. Their size directly influences user interaction and accessibility. More extensive form controls are easier to read and interact with, particularly on mobile devices or touch-enabled interfaces.

PreviewGet Code
More SnippetsJoin BS Brain

Bootstrap 5 Templates

Bootstrap One Page Templates, Bootstrap 5 Templates, Free Bootstrap Templates

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.

BSB Form Control Sizing Utility CSS

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">

Form Control Size: Default

Default form control size.

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

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

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

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

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

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

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

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

Enlarged form controls cater to users with varying abilities, ensuring better accessibility and usability for all. More prominent form elements can create a clear visual hierarchy, guiding users’ attention to essential fields and actions within the form.

Features

  • Bootstrap 5
  • BSB Framework
  • Bootstrap Form Controls
  • Form Control Sizing
  • Form Control Size Increase
  • Form Control Size Decrease
  • HTML5 & CSS3
  • W3C Valid
  • Commented Code
  • Responsive Layout
  • Easy to Use
  • Cross Browser Compatible

Tags

,

Bootstrap 5 Components

Bootstrap Login Forms, Bootstrap 5 Snippets, Bootstrap Cards, Bootstrap Carousels, Bootstrap Heroes, Bootstrap Footers

Preview

Preview
<!-- 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>
<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 5 Utilities

Free download our Bootstrap Utility classes to provide quick and easy solutions for applying certain styles and adjustments to HTML elements. These utility classes allow developers to rapidly modify their website’s layout, appearance, and behavior without writing custom CSS.

  • Use in personal projects
  • Customize the template files
  • Number of websites/domains
  • Create websites for clients
  • Remove footer credit link
  • Working PHP/AJAX contact form
  • Sass/SCSS Files
  • JS Source Files
  • Premium support via Email
  • Forum support
  • Free Updates
  • Access to all 8 Pro Templates
  • Access to all 51 Pro Components
  • Use in SaaS
  • Resell & Redistribute

BB Startup

Freelancer

$49

3 Months Access

8 Pro BS Templates

51 Pro BS Components

  • Use in personal projects
  • Customize the template files
  • Unlimited Number of websites/domains
  • Create websites for clients
  • Remove footer credit link
  • Working PHP/AJAX contact form
  • Sass/SCSS Files
  • JS Source Files
  • Premium support via Email
  • Forum support
  • 3 Months Free Updates
  • Access to all our 8 Pro Templates
  • Access to all our 51 Pro Components
  • Use in SaaS
  • Resell & Redistribute
Buy Now

BB Club

Agency

$149

12 Months Access

8 Pro BS Templates

51 Pro BS Components

  • Use in personal projects
  • Customize the template files
  • Unlimited Number of websites/domains
  • Create websites for clients
  • Remove footer credit link
  • Working PHP/AJAX contact form
  • Sass/SCSS Files
  • JS Source Files
  • Premium support via Email
  • Forum support
  • 12 Months Free Updates
  • Access to all our 8 Pro Templates
  • Access to all our 51 Pro Components
  • Use in SaaS
  • Resell & Redistribute
Buy Now