bootstrap align select with button and two input fields

Question

I have this HTML bootstrap form.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <form method="POST" action="reportGenerator.php" class="form-inline">
      <div class="input-group">
        <input type="text" id="From" class="form-control" name="From" placeholder="Date From">
        <input type="text" id="To" class="form-control" name="To" placeholder="Date To">
        <select name="Target" class="form-control" type="button" id="Target" data-toggle="dropdown">
          <OPTION>Sale</OPTION>
          <OPTION>Purchase</OPTION>
        </select>
        <span class="input-group-btn">
          <input class="btn btn-default" type="submit" value="Generate Report" />
        </span>
      </div>
    </form>
  </div>
</div>

The output is a little bit weird, I have it like

But what I'm trying to do is set all of them into one row exactly. Are there any bootstrap classes that can do this?

The Bootstrap documentation is very good: getbootstrap.com/css/#forms-inline — Turnip
– Turnip, Commented Nov 25, 2016 at 14:19

vanburen · Accepted Answer · 2016-11-26 05:51:28Z

Are there any Bootstrap Classes that can do this?

Not exactly and definitely not with an input-group/button class since they only support a single input.

You can use columns and remove the padding applied to them in order to have each input/button in a single row with no space between them. The vast majority of the CSS is cosmetic (without function) simply to show a uniform set of controls. These can be adjusted however you see fit obviously.

**The example allows the columns to collapse @ 767px for improved mobile use. If this isn't desirable you can easily change the column setup to whatever makes sense.

Working Example: Use FullPage view.

.form {
  margin: 20px;
}
.no-gutter > [class*='col-'] {
  padding-right: 0;
  padding-left: 0;
}
.form .form-control.new-form-control,
.form button {
  border-radius: 0;
}
.form .form-control.new-form-control:focus {
  border-color: #66afe9;
  outline: 0;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6)
}
@media (min-width: 768px) {
  .form .form-control.new-form-control {
    border-right: 1px solid transparent;
  }
  .form button {
    height: 34px;
  }
}
@media (max-width: 767px) {
  .form .form-control.new-form-control {
    border-bottom: 1px solid transparent;
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">

  <form class="form">
    <div class="row no-gutter">

      <div class="col-xs-12 col-sm-3">
        <input type="text" id="From" class="form-control new-form-control" name="From" placeholder="Date From">
      </div>

      <div class="col-xs-12 col-sm-3">
        <input type="text" id="To" class="form-control new-form-control" name="To" placeholder="Date To">
      </div>

      <div class="col-xs-12 col-sm-3">
        <select id="Target" class="form-control new-form-control" name="Target">
          <option value="">Select 1 Option</option>
          <option value="Sale">Sale</option>
          <option value="Purchase">Purchase</option>
        </select>
      </div>

      <div class="col-xs-12 col-sm-3">
        <button type="submit" class="btn btn-default btn-block">
          Generate Report
        </button>
      </div>

    </div>
  </form>

</div>

NiTHiN RaJ · Accepted Answer · 2016-11-26 06:13:56Z

Simply use this code in place of your code .. In bootstrap there are class called Col-lg-n,col-md-n.. this will divide the screen into some column n .max n value is 12.. below is the code

<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" >
<div class="container">
    <div class="row">
        <form method="POST" action="reportGenerator.php" class="form-inline">
            <div class="input-group">
                <div class="col-lg-3 col-md-3">
                    <input type="text" id="From" class="form-control" name="From" placeholder="Date From">
                </div>
                <div  class="col-lg-3 col-md-3">
                    <input type="text" id="To" class="form-control" name="To" placeholder="Date To">
                </div>
                <div class="col-lg-3 col-md-3">
                    <select name="Target" class="form-control" type="button" id="Target" data-toggle="dropdown">
                        <OPTION>Sale</OPTION>
                        <OPTION>Purchase</OPTION>
                    </select>
                </div>

                <div class="col-lg-3 col-md-3">
                    <span class="input-group-btn">
                        <input class="btn btn-default" type="submit" value="Generate Report" />
                    </span>
                </div>

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

user7208198 · Accepted Answer · 2016-11-25 14:19:12Z

If you are using a laptop then you should consider adding the col-md-[enter number from 1 to 12] to your forms. Code

<html lang="en">
    <head>
        <title>Test</title>
        <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    </head>
    <body>
        <div class="container">
                    <form method="POST" action="reportGenerator.php" class="form-inline">
                        <div class="input-group">
                            <div class="row">
                                <div class="col-md-3">
                                  <input type="text" id="From" class="form-control" name="From" placeholder="Date From">
                                </div>
                                <div class="col-md-3">
                                <input type="text" id="To" class="form-control" name="To" placeholder="Date To">
                                </div>
                                <div class="col-md-3">
                                  <select name="Target"       class="form-control" type="button" id="Target" data-toggle="dropdown">
                                        <OPTION>Sale</OPTION>
                                        <OPTION>Purchase</OPTION>
                                    </select>
                                </div>
                                <div class="col-md-3">
                                    <span class="input-group-btn">
                                    <input class="btn btn-default" type="submit" value="Generate Report" 
                                    </select>
                                </div>
                            </div>
                            </span>
                        </div>
                    </form>
                </div>
            </div>
    </body>
</html>

Collectives™ on Stack Overflow

bootstrap align select with button and two input fields

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related