CODEWITHSUNDEEP
formstwitter-bootstrap-3
TSkagen
TSkagen

Reputation: 67

Align button with input using twitter bootstrap 3

I would like to align the select button (Language) with the datetimepicker input. I would like to keep the overall look and functionallity of "form-horizontal". I have tried to place an inline form within the horizontal form but to no avail. 

    <form class="form-horizontal" id="postForm" action="/news/add" method="POST" enctype="multipart/form-data" onsubmit="return postForm()">

  <div class="form-group">
    <label for="inputTitle" class="col-sm-2 control-label">Title</label>
    <div class="col-sm-6">
      <input type="text" class="form-control" id="inputTitle" name="title" placeholder="Title">
    </div>
  </div>

  <div class="form-group">
    <label for="datetimepicker" class="col-sm-2 control-label">Publish Date</label>
    <div class='input-group date col-sm-3'  id='datetimepicker'>
    <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
      <input id="publishDate" type='text' class="form-control" name="time" />  
    </div>

    <div class="btn-group">
      <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
        Language <span class="caret"></span>
      </button>
      <ul class="dropdown-menu" role="menu">
        <li><a href="#">English</a></li>
        <li><a href="#">French</a></li>
      </ul>
    </div>
  </div>

  <div class="form-group">
    <legend>Create Content</legend>
    <textarea class="input-block-level" id="summernote" name="content" rows="18"></textarea>
  </div>

  <button type="submit" class="btn btn-primary">Save changes</button>
  <button type="button" id="cancel" class="btn">Cancel</button>
  <button type="reset" class="btn btn-danger" >Reset</button>
</form>

Upvotes: 0

Views: 730

Answers (1)

jme11
jme11

Reputation: 17374

You need to wrap your input-group in the col-sm-3, instead of tacking the col class onto the input-group. Then you can wrap your btn-group in its own col class. The added benefit is this is going to also fix the alignment issue between the title and date picker inputs.

<form class="form-horizontal" id="postForm" action="/news/add" method="POST" enctype="multipart/form-data" onsubmit="return postForm()">

    <div class="form-group">
        <label for="inputTitle" class="col-sm-2 control-label">Title</label>
        <div class="col-sm-6">
          <input type="text" class="form-control" id="inputTitle" name="title" placeholder="Title">
        </div>
    </div>

    <div class="form-group">
        <label for="datetimepicker" class="col-sm-2 control-label">Publish Date</label>
        <div class="col-sm-3">
            <div class="input-group date"  id="datetimepicker">
                <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
                  <input id="publishDate" type='text' class="form-control" name="time" />  
            </div>
        </div>
        <div class="col-sm-3">
            <div class="btn-group">
              <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                Language <span class="caret"></span>
              </button>
              <ul class="dropdown-menu" role="menu">
                <li><a href="#">English</a></li>
                <li><a href="#">French</a></li>
              </ul>
            </div>
        </div>
    </div>

    <div class="form-group">
        <legend>Create Content</legend>
        <textarea class="input-block-level" id="summernote" name="content" rows="18"></textarea>
    </div>

    <button type="submit" class="btn btn-primary">Save changes</button>
    <button type="button" id="cancel" class="btn">Cancel</button>
    <button type="reset" class="btn btn-danger" >Reset</button>
</form>

Upvotes: 1

Related Questions