How can we use Bootstrap to design a form with 3 input fields on one row, evenly spaced and occupying half the page's width?

Question

How can we use Bootstrap to design a form with 3 input fields on one row, evenly spaced and occupying half the page's width?

<div class="container">
      <div class="row">
        <form class="inline-form">
          <div class="inline-form">
            <input type="text" placeholder="Your name">
          </div>
          <div class="inline-form">
            <input type="text" placeholder="Email address">
          </div>
          <div class="inline-form">
            <input type="text" placeholder="Phone number">
          </div>
        </form>
      </div>
</div>

I am looking to create a layout with three form fields, all of them having the same width and evenly spaced on a row. The HTML code provided is within a div that has a class of .col-md-6, which should occupy half of the page's width.

html css forms input bootstrap-4

Answer 1

Answer №1

Check out this updated code:

<div class="container">
      <div class="row">
        <form class="form-inline">
          <div class="form-control">
            <input type="text" placeholder="Your name">
          </div>
          <div class="form-control">
            <input type="text" placeholder="Email address">
          </div>
          <div class="form-control">
            <input type="text" placeholder="Phone number">
          </div>
        </form>
      </div>
</div>

In this version, I made the following adjustments:

Changed the form class from "inline-form" to "form-inline"
Updated the div class from "inline-form" to "form-control"

I referred to the BS4 documentation for guidance: link

If you want to include .col-md-6, you can add it as a DIV tag before the container tag, like this:

<div class="cold-md-6">
    <div class="container">
        <div class="row">

            <form class="form-inline">

                <div class="form-control">
                    <input type="text" placeholder="Your name">
                </div>
                <div class="form-control">
                    <input type="text" placeholder="Email address">
                </div>
                <div class="form-control">
                    <input type="text" placeholder="Phone number">
                </div>

            </form>
        </div>
    </div>
</div>

[EDIT] Based on your initial code, I made some improvements to achieve your desired outcome.

Changes include:

Ensuring the form encompasses all input fields
Removing the container from the form tag (avoid nesting containers)
Adding col-4 to each form component
Including col-12 for the textarea

Answer 2

Check out this updated code:

<div class="container">
      <div class="row">
        <form class="form-inline">
          <div class="form-control">
            <input type="text" placeholder="Your name">
          </div>
          <div class="form-control">
            <input type="text" placeholder="Email address">
          </div>
          <div class="form-control">
            <input type="text" placeholder="Phone number">
          </div>
        </form>
      </div>
</div>

In this version, I made the following adjustments:

Changed the form class from "inline-form" to "form-inline"
Updated the div class from "inline-form" to "form-control"

I referred to the BS4 documentation for guidance: link

If you want to include .col-md-6, you can add it as a DIV tag before the container tag, like this:

<div class="cold-md-6">
    <div class="container">
        <div class="row">

            <form class="form-inline">

                <div class="form-control">
                    <input type="text" placeholder="Your name">
                </div>
                <div class="form-control">
                    <input type="text" placeholder="Email address">
                </div>
                <div class="form-control">
                    <input type="text" placeholder="Phone number">
                </div>

            </form>
        </div>
    </div>
</div>

[EDIT] Based on your initial code, I made some improvements to achieve your desired outcome.

Changes include:

Ensuring the form encompasses all input fields
Removing the container from the form tag (avoid nesting containers)
Adding col-4 to each form component
Including col-12 for the textarea

Answer 3

Answer №2

To make the form display horizontally, you can change the class to "d-flex flex-row".

Alternatively, you can group the input elements within a div container:

<div class="container d-flex mx-auto">
      <div class=" row">
        <form class="form-group">
          <div class="d-flex flex-row mb-4">
            <div class="form-control mr-3">
              <input type="text" placeholder="Your name">
            </div>
            <div class="form-control mr-3">
              <input type="text" placeholder="Email address">
            </div>
            <div class="form-control mr-3">
              <input type="text" placeholder="Phone number">
            </div>
          </div>
          <textarea class="form-control"></textarea>
        </form>
      </div>
</div>

Answer 4

To make the form display horizontally, you can change the class to "d-flex flex-row".

Alternatively, you can group the input elements within a div container:

<div class="container d-flex mx-auto">
      <div class=" row">
        <form class="form-group">
          <div class="d-flex flex-row mb-4">
            <div class="form-control mr-3">
              <input type="text" placeholder="Your name">
            </div>
            <div class="form-control mr-3">
              <input type="text" placeholder="Email address">
            </div>
            <div class="form-control mr-3">
              <input type="text" placeholder="Phone number">
            </div>
          </div>
          <textarea class="form-control"></textarea>
        </form>
      </div>
</div>

How can we use Bootstrap to design a form with 3 input fields on one row, evenly spaced and occupying half the page's width?

Answer №1

Answer №2

Similar questions

How can I give an HTML form input button the appearance of glowing or lighting up like the default OS style?

Getting rid of the excess space at the bottom of a Bootstrap card - tips and tricks!

Maintain the color of a Bootstrap 4 dropdown link even when it is open by incorporating hover

Scrolling vertically using window.open functionality

Problem encountered with HTML table formatting

Photo positioned on top of the form with Bootstrap 5

What is the best way to center two items within a border?

The external hyperlink is not functional in Firefox and Chrome browsers, but it operates properly in Internet Explorer 9

I created an image that can be clicked on, but unfortunately it only functions properly on the

Reveal and conceal grid elements upon clicking embedded links

Get notified about the number of cells you've selected by simply dragging on a table

posting data and redirecting fails when using an ajax button

Different ways to trigger code behind method with onclick excluding asp:button OnClick

jQuery show/hide functionality allows you to toggle the visibility of elements

Increasing the height of nested Bootstrap columns by stretching them out

Issues with $.post function causing HTML to be displayed instead of the intended value

What methods can we use to transform Bootstrap rows and columns to resemble a table design?

Determine the Height of the Container once the Font File has Finished Loading

Submitting the form may cause disruptions for others

Placing a JavaScript button directly below the content it interacts with