Platform
- CMS
- AI
- Cloud
- Metaverse
- Mobile
- Blockchain
- Digital
- IoT
Pricing
Developers
Enterprise
About Us
Contact

How to Use Bootstrap to Create a Form with Inline Inputs

In order to conserve design space, you may need to have your form inputs inline rather than stacked. Bootstrap makes this incredibly easy to do.

Subscribers. It doesn't matter if you want people to sign-up to read your latest articles or want them to know about your product offerings, you need a sign-up form in order to turn visitors into subscribers so that they keep coming back.

Putting a sign-up form in your footer is a great way to encourage people to sign-up for your e-mails because if people are making their way all the way to the bottom of your webpage, it means they're already intrigued by your content.

Depending on how you arranged the content in your footer though, a vertical form may break the spatial arrangement inside your footer. In these cases, putting a horizontally laid out form is a great way to conserve space and keep the layout organized. Normally, creating and customizing a form with HTML and CSS takes work. You need to spend time adjusting the alignment, width, and spacing of the form elements but Bootstrap takes all that burden off your shoulders by providing pre-defined components and structures for forms.

Bootstrap's form controls already have all the styling. For example, all the form control elements such as input, select, and textareas are styled with the .form-control class.

There are some things you need to include. For example, you should always use role="form" inside the form tag in order to make them accessible to people who use screen readers. Below, we have the entire HTML for a simple sign-up form with all the necessary components:

<div class="container p-5" id="bottom-form-area">
      <form name="contentForm" method="post" action="#" role="form">
        <div id="bottom-signup-form">
          <div class="row mt-1 d-md-flex align-items-end">
            <div class="form-group col-lg-3 px-md-2 pt-md-2 mt-lg-0 pb-2 position-relative">
              <label for="name">Name <span>*</span></label>
              <input name="formfields[name]" id="name" class="form-control border-top-1 border-left-1 border-right-1" placeholder="John Doe" type="text" value="" required="required" data-error="Please Enter a Username">
            </div><!-- form-group -->
            <div class="form-group col-lg-3 px-md-2 pt-md-2 mt-lg-0 pb-2 position-relative">
              <label for="email">Email <span>*</span></label>
              <input name="formfields[email]" class="form-control border-top-1 border-left-1 border-right-1" id="email" placeholder="you@example.com" type="email" value="" required="required" data-error="Please Enter an Email">
              <div class="position-absolute bottom-0 left-0 pl-2"></div>
            </div><!-- form-group -->
            <div class="form-group col-lg-3 px-md-2 pt-md-2 mt-lg-0 pb-2 position-relative">
              <label for="phone">Phone <span>*</span></label>
              <input type="phone" id="phone" placeholder="123-456-7890" name="password" required="required" class="form-control border-top-1 border-left-1 border-right-1" data-error="Please Enter a Phone Number">
              <div class="position-absolute bottom-0 left-0 pl-2"></div>
            </div><!-- form-group -->
            <div class="form-group col-lg-3 mt-lg-0 pb-2 text-center text-lg-left mt-4">
              <input type="submit" value="Contact LunarXP" class="btn btn-primary text-white w-250p">
            </div>
          </div>
        </div>
      </form>
     </div>

By using the 4 column grid, we lay the form fields in a horizontal way. Here's the output of our code:

Download from Github

Share on Facebook Tweet It

Paris Tuzun
Contributions Editor here at Solodev. Want to be featured on the Solodev Blog? Get in touch.
Follow me on Twitter

Sign up to explore

Create an account in seconds and start building today.

Sign up for Solodev

Terms Privacy Policy Contact