CODEWITHSUNDEEP
htmltwitter-bootstrapcss
Ron
Ron

Reputation: 399

Aligning a textarea besides several vertically aligned input elements

As shown in the image below, I would like to align a text area besides the vertically aligned several input elements. I am using bootstrap grid to achieve the required effect. Currently, when I use "form-horizontal", all the items stack up in a single column, hence, the textarea lies under the phone input element.

I want it to be responsive. If I use margin property on the text area, then the inputs overlap each other and so, makes the UI look messy. It would be great if I could get your help.

Desired layout:
Form design

Current layout: enter image description here

<div class="container">
    <form class="form-horizontal" role="form">
      <div class="form-group">
         <div class="col-sm-10 col-md-2 col-lg-2 col-lg-offset-0">
          <input type="text" class="form-control" id="name" placeholder="NAME">
         </div>
      </div>
      <div class="form-group">
        <div class="col-sm-10 col-md-2 col-lg-2 col-lg-offset-0">
          <input type="email" class="form-control" id="email" placeholder="E-MAIL">
        </div>
      </div>
      <div class="form-group">
        <div class="col-sm-10 col-md-2 col-lg-2 col-lg-offset-0"> 
          <input type="tel" class="form-control" id="tel" placeholder="PHONE">
        </div>
      </div>
      <div class="form-group">
        <div class="col-sm-10 col-md-6 col-lg-6 col-lg-offset-0">
            <textarea class="form-control message" rows="6" id="comment" placeholder="MESSAGE"></textarea>
        </div>
      </div>          
    </form>
</div>

Upvotes: 3

Views: 920

Answers (1)

vanburen
vanburen

Reputation: 21663

You can do this by nesting columns. Create two columns (equal to 12 columns), then place another row inside each along with your columns that contain the form inputs. I imagine you want your input to use the entire space available so set the nested columns to col-*-12 so they utilize the entire parent columns width.

Working Example: Open at FullPage

form {
  background: #f2f2f2;
  padding: 20px 20px 5px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <form>
    <div class="row">

      <div class="col-sm-6">
        <div class="row">
          <div class="col-sm-12">
            <div class="form-group">
              <input type="text" class="form-control" id="name" placeholder="NAME">
            </div>
          </div>
          <div class="col-sm-12">
            <div class="form-group">
              <input type="email" class="form-control" id="email" placeholder="E-MAIL">
            </div>
          </div>
          <div class="col-sm-12">
            <div class="form-group">
              <input type="tel" class="form-control" id="tel" placeholder="PHONE">
            </div>
          </div>
        </div>
      </div>

      <div class="col-sm-6">
        <div class="row">
          <div class="col-sm-12">
            <div class="form-group">
              <textarea class="form-control message" rows="6" id="comment" placeholder="MESSAGE"></textarea>
            </div>
          </div>
        </div>
      </div>

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

Upvotes: 4

Related Questions