Bootstrap 3 Tutorial

Bootstrap 3 Inputs

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="53784954-2726-4cbd-b5b9-4d266b541142" 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 Inputs</h3>
<p>Bootstrap 3 provides a variety of input types and components that are styled to look consistent and appealing across different browsers. These inputs are designed to be responsive and mobile-friendly, making it easy to create forms that work on all devices. This guide covers various input types, custom styling options, and examples to help you implement input fields in your forms effectively.</p>
<hr />
<h3>Basic Input Types</h3>
<p>Bootstrap 3 supports several standard input types, each serving different purposes:</p>
<ol>
<li><strong>Text Input</strong></li>
<li><strong>Email Input</strong></li>
<li><strong>Password Input</strong></li>
<li><strong>Textarea</strong></li>
<li><strong>Checkbox</strong></li>
<li><strong>Radio Button</strong></li>
<li><strong>Select Menu</strong></li>
</ol>
<h4>Example of Basic Inputs</h4>
<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;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;title&gt;Bootstrap 3 Inputs Example&lt;/title&gt;
    &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;div class="container"&gt;
    &lt;h2&gt;Bootstrap 3 Inputs&lt;/h2&gt;
    &lt;form&gt;
        &lt;div class="form-group"&gt;
            &lt;label for="textInput"&gt;Text Input:&lt;/label&gt;
            &lt;input type="text" class="form-control" id="textInput" placeholder="Enter text"&gt;
        &lt;/div&gt;
        &lt;div class="form-group"&gt;
            &lt;label for="emailInput"&gt;Email Input:&lt;/label&gt;
            &lt;input type="email" class="form-control" id="emailInput" placeholder="Enter email"&gt;
        &lt;/div&gt;
        &lt;div class="form-group"&gt;
            &lt;label for="passwordInput"&gt;Password Input:&lt;/label&gt;
            &lt;input type="password" class="form-control" id="passwordInput" placeholder="Password"&gt;
        &lt;/div&gt;
        &lt;div class="form-group"&gt;
            &lt;label for="textareaInput"&gt;Textarea:&lt;/label&gt;
            &lt;textarea class="form-control" id="textareaInput" rows="5" placeholder="Enter your message"&gt;&lt;/textarea&gt;
        &lt;/div&gt;
        &lt;div class="checkbox"&gt;
            &lt;label&gt;&lt;input type="checkbox"&gt; Check me out&lt;/label&gt;
        &lt;/div&gt;
        &lt;div class="form-group"&gt;
            &lt;label&gt;Radio Buttons:&lt;/label&gt;&lt;br&gt;
            &lt;label class="radio-inline"&gt;
                &lt;input type="radio" name="options" id="option1" value="option1"&gt; Option 1
            &lt;/label&gt;
            &lt;label class="radio-inline"&gt;
                &lt;input type="radio" name="options" id="option2" value="option2"&gt; Option 2
            &lt;/label&gt;
        &lt;/div&gt;
        &lt;div class="form-group"&gt;
            &lt;label for="selectInput"&gt;Select Menu:&lt;/label&gt;
            &lt;select class="form-control" id="selectInput"&gt;
                &lt;option&gt;Option 1&lt;/option&gt;
                &lt;option&gt;Option 2&lt;/option&gt;
                &lt;option&gt;Option 3&lt;/option&gt;
            &lt;/select&gt;
        &lt;/div&gt;
        &lt;button type="submit" class="btn btn-primary"&gt;Submit&lt;/button&gt;
    &lt;/form&gt;
&lt;/div&gt;

&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"&gt;&lt;/script&gt;
&lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
</div>
</div>
</div>
</div>
<hr />
<h3>Customizing Input Styles</h3>
<p>Bootstrap 3 also allows you to customize input fields using classes that can modify their appearance and behavior:</p>
<ul>
<li><strong>Sizing</strong>: Use <code>.input-lg</code> for larger inputs and <code>.input-sm</code> for smaller inputs.</li>
<li><strong>State Classes</strong>: Add classes like <code>.has-success</code>, <code>.has-warning</code>, or <code>.has-error</code> to indicate the validation state of inputs.</li>
</ul>
<h4>Example of Custom Input Styles</h4>
<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="container"&gt;
    &lt;h2&gt;Customized Inputs&lt;/h2&gt;
    &lt;form&gt;
        &lt;div class="form-group has-success"&gt;
            &lt;label for="successInput"&gt;Success Input:&lt;/label&gt;
            &lt;input type="text" class="form-control input-lg" id="successInput" placeholder="Success"&gt;
        &lt;/div&gt;
        &lt;div class="form-group has-error"&gt;
            &lt;label for="errorInput"&gt;Error Input:&lt;/label&gt;
            &lt;input type="text" class="form-control input-sm" id="errorInput" placeholder="Error"&gt;
            &lt;span class="help-block"&gt;Error message here.&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class="form-group"&gt;
            &lt;label for="selectInput"&gt;Select Menu:&lt;/label&gt;
            &lt;select class="form-control" id="selectInput"&gt;
                &lt;option&gt;Option 1&lt;/option&gt;
                &lt;option&gt;Option 2&lt;/option&gt;
                &lt;option&gt;Option 3&lt;/option&gt;
            &lt;/select&gt;
        &lt;/div&gt;
        &lt;button type="submit" class="btn btn-primary"&gt;Submit&lt;/button&gt;
    &lt;/form&gt;
&lt;/div&gt;
</code></pre>
</div>
</div>
</div>
</div>
<hr />
<h3>&nbsp;</h3>
</div>
</div>
</div>
</div>
</div>
</div>
<h3>Conclusion</h3>
<p>Bootstrap 3 inputs are versatile and can be easily styled to fit the needs of your web application. With various input types and customization options, you can create user-friendly forms that enhance the overall user experience. Whether you are collecting simple text data or creating complex forms, Bootstrap 3 provides the necessary components and styles to get the job done efficiently.</p>

Web Technology View More