How to place two input-group side by side in boostrap form

user_12141266 0
Viewed 3668

I am trying to achieve a form layout where two form-group elements are side by side on a single line. I have tried styling with the following properties; display:inline, display:flex, etc however none of these have worked.

Here's a snippet of the form-group elements that I want to be side by side:

<div class="form-group">
    <label for="entercomments" class="col-sm-2 control-label">From Date</label>
    <div class="col-sm-10">
        <div class="input-group fromdate inline"  data-date-format="yyyy-mm-dd" style="width:250px">
            <input type="text" class="form-control fromdate"  placeholder="dd-mmm-yyyy" id="FromDate" runat="server" data-date-container="#formDiv" />
            <div class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></div>
        </div>
    </div>
</div>
<div class="form-group">
    <label for="entercomments" class="col-sm-2 control-label">To Date</label>
    <div class="col-sm-10">
        <div class="input-group todate inline" data-date-format="yyyy-mm-dd" style="width:250px">
            <input type="text" class="form-control todate" placeholder="dd-mmm-yyyy" id="ToDate" runat="server" data-date-container="#formDiv"  />
            <div class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></div>
        </div>
    </div>
</div>
twitter-bootstrap-3 bootstrap-4 twitter-bootstrap
4 Answers

Seeing that you're using Bootstrap, you could use bootstraps grid system here to achieve that required layout:

<div class="row">
  <div class="col">
    <div class="form-group">
      <!-- Existing form group markup -->
    </div>
  </div>
  <div class="col">
    <div class="form-group">
      <!-- Existing form group markup -->
    </div>
  </div>
</div>

The idea here is to enclose the "form-group" elements that you want to align on the same row, within a "column" (ie <div class="col">). Each column is then enclosed in a common "row" (ie <div class="row">) and, by default, this will cause each column to share half the width of the row.

user_85267050

use bootstrap4 form grid, check these 2 examples

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">


<form class="p-3">
  <div class="form-row">
    <div class="col">
      <input type="text" class="form-control" placeholder="First name">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="Last name">
    </div>
  </div>
</form>

<form class="p-3">
  <div class="form-row align-items-center">
    <div class="col-auto">
      <label class="sr-only" for="inlineFormInput">Name</label>
      <input type="text" class="form-control mb-2" id="inlineFormInput" placeholder="Jane Doe">
    </div>
    <div class="col-auto">
      <label class="sr-only" for="inlineFormInputGroup">Username</label>
      <div class="input-group mb-2">
        <div class="input-group-prepend">
          <div class="input-group-text">@</div>
        </div>
        <input type="text" class="form-control" id="inlineFormInputGroup" placeholder="Username">
      </div>
    </div>
    <div class="col-auto">
      <button type="submit" class="btn btn-primary mb-2">Submit</button>
    </div>
  </div>
</form>

user_37028860

you need to put both the inputs in separate columns of one row as given below :

<div class="row">
  <div class="col">
     <input type="text" class="form-control">
  </div>
  <div class="col">
     <input type="text" class="form-control">
  </div>
</div>
user_112756210

I think you need to make an area around two forms.

<div style="display: inline-flex">
  <div class="form-group">

  </div>
  <div class="form-group">

  </div>
</div>
user_117521050
Related