Bootstrap 3 Tutorial

Bootstrap 3 Input Sizing

Last modified on: October 28, 2024

<div class="flex-shrink-0 flex flex-col relative items-end">
<div>
<div class="pt-0">
<div class="gizmo-bot-avatar flex h-8 w-8 items-center justify-center overflow-hidden rounded-full">&nbsp;</div>
</div>
</div>
</div>
<div class="group/conversation-turn relative flex w-full min-w-0 flex-col agent-turn">
<div class="flex-col gap-1 md:gap-3">
<div class="flex max-w-full flex-col flex-grow">
<div class="min-h-8 text-message flex w-full flex-col items-end gap-2 whitespace-normal break-words [.text-message+&amp;]:mt-5" dir="auto" data-message-author-role="assistant" data-message-id="7f6cd8ec-d51f-4984-a928-f6faf36625bf" data-message-model-slug="gpt-4o-mini">
<div class="flex w-full flex-col gap-1 empty:hidden first:pt-[3px]">
<div class="markdown prose w-full break-words dark:prose-invert light">
<h3>Bootstrap 3 Input Sizing</h3>
<p>In Bootstrap 3, you can easily control the size of input fields using predefined classes. This allows you to create forms that are responsive and visually consistent. The available input sizes include <code>input-lg</code>, <code>input-sm</code>, and the default size. In this tutorial, we will explore how to use these classes to adjust the sizing of input fields, buttons, and form groups.</p>
<hr />
<h3>1. Standard Input Size</h3>
<p>By default, Bootstrap 3 inputs have a standard size. You can create a simple form with default input sizes as follows:</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;div class="form-group"&gt;
    &lt;label for="defaultInput"&gt;Default Input:&lt;/label&gt;
    &lt;input type="text" class="form-control" id="defaultInput" placeholder="Default size"&gt;
&lt;/div&gt;
</code></pre>
</div>
</div>
</div>
</div>
<h3>2. Large Input Size</h3>
<p>To create larger input fields, you can use the <code>input-lg</code> class. This is useful for making inputs more prominent or easier to interact with.</p>
<h5>Example of Large Input Size</h5>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;div class="form-group"&gt;
    &lt;label for="largeInput"&gt;Large Input:&lt;/label&gt;
    &lt;input type="text" class="form-control input-lg" id="largeInput" placeholder="Large size"&gt;
&lt;/div&gt;
</code></pre>
</div>
</div>
</div>
</div>
<h3>3. Small Input Size</h3>
<p>Conversely, you can create smaller input fields using the <code>input-sm</code> class. This can be helpful in forms where space is limited or when you want to achieve a more compact design.</p>
<h5>Example of Small Input Size</h5>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;div class="form-group"&gt;
    &lt;label for="smallInput"&gt;Small Input:&lt;/label&gt;
    &lt;input type="text" class="form-control input-sm" id="smallInput" placeholder="Small size"&gt;
&lt;/div&gt;
</code></pre>
</div>
</div>
</div>
</div>
<h3>4. Input Group Sizing</h3>
<p>You can also apply sizing to input groups, which allows you to maintain consistency in size for both the input and the accompanying elements (like buttons or icons).</p>
<h5>Example of Input Group with Sizes</h5>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;div class="form-group"&gt;
    &lt;label for="largeInputGroup"&gt;Large Input Group:&lt;/label&gt;
    &lt;div class="input-group"&gt;
        &lt;span class="input-group-addon"&gt;@&lt;/span&gt;
        &lt;input type="text" class="form-control input-lg" id="largeInputGroup" placeholder="Large Input Group"&gt;
    &lt;/div&gt;
&lt;/div&gt;

&lt;div class="form-group"&gt;
    &lt;label for="smallInputGroup"&gt;Small Input Group:&lt;/label&gt;
    &lt;div class="input-group"&gt;
        &lt;span class="input-group-addon"&gt;@&lt;/span&gt;
        &lt;input type="text" class="form-control input-sm" id="smallInputGroup" placeholder="Small Input Group"&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>
</div>
</div>
</div>
</div>
<hr />
<h3>&nbsp;</h3>
</div>
</div>
</div>
</div>
</div>
</div>
<h3>Conclusion</h3>
<p>In this tutorial, we explored how to utilize Bootstrap 3's input sizing classes to create responsive and visually appealing forms. By using the <code>input-lg</code> and <code>input-sm</code> classes, you can easily adjust the size of your input fields to fit your design needs. Input groups further enhance this flexibility by allowing you to maintain consistent sizes across different elements within a form. Experiment with these options to create forms that are user-friendly and aesthetically pleasing!</p>

Web Technology View More