bootstrap align select with button and two input fields - html

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?

Answer 1

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>

Answer 2

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>

Answer 3

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>