Input field is not aligning correctly - html

I have a form inside which I am having input and dropdown of Bootstrap 4.
I have several input field and their labels, but at one place I want to replace label with input field, but the input field below and the one I am putting are colliding with each other. I want to have space between them.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<div class="container">
<div class="form-row">
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-4">
<label for="categoryCode">Uber Eats</label>
<div class="input-group">
<input type="text" class="form-control" aria-label="Text input with dropdown button">
<div class="input-group-append">
<button class="btn btn-outline-secondary " type="button" aria-haspopup="true" aria-expanded="false"></button>
</div>
</div>
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-4">
<label for="subCategoryCode">ABCD1</label>
<div class="input-group">
<input type="text" class="form-control" aria-label="Text input with dropdown button">
<div class="input-group-append">
<button class="btn btn-outline-secondary " type="button" aria-haspopup="true" aria-expanded="false"></button>
</div>
</div>
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-4">
<label for="subCategoryCode">ABCD</label>
<div class="input-group">
<input type="text" class="form-control" aria-label="Text input with dropdown button">
<div class="input-group-append">
<button class="btn btn-outline-secondary " type="button" aria-haspopup="true" aria-expanded="false"></button>
</div>
</div>
</div>
</div>
<div class="form-row">
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-4">
<div class="input-group">
<input type="text" class="form-control" aria-label="Text input with dropdown button">
<div class="input-group-append">
<button class="btn btn-outline-secondary " type="button" aria-haspopup="true" aria-expanded="false"></button>
</div>
</div>
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-4">
<div class="input-group">
<input type="text" class="form-control" aria-label="Text input with dropdown button">
<div class="input-group-append">
<button class="btn btn-outline-secondary " type="button" aria-haspopup="true" aria-expanded="false"></button>
</div>
</div>
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-4">
<div class="input-group">
<input type="text" class="form-control" aria-label="Text input with dropdown button">
<div class="input-group-append">
<button class="btn btn-outline-secondary " type="button" aria-haspopup="true" aria-expanded="false"></button>
</div>
</div>
</div>
</div>
<div class="form-row">
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-4">
<div class="input-group">
<input type="text" class="form-control" aria-label="Text input with dropdown button">
<div class="input-group-append">
<button class="btn btn-outline-secondary " type="button" aria-haspopup="true" aria-expanded="false"></button>
</div>
</div>
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-4">
<div class="input-group">
<input type="text" class="form-control" aria-label="Text input with dropdown button">
<div class="input-group-append">
<button class="btn btn-outline-secondary " type="button" aria-haspopup="true" aria-expanded="false"></button>
</div>
</div>
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-4">
<div class="input-group">
<input type="text" class="form-control" aria-label="Text input with dropdown button">
<div class="input-group-append">
<button class="btn btn-outline-secondary " type="button" aria-haspopup="true" aria-expanded="false"></button>
</div>
</div>
</div>
</div>
<div class="form-row">
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-4">
<div class="input-group">
<input type="text" class="form-control" aria-label="Text input with dropdown button">
<div class="input-group-append">
<button class="btn btn-outline-secondary " type="button" aria-haspopup="true" aria-expanded="false"></button>
</div>
</div>
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-4">
<div class="input-group">
<input type="text" class="form-control" aria-label="Text input with dropdown button">
<div class="input-group-append">
<button class="btn btn-outline-secondary " type="button" aria-haspopup="true" aria-expanded="false"></button>
</div>
</div>
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-4">
<div class="input-group">
<input type="text" class="form-control" aria-label="Text input with dropdown button">
<div class="input-group-append">
<button class="btn btn-outline-secondary " type="button" aria-haspopup="true" aria-expanded="false"></button>
</div>
</div>
</div>
</div>
<div class="form-row">
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-4">
<div class="input-group">
<input type="text" class="form-control" aria-label="Text input with dropdown button">
<div class="input-group-append">
<button class="btn btn-outline-secondary " type="button" aria-haspopup="true" aria-expanded="false"></button>
</div>
</div>
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-4">
<div class="input-group">
<input type="text" class="form-control" aria-label="Text input with dropdown button">
<div class="input-group-append">
<button class="btn btn-outline-secondary " type="button" aria-haspopup="true" aria-expanded="false"></button>
</div>
</div>
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-4">
<div class="input-group">
<input type="text" class="form-control" aria-label="Text input with dropdown button">
<div class="input-group-append">
<button class="btn btn-outline-secondary " type="button" aria-haspopup="true" aria-expanded="false"></button>
</div>
</div>
</div>
</div>
</div>
At the place of ABCD1 I want an input field, which should be separate from the one below.
What I am doing is at place of label for ABCD1 , I am putting this: `
<div class="input-group">
<input type="text" class="form-control" aria-label="Text input with dropdown button">
<div class="input-group-append">
<button class="btn btn-outline-secondary " type="button" aria-haspopup="true" aria-expanded="false"></button>
</div>
</div>`
but output is not what I am expecting
There must be some space between them and should be aligned in the row of other label which are Uber eats and ABCD


added margin bootstrap classes to achieve it
https://codepen.io/Xenio/pen/daKPNa777
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<div class="container">
<div class="form-row">
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-4">
<label for="categoryCode">Uber Eats</label>
<div class="input-group mt-3">
<input type="text" class="form-control" aria-label="Text input with dropdown button">
<div class="input-group-append">
<button class="btn btn-outline-secondary " type="button" aria-haspopup="true" aria-expanded="false"></button>
</div>
</div>
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-4">
<div class="input-group mb-2">
<input type="text" class="form-control" aria-label="Text input with dropdown button">
<div class="input-group-append">
<button class="btn btn-outline-secondary " type="button" aria-haspopup="true" aria-expanded="false"></button>
</div>
</div>
<div class="input-group">
<input type="text" class="form-control" aria-label="Text input with dropdown button">
<div class="input-group-append">
<button class="btn btn-outline-secondary " type="button" aria-haspopup="true" aria-expanded="false"></button>
</div>
</div>
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-4">
<label for="subCategoryCode">ABCD</label>
<div class="input-group mt-3">
<input type="text" class="form-control" aria-label="Text input with dropdown button">
<div class="input-group-append">
<button class="btn btn-outline-secondary " type="button" aria-haspopup="true" aria-expanded="false"></button>
</div>
</div>
</div>
</div>
<div class="form-row">
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-4">
<div class="input-group">
<input type="text" class="form-control" aria-label="Text input with dropdown button">
<div class="input-group-append">
<button class="btn btn-outline-secondary " type="button" aria-haspopup="true" aria-expanded="false"></button>
</div>
</div>
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-4">
<div class="input-group">
<input type="text" class="form-control" aria-label="Text input with dropdown button">
<div class="input-group-append">
<button class="btn btn-outline-secondary " type="button" aria-haspopup="true" aria-expanded="false"></button>
</div>
</div>
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-4">
<div class="input-group">
<input type="text" class="form-control" aria-label="Text input with dropdown button">
<div class="input-group-append">
<button class="btn btn-outline-secondary " type="button" aria-haspopup="true" aria-expanded="false"></button>
</div>
</div>
</div>
</div>
<div class="form-row">
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-4">
<div class="input-group">
<input type="text" class="form-control" aria-label="Text input with dropdown button">
<div class="input-group-append">
<button class="btn btn-outline-secondary " type="button" aria-haspopup="true" aria-expanded="false"></button>
</div>
</div>
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-4">
<div class="input-group">
<input type="text" class="form-control" aria-label="Text input with dropdown button">
<div class="input-group-append">
<button class="btn btn-outline-secondary " type="button" aria-haspopup="true" aria-expanded="false"></button>
</div>
</div>
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-4">
<div class="input-group">
<input type="text" class="form-control" aria-label="Text input with dropdown button">
<div class="input-group-append">
<button class="btn btn-outline-secondary " type="button" aria-haspopup="true" aria-expanded="false"></button>
</div>
</div>
</div>
</div>
<div class="form-row">
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-4">
<div class="input-group">
<input type="text" class="form-control" aria-label="Text input with dropdown button">
<div class="input-group-append">
<button class="btn btn-outline-secondary " type="button" aria-haspopup="true" aria-expanded="false"></button>
</div>
</div>
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-4">
<div class="input-group">
<input type="text" class="form-control" aria-label="Text input with dropdown button">
<div class="input-group-append">
<button class="btn btn-outline-secondary " type="button" aria-haspopup="true" aria-expanded="false"></button>
</div>
</div>
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-4">
<div class="input-group">
<input type="text" class="form-control" aria-label="Text input with dropdown button">
<div class="input-group-append">
<button class="btn btn-outline-secondary " type="button" aria-haspopup="true" aria-expanded="false"></button>
</div>
</div>
</div>
</div>
<div class="form-row">
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-4">
<div class="input-group">
<input type="text" class="form-control" aria-label="Text input with dropdown button">
<div class="input-group-append">
<button class="btn btn-outline-secondary " type="button" aria-haspopup="true" aria-expanded="false"></button>
</div>
</div>
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-4">
<div class="input-group">
<input type="text" class="form-control" aria-label="Text input with dropdown button">
<div class="input-group-append">
<button class="btn btn-outline-secondary " type="button" aria-haspopup="true" aria-expanded="false"></button>
</div>
</div>
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-4">
<div class="input-group">
<input type="text" class="form-control" aria-label="Text input with dropdown button">
<div class="input-group-append">
<button class="btn btn-outline-secondary " type="button" aria-haspopup="true" aria-expanded="false"></button>
</div>
</div>
</div>
</div>
</div>


Dis-alignment occurred previously because you have taken the first label row and
first input group row into just one "Form Row".
Just separate them into different Form Rows and everything back to as expected.
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<!-- Added separate form row for first row which includes labels and one new group -->
<div class="form-row">
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-4">
<label for="categoryCode">Uber Eats</label>
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-4">
<div class="input-group">
<input type="text" class="form-control" aria-label="Text input with dropdown button">
<div class="input-group-append">
<button class="btn btn-outline-secondary " type="button" aria-haspopup="true" aria-expanded="false"></button>
</div>
</div>
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-4">
<label for="categoryCode">Uber Eats</label>
</div>
</div>
<!-- Separated the input groups -->
<div class="form-row">
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-4">
<div class="input-group">
<input type="text" class="form-control" aria-label="Text input with dropdown button">
<div class="input-group-append">
<button class="btn btn-outline-secondary " type="button" aria-haspopup="true" aria-expanded="false"></button>
</div>
</div>
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-4">
<div class="input-group">
<input type="text" class="form-control" aria-label="Text input with dropdown button">
<div class="input-group-append">
<button class="btn btn-outline-secondary " type="button" aria-haspopup="true" aria-expanded="false"></button>
</div>
</div>
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-4">
<div class="input-group">
<input type="text" class="form-control" aria-label="Text input with dropdown button">
<div class="input-group-append">
<button class="btn btn-outline-secondary " type="button" aria-haspopup="true" aria-expanded="false"></button>
</div>
</div>
</div>
</div>
<div class="form-row">
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-4">
<div class="input-group">
<input type="text" class="form-control" aria-label="Text input with dropdown button">
<div class="input-group-append">
<button class="btn btn-outline-secondary " type="button" aria-haspopup="true" aria-expanded="false"></button>
</div>
</div>
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-4">
<div class="input-group">
<input type="text" class="form-control" aria-label="Text input with dropdown button">
<div class="input-group-append">
<button class="btn btn-outline-secondary " type="button" aria-haspopup="true" aria-expanded="false"></button>
</div>
</div>
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-4">
<div class="input-group">
<input type="text" class="form-control" aria-label="Text input with dropdown button">
<div class="input-group-append">
<button class="btn btn-outline-secondary " type="button" aria-haspopup="true" aria-expanded="false"></button>
</div>
</div>
</div>
</div>
<div class="form-row">
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-4">
<div class="input-group">
<input type="text" class="form-control" aria-label="Text input with dropdown button">
<div class="input-group-append">
<button class="btn btn-outline-secondary " type="button" aria-haspopup="true" aria-expanded="false"></button>
</div>
</div>
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-4">
<div class="input-group">
<input type="text" class="form-control" aria-label="Text input with dropdown button">
<div class="input-group-append">
<button class="btn btn-outline-secondary " type="button" aria-haspopup="true" aria-expanded="false"></button>
</div>
</div>
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-4">
<div class="input-group">
<input type="text" class="form-control" aria-label="Text input with dropdown button">
<div class="input-group-append">
<button class="btn btn-outline-secondary " type="button" aria-haspopup="true" aria-expanded="false"></button>
</div>
</div>
</div>
</div>
<div class="form-row">
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-4">
<div class="input-group">
<input type="text" class="form-control" aria-label="Text input with dropdown button">
<div class="input-group-append">
<button class="btn btn-outline-secondary " type="button" aria-haspopup="true" aria-expanded="false"></button>
</div>
</div>
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-4">
<div class="input-group">
<input type="text" class="form-control" aria-label="Text input with dropdown button">
<div class="input-group-append">
<button class="btn btn-outline-secondary " type="button" aria-haspopup="true" aria-expanded="false"></button>
</div>
</div>
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-4">
<div class="input-group">
<input type="text" class="form-control" aria-label="Text input with dropdown button">
<div class="input-group-append">
<button class="btn btn-outline-secondary " type="button" aria-haspopup="true" aria-expanded="false"></button>
</div>
</div>
</div>
</div>
<div class="form-row">
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-4">
<div class="input-group">
<input type="text" class="form-control" aria-label="Text input with dropdown button">
<div class="input-group-append">
<button class="btn btn-outline-secondary " type="button" aria-haspopup="true" aria-expanded="false"></button>
</div>
</div>
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-4">
<div class="input-group">
<input type="text" class="form-control" aria-label="Text input with dropdown button">
<div class="input-group-append">
<button class="btn btn-outline-secondary " type="button" aria-haspopup="true" aria-expanded="false"></button>
</div>
</div>
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-4">
<div class="input-group">
<input type="text" class="form-control" aria-label="Text input with dropdown button">
<div class="input-group-append">
<button class="btn btn-outline-secondary " type="button" aria-haspopup="true" aria-expanded="false"></button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

Related

Bootstrap remove space on left of button

For some reason, my first button has a space before it and I can't get rid of it.
<div class="container">
<div class="row">
<div class="col-xs-4 col-md-3">
<button #onclick="ShowModal" class="btn btn-primary"><i class="oi oi-plus"></i>New Member</button>
</div>
<div class="col-xs-4 col-md-3" style="margin:auto">
<button #onclick="#RefreshData" class="btn btn-primary"><i class="oi oi-loop-circular"></i> Refresh Data</button>
</div>
<div class="input-group col-xs-4 col-md-4 offset-md-5">
<input type="text" class="form-control" placeholder="Search Members" #bind="#searchTerm" />
<div class="input-group-append">
<button #onclick="#SearchMember" class="btn btn-primary"><i class="oi oi-magnifying-glass"></i></button>
</div>
</div>
</div>
This how it looks
This forces the search to go on the next row. How can I fix this?

It's a problem with margins; just make sure you get rid of the left margin. If you're ever in doubt about what a space is, take a peek at the element in dev tools and it'll normally help you out.
div.container {
margin-left: 0px
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-xs-4 col-md-3">
<button #onclick="ShowModal" class="btn btn-primary"><i class="oi oi-plus"></i>New Member</button>
</div>
<div class="col-xs-4 col-md-3" style="margin:auto">
<button #onclick="#RefreshData" class="btn btn-primary"><i class="oi oi-loop-circular"></i> Refresh Data</button>
</div>
<div class="input-group col-xs-4 col-md-4 offset-md-5">
<input type="text" class="form-control" placeholder="Search Members" #bind="#searchTerm" />
<div class="input-group-append">
<button #onclick="#SearchMember" class="btn btn-primary"><i class="oi oi-magnifying-glass"></i></button>
</div>
</div>
</div>

Remove space between textboxes and buttons

My code is as follows: I want to remove the spaces between the textboxes and button, so all 3 elements are stuck to one another. How can I get this done.
<div class="container">
<div class="row">
<div class="panel panel-default col-md-12 ">
<div class="panel-body">
<form action="#" role="form" class="form-inline">
<div class="form-group col-md-4 ">
<input type="email" class="form-control " placeholder="Email Address" required>
</div>
<div class=" form-group col-md-4 span7 ">
<input type="email" class="form-control " placeholder="Email Address" required>
</div>
<div class=" form-group col-md-4">
<button class="btn btn-primary btn-circle " type="submit">Sign up for free</button>
</div>
</form>
</div>
</div>
</div>
</div>
Output

Try this code it will stuck all the elements together.
I just removed the form-group class.
<div class="container">
<div class="row">
<div class="panel panel-default col-md-12 ">
<div class="panel-body">
<form action="#" role="form" class="form-inline">
<div class=" col-md-4 ">
<input type="email" class="form-control " placeholder="Email Address" required>
</div>
<div class=" col-md-4 span7 ">
<input type="email" class="form-control " placeholder="Email Address" required>
</div>
<div class=" col-md-4">
<button class="btn btn-primary btn-circle " type="submit">Sign up for free</button>
</div>
</form>
</div>
</div>
</div>
</div>

How can I get these two divs to align in a row horizontally and keep the form-group intact?

How can I get these two divs to align in a row horizontally and keep the form-group intact?
No matter what kind of col-ms-sizing I do the two input groups will not align on the same line and I believe this is only happening because of the form-group class.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="container-fluid" ng-controller="PriceController as formCtrl">
<form class="form-horizontal" role="form" ng-submit="processForm()">
<div class="form-group">
<label for="inputPrice" class="col-sm-1 control-label">Price</label>
<div class="col-sm-5 input-group"> <span class="input-group-addon">$</span>
<input type="text" class="form-control" id="inputPrice" name="inputPrice"> <span class="input-group-addon">.95</span>
</div>
<label for="inputDate" class="col-sm-1 control-label">Date</label>
<div class="col-sm-5 input-group">
<input type="text" class="form-control" id="inputDate" name="inputDate" placeholder="Date">
<div class="input-group input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Date <span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right" role="menu">
<li>Today
</li>
<li>Tomorrow
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>

Make sure you wrap your inputs with a <div class="row"> and then make separate divs for the col-sm-* classes. I replaced col-sm-* with col-xs-* to ensure the snippet would not wrap.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="container-fluid" ng-controller="PriceController as formCtrl">
<form class="form-horizontal" role="form" ng-submit="processForm()">
<div class="form-group">
<div class="row">
<div class="col-xs-1">
<label for="inputPrice" class="control-label">Price</label>
</div>
<div class="col-xs-5">
<div class="input-group"> <span class="input-group-addon">$</span>
<input type="text" class="form-control" id="inputPrice" name="inputPrice"> <span class="input-group-addon">.95</span>
</div>
</div>
<div class="col-xs-1">
<label for="inputDate" class="control-label">Date</label>
</div>
<div class="col-xs-5">
<div class="input-group">
<input type="text" class="form-control" id="inputDate" name="inputDate" placeholder="Date">
<div class="input-group input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Date <span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right" role="menu">
<li>Today
</li>
<li>Tomorrow
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</div>

You just have to wrap your inputs inside of col elements basically just nested columns. Make sure you are also using the correct sized columns for the correct screen sizes.
http://jsfiddle.net/kwd9cqn9/1/
<div class="container">
<div class="container-fluid">
<form class="form-horizontal">
<div class="form-group">
<div class="col-lg-6 col-sm-6 col-xs-6">
<label for="inputPrice" class="col-sm-1 control-label">Price</label>
<div class="col-lg-12 input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control" id="inputPrice" name="inputPrice" />
<span class="input-group-addon">.95</span>
</div>
</div>
<div class="col-lg-6 col-sm-6 col-xs-6">
<label for="inputDate" class="col-sm-1 control-label">Date</label>
<div class="col-lg-12 input-group">
<input type="text" class="form-control" id="inputDate" name="inputDate" placeholder="Date" />
<div class="input-group input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Date <span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right" role="menu">
<li>Today</li>
<li>Tomorrow</li>
</ul>
</div>
</div>
</div>
</div>
</form>
</div>

Bootstrap 3 - Panels next to each other causes weird top margin

I have 3 panels with the same width but sometimes not the same height next to each other. When the heights are the same, the panels so line up correctly and there is no weird top margin.
However, when the height differs, some panels get dragged down and start lining up with the panel body? The panel bodies are also not always the same height
My HTML structure looks like this:
<div class="wrapper" data-reactid=".0.1">
<div class="col-sm-4 list" data-reactid=".0.1.0">
<div class="panel panel-default" data-reactid=".0.1.0.0">
<div class="panel-heading clearfix" data-reactid=".0.1.0.0.0">
<h4 class="panel-title pull-left" data-reactid=".0.1.0.0.0.0">Melodic House</h4>
<button type="button" class="btn btn-default btn-sm pull-right" data-reactid=".0.1.0.0.0.1"><span class="glyphicon glyphicon-remove" aria-hidden="true" data-reactid=".0.1.0.0.0.1.0"></span></button><button type="button" class="btn btn-default btn-sm pull-right" data-reactid=".0.1.0.0.0.2"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true" data-reactid=".0.1.0.0.0.2.0"></span></button>
</div>
<ul class="list-group" data-reactid=".0.1.0.0.2">
...
</ul>
</div>
</div>
<div class="col-sm-4 list" data-reactid=".0.1.1">
<div class="panel panel-default" data-reactid=".0.1.1.0">
<div class="panel-heading clearfix" data-reactid=".0.1.1.0.0">
<h4 class="panel-title pull-left" data-reactid=".0.1.1.0.0.0">Deep House</h4>
<button type="button" class="btn btn-default btn-sm pull-right" data-reactid=".0.1.1.0.0.1"><span class="glyphicon glyphicon-remove" aria-hidden="true" data-reactid=".0.1.1.0.0.1.0"></span></button><button type="button" class="btn btn-default btn-sm pull-right" data-reactid=".0.1.1.0.0.2"><span class="glyphicon glyphicon-chevron-down" aria-hidden="true" data-reactid=".0.1.1.0.0.2.0"></span></button>
</div>
<div class="panel-body" data-reactid=".0.1.1.0.1">
<form class="form-horizontal" data-reactid=".0.1.1.0.1.0">
<div class="form-group" data-reactid=".0.1.1.0.1.0.0">
<label class="col-sm-6 control-label" data-reactid=".0.1.1.0.1.0.0.0">Min Duration (minutes)</label>
<div class="col-sm-6" data-reactid=".0.1.1.0.1.0.0.1"><input type="number" class="form-control" id="minDuration" value="0" data-reactid=".0.1.1.0.1.0.0.1.0"></div>
</div>
<div class="form-group" data-reactid=".0.1.1.0.1.0.1">
<label class="col-sm-6 control-label" data-reactid=".0.1.1.0.1.0.1.0">Max Duration (minutes)</label>
<div class="col-sm-6" data-reactid=".0.1.1.0.1.0.1.1"><input type="number" class="form-control" id="maxDuration" value="120" data-reactid=".0.1.1.0.1.0.1.1.0"></div>
</div>
<div class="form-group" data-reactid=".0.1.1.0.1.0.2">
<label class="col-sm-6 control-label" data-reactid=".0.1.1.0.1.0.2.0">Days old</label>
<div class="col-sm-6" data-reactid=".0.1.1.0.1.0.2.1"><input type="number" class="form-control" id="daysOld" value="60" data-reactid=".0.1.1.0.1.0.2.1.0"></div>
</div>
<div class="form-group" data-reactid=".0.1.1.0.1.0.3">
<label class="col-sm-6 control-label" data-reactid=".0.1.1.0.1.0.3.0">Query</label>
<div class="col-sm-6" data-reactid=".0.1.1.0.1.0.3.1"><input type="text" class="form-control" id="query" value="" data-reactid=".0.1.1.0.1.0.3.1.0"></div>
</div>
<div class="form-group" data-reactid=".0.1.1.0.1.0.4">
<label class="col-sm-6 control-label" data-reactid=".0.1.1.0.1.0.4.0">Sorting</label>
<div class="col-sm-6" data-reactid=".0.1.1.0.1.0.4.1">
<select class="form-control" id="sorting" data-reactid=".0.1.1.0.1.0.4.1.0">
<option value="hot" data-reactid=".0.1.1.0.1.0.4.1.0.0">Hot</option>
<option value="likes" data-reactid=".0.1.1.0.1.0.4.1.0.1">Likes</option>
<option value="plays" data-reactid=".0.1.1.0.1.0.4.1.0.2">Plays</option>
<option value="date" data-reactid=".0.1.1.0.1.0.4.1.0.3">Date</option>
</select>
</div>
</div>
<div class="form-group" data-reactid=".0.1.1.0.1.0.5">
<label class="col-sm-6 control-label" data-reactid=".0.1.1.0.1.0.5.0">Player Height</label>
<div class="col-sm-6" data-reactid=".0.1.1.0.1.0.5.1"><input type="number" class="form-control" id="height" value="166" data-reactid=".0.1.1.0.1.0.5.1.0"></div>
</div>
<div class="form-group" data-reactid=".0.1.1.0.1.0.6">
<label class="col-sm-6 control-label" data-reactid=".0.1.1.0.1.0.6.0">Track limit</label>
<div class="col-sm-6" data-reactid=".0.1.1.0.1.0.6.1"><input type="number" class="form-control" id="limit" value="10" data-reactid=".0.1.1.0.1.0.6.1.0"></div>
</div>
<button class="btn btn-default pull-right" type="button" data-reactid=".0.1.1.0.1.0.7">Update</button>
</form>
</div>
<ul class="list-group" data-reactid=".0.1.1.0.2">
...
</ul>
</div>
</div>
<div class="col-sm-4 list" data-reactid=".0.1.2">
<div class="panel panel-default" data-reactid=".0.1.2.0">
<div class="panel-heading clearfix" data-reactid=".0.1.2.0.0">
<h4 class="panel-title pull-left" data-reactid=".0.1.2.0.0.0">Tropical House</h4>
<button type="button" class="btn btn-default btn-sm pull-right" data-reactid=".0.1.2.0.0.1"><span class="glyphicon glyphicon-remove" aria-hidden="true" data-reactid=".0.1.2.0.0.1.0"></span></button><button type="button" class="btn btn-default btn-sm pull-right" data-reactid=".0.1.2.0.0.2"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true" data-reactid=".0.1.2.0.0.2.0"></span></button>
</div>
<ul class="list-group" data-reactid=".0.1.2.0.2">
...
</ul>
</div>
</div>
</div>
(Sorry for the React clutter)
How do I get them all to line up at the top instead of the bottom?

I was not able to reproduce this from your code snippet, but this behavior is observed when using display:table-cell, in such cases a vertical-align: top aligns them at the top.

Bootstrap 3 panel header pull-right buttons to create advance search

I want to use bootstrap panel to create advance search design.
Like in this image:
My HTML is this:
<div class="panel panel-primary aplxpert-distanta-sus" id="Antet">
<div class="panel-heading clearfix">
<h3 class="panel-title pull-left aplxpert-distanta-sus">Test List</h3>
<div class="btn-group pull-right">
<div class="row form-inline">
<div class="form-group col-sm-12">
<label class="col-sm-2 control-label aplxpert-distanta-sus" for="Nume">Search:</label>
<div class="col-sm-8">
<div class="input-group">
<input type="text" class="form-control input-sm" placeholder="name......" id="cauta">
<span class="input-group-btn">
<button title="Click for search" type="button" class="btn btn-info btn-sm">
<i class="glyphicon glyphicon-search"></i>
</button>
</span>
</div>
</div>
<div class="col-sm-1">
<a title="Advance Search" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" class="btn btn-default btn-sm">
<i class="glyphicon glyphicon-chevron-down"></i>
</a>
</div>
</div>
</div>
</div>
</div>
<div id="collapseOne" class="panel-body panel-collapse collapse">
<div class="row">
<div class="col-sm-3">
<div class="form-group">
<label for="Nume" class="control-label">Nume:</label>
<input type="text" name="Nume" id="Nume" class="form-control input-sm">
</div>
<div class="form-group">
<label for="Prenume" class="control-label">Prenume:</label>
<input type="text" name="Prenume" id="Prenume" class="form-control input-sm">
</div>
</div>
<div class="col-sm-3">
<div class="form-group">
<label for="Nume" class="control-label">Nume aa:</label>
<input type="text" name="Nume" id="Nume" class="form-control input-sm">
</div>
<div class="form-group">
<label for="Prenume" class="control-label">Prenume aa:</label>
<input type="text" name="Prenume" id="Prenume" class="form-control input-sm">
</div>
</div>
<div class="col-sm-3">
<div class="form-group">
<label for="Nume" class="control-label">Nume bb:</label>
<input type="text" name="Nume" id="Nume" class="form-control input-sm">
</div>
<div class="form-group">
<label for="Prenume" class="control-label">Prenume bb:</label>
<input type="text" name="Prenume" id="Prenume" class="form-control input-sm">
</div>
</div>
<div class="col-sm-3">
<div class="form-group">
<label for="Nume" class="control-label">Nume cc:</label>
<input type="text" name="Nume" id="Nume" class="form-control input-sm">
</div>
<div class="form-group">
<label for="Prenume" class="control-label">Prenume cc:</label>
<input type="text" name="Prenume" id="Prenume" class="form-control input-sm">
</div>
</div>
</div>
</div>
<div class="panel-footer">
<strong>Result return for this criterias:</strong> nume: Popescu Ion, data: 04.05.2014, CNP: 1361813282206
</div>
</div>
Something like this: http://jsfiddle.net/nkS2e/4/
How i can do this more better because on resize not work good and in not the best way.