Bootstrap 4 Tutorial

BS4 Forms

Last modified on: October 26, 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="393618a4-1892-4ccb-bd2c-77531c0e2534" 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">
<h1>Bootstrap 4 Forms</h1>
<p>Bootstrap 4 Forms provide a flexible and stylish way to collect user input. With various components and styles, you can create responsive forms that look great on any device. This guide will cover the basics of using forms in Bootstrap 4, including various input types, layout options, and validation features.</p>
<hr />
<h2>Basic Form Structure</h2>
<p>To create a basic form in Bootstrap 4, use the <code>.form-group</code> class to wrap form controls and the <code>.form-control</code> class for inputs.</p>
<h3>Example</h3>
<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;form&gt;
    &lt;div class="form-group"&gt;
        &lt;label for="exampleInputEmail1"&gt;Email address&lt;/label&gt;
        &lt;input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email"&gt;
        &lt;small id="emailHelp" class="form-text text-muted"&gt;We'll never share your email with anyone else.&lt;/small&gt;
    &lt;/div&gt;
    &lt;div class="form-group"&gt;
        &lt;label for="exampleInputPassword1"&gt;Password&lt;/label&gt;
        &lt;input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"&gt;
    &lt;/div&gt;
    &lt;div class="form-group form-check"&gt;
        &lt;input type="checkbox" class="form-check-input" id="exampleCheck1"&gt;
        &lt;label class="form-check-label" for="exampleCheck1"&gt;Check me out&lt;/label&gt;
    &lt;/div&gt;
    &lt;button type="submit" class="btn btn-primary"&gt;Submit&lt;/button&gt;
&lt;/form&gt;
</code></pre>
</div>
</div>
</div>
</div>
<h2>Horizontal Form</h2>
<p>Bootstrap 4 allows you to create horizontal forms that align labels and controls side by side for better readability.</p>
<h3>Example</h3>
<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;form&gt;
    &lt;div class="form-row"&gt;
        &lt;div class="form-group col-md-6"&gt;
            &lt;label for="inputEmail4"&gt;Email&lt;/label&gt;
            &lt;input type="email" class="form-control" id="inputEmail4" placeholder="Email"&gt;
        &lt;/div&gt;
        &lt;div class="form-group col-md-6"&gt;
            &lt;label for="inputPassword4"&gt;Password&lt;/label&gt;
            &lt;input type="password" class="form-control" id="inputPassword4" placeholder="Password"&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="form-group"&gt;
        &lt;label for="inputAddress"&gt;Address&lt;/label&gt;
        &lt;input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St"&gt;
    &lt;/div&gt;
    &lt;div class="form-group"&gt;
        &lt;label for="inputAddress2"&gt;Address 2&lt;/label&gt;
        &lt;input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor"&gt;
    &lt;/div&gt;
    &lt;button type="submit" class="btn btn-primary"&gt;Sign in&lt;/button&gt;
&lt;/form&gt;
</code></pre>
</div>
</div>
</div>
</div>
<h2>Input Types</h2>
<p>Bootstrap 4 supports various input types, including text, email, password, radio buttons, checkboxes, and file uploads.</p>
<h3>Example</h3>
<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;form&gt;
    &lt;div class="form-group"&gt;
        &lt;label for="exampleInputName"&gt;Name&lt;/label&gt;
        &lt;input type="text" class="form-control" id="exampleInputName" placeholder="Your Name"&gt;
    &lt;/div&gt;
    &lt;div class="form-group"&gt;
        &lt;label for="exampleInputFile"&gt;File input&lt;/label&gt;
        &lt;input type="file" class="form-control-file" id="exampleInputFile"&gt;
    &lt;/div&gt;
    &lt;div class="form-group"&gt;
        &lt;label&gt;Options&lt;/label&gt;
        &lt;div class="form-check"&gt;
            &lt;input class="form-check-input" type="radio" name="options" id="option1" value="option1" checked&gt;
            &lt;label class="form-check-label" for="option1"&gt;Option 1&lt;/label&gt;
        &lt;/div&gt;
        &lt;div class="form-check"&gt;
            &lt;input class="form-check-input" type="radio" name="options" id="option2" value="option2"&gt;
            &lt;label class="form-check-label" for="option2"&gt;Option 2&lt;/label&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;button type="submit" class="btn btn-primary"&gt;Submit&lt;/button&gt;
&lt;/form&gt;
</code></pre>
</div>
</div>
</div>
</div>
<h2>Validation States</h2>
<p>Bootstrap 4 provides built-in validation styles for forms. You can use <code>.is-valid</code> and <code>.is-invalid</code> classes to indicate the state of the form controls.</p>
<h3>Example</h3>
<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;form&gt;
    &lt;div class="form-group"&gt;
        &lt;label for="validationServer01"&gt;First name&lt;/label&gt;
        &lt;input type="text" class="form-control is-valid" id="validationServer01" required&gt;
        &lt;div class="valid-feedback"&gt;Looks good!&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="form-group"&gt;
        &lt;label for="validationServer02"&gt;Last name&lt;/label&gt;
        &lt;input type="text" class="form-control is-invalid" id="validationServer02" required&gt;
        &lt;div class="invalid-feedback"&gt;Please choose a last name.&lt;/div&gt;
    &lt;/div&gt;
    &lt;button type="submit" class="btn btn-primary"&gt;Submit&lt;/button&gt;
&lt;/form&gt;
</code></pre>
</div>
</div>
</div>
</div>
<h2>Complete Example: Bootstrap 4 Forms</h2>
<p>Here&rsquo;s a complete example showcasing a Bootstrap 4 form with various input types and validation.</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;!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.0"&gt;
    &lt;title&gt;Bootstrap 4 Forms Example&lt;/title&gt;
    &lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;div class="container mt-5"&gt;
        &lt;h1&gt;Bootstrap 4 Form Example&lt;/h1&gt;
        &lt;form&gt;
            &lt;div class="form-group"&gt;
                &lt;label for="exampleInputName"&gt;Name&lt;/label&gt;
                &lt;input type="text" class="form-control" id="exampleInputName" placeholder="Your Name" required&gt;
            &lt;/div&gt;
            &lt;div class="form-group"&gt;
                &lt;label for="exampleInputEmail"&gt;Email address&lt;/label&gt;
                &lt;input type="email" class="form-control" id="exampleInputEmail" aria-describedby="emailHelp" placeholder="Enter email" required&gt;
                &lt;small id="emailHelp" class="form-text text-muted"&gt;We'll never share your email with anyone else.&lt;/small&gt;
            &lt;/div&gt;
            &lt;div class="form-group"&gt;
                &lt;label for="exampleInputPassword"&gt;Password&lt;/label&gt;
                &lt;input type="password" class="form-control" id="exampleInputPassword" placeholder="Password" required&gt;
            &lt;/div&gt;
            &lt;div class="form-group form-check"&gt;
                &lt;input type="checkbox" class="form-check-input" id="exampleCheck"&gt;
                &lt;label class="form-check-label" for="exampleCheck"&gt;Check me out&lt;/label&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://code.jquery.com/jquery-3.5.1.slim.min.js"&gt;&lt;/script&gt;
    &lt;script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"&gt;&lt;/script&gt;
    &lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
</div>
</div>
</div>
</div>
<hr />
<h2>&nbsp;</h2>
</div>
</div>
</div>
</div>
</div>
</div>

Web Technology View More