<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
</head>
<body>
<div class="row">
<div class="col-md-12">
<div class="col-md-3">
<div class="form-group">
<label for="reference">Reference</label>
<input type="text" class="form-control" id="reference" name="reference" placeholder="Reference">
<div class="input-error form-control-input" style="color: Red; display: none;">Person is required</div>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="checkbox-inline">
<input type="checkbox" value="">Option 1</label>
<div class="input-error form-control-input" style="color: Red; display: none;">Demo is required</div>
</div>
</div>
</div>
</div>
Now i want to aligned checkbox with input field horizontally. I can't figure out after searching.
Here's an example of how you could do it. I put both input fields in a row, where they occupy half of the row with <div class="col-md-6">.
Here is the code
<div class="row">
<div class="col-md-12">
<div class="col-md-6">
<div class="form-group">
<label for="reference">Reference</label>
<div class="row align-middle">
<div class="col-md-6">
<input class="form-control" id="reference" name="reference" placeholder="Reference" type="text">
<div class="input-error form-control-input" style="color: Red; display: none;">Person is required</div>
</div>
<div class="col-md-6">
<label class="checkbox-inline">
<input value="" type="checkbox">Option 1</label>
<div class="input-error form-control-input" style="color: Red; display: none;">Demo is required</div>
</div>
</div>
</div>
</div>
</div>
Here is a working example.
https://codepen.io/anon/pen/KBzLOR
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
</head>
<body>
<div class="row">
<div class="col-md-12">
<div class="col-md-3">
<div class="form-group">
<label for="reference">Reference</label>
<div class="row">
<div class="col-md-6">
<input type="text" class="form-control" id="reference" name="reference" placeholder="Reference">
<div class="input-error form-control-input" style="color: Red; display: none;">Person is required</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="checkbox-inline">
<input type="checkbox" value="">Option 1</label>
<div class="input-error form-control-input" style="color: Red; display: none;">Demo is required
</div>
</div>
</div>
</div> <!-- ROW CLOSING TAG -->
</div>
</div>
</div>
Related
I got what I'm looking for but the animation effect isn't smooth as it should. I understand that the animation would be better if I don't have padding but I need padding to get the design. How do I solve this problem?
JSFiddle DEMO
HTML:
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="block">
<label class="checkbox"> This is my checkbox
<input type="checkbox" data-toggle="collapse" data-target="#collapseExample">
</label>
<div class="collapse" id="collapseExample">
<div class="row">
<div class="col-12">
<div class="form-group">
<input type="number" class="form-control" placeholder="option one">
</div>
<div class="form-group">
<input type="number" class="form-control" placeholder="option two">
</div>
<div class="form-group">
<input type="number" class="form-control" placeholder="option three">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
CSS:
.block {
margin-top: 30px;
}
.collapse {
background-color: #eee;
padding: 30px 15px;
}
This is base on Bootstrap 4, the latest version.
When you set .collapse it first apply the bootstrap style of .collapse and after yours because that there is delay...
Use the id #collapseExample to style:
.block {
margin-top: 30px;
}
#collapseExample{
background-color: #eee;
padding: 30px 15px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.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>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="block">
<label class="checkbox"> This is my checkbox
<input type="checkbox" data-toggle="collapse" data-target="#collapseExample">
</label>
<div class="collapse" id="collapseExample">
<div class="row">
<div class="col-12">
<div class="form-group">
<input type="number" class="form-control" placeholder="option one">
</div>
<div class="form-group">
<input type="number" class="form-control" placeholder="option two">
</div>
<div class="form-group">
<input type="number" class="form-control" placeholder="option three">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
EDIT to your comment!
There's a "drag" when it closes.
Use jquery onclick the checkbox and apply padding as below:
fiddle here
$('.checkbox').on('click', function(){
if($('.collapse.show').length>0)
$('.collapse').css('padding','0');
else
$('.collapse').css('padding','30px 15px');
});
.block {
margin-top: 30px;
}
#collapseExample{
background-color: #eee;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.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>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="block">
<label class="checkbox"> This is my checkbox
<input type="checkbox" data-toggle="collapse" data-target="#collapseExample">
</label>
<div class="collapse" id="collapseExample">
<div class="row">
<div class="col-12">
<div class="form-group">
<input type="number" class="form-control" placeholder="option one">
</div>
<div class="form-group">
<input type="number" class="form-control" placeholder="option two">
</div>
<div class="form-group">
<input type="number" class="form-control" placeholder="option three">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I got it resolved. It's because I added the padding in parent div.
.block {
margin-top: 30px;
}
.block__collapse {
background-color: #eee;
padding: 30px 15px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.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>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="block">
<label class="checkbox"> This is my checkbox
<input type="checkbox" data-toggle="collapse" data-target="#collapseExample">
</label>
<div class="collapse" id="collapseExample">
<div class="block__collapse">
<div class="row">
<div class="col-12">
<div class="form-group">
<input type="number" class="form-control" placeholder="option one">
</div>
<div class="form-group">
<input type="number" class="form-control" placeholder="option two">
</div>
<div class="form-group">
<input type="number" class="form-control" placeholder="option three">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I am using two rows. In each row there are two columns of complete size col-md-12.in 1st column having 2 fields and the other column has 1 field. Now i put these same 2 in other row. All columns are not aligned:
here is the snippet:
<div class="row">
<div class="col-md-12">
<div class="col-md-3">
<div class="form-group">
<label for="description">Description</label>
<select class="selectpicker" data-live-search="true">
<option>Android</option>
<option>iOS</option>
<option>Windows</option>
<option>Symbian</option>
<option>Atari TOS</option>
<option>Amiga OS</option>
<option>Unix</option>
<option>Linux</option>
<option>OSX</option>
</select>
<div class="input-error form-control-input" style="color: Red; display: none;">Description is required</div>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="group">Issue Date</label>
<input type="text" class="form-control" name="daterange-singe-date-picker" value="10/24/1984">
<div class="input-error form-control-input" style="color: Red; display: none;">date is required</div>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="group">Expiry Date</label>
<input type="text" class="form-control" name="daterange-singe-date-picker" value="10/24/1984">
<div class="input-error form-control-input" style="color: Red; display: none;">date is required</div>
</div>
</div>
</div>
<div class="col-md-12">
<div class="col-md-3">
<div class="form-group">
<label for="reference">Reference</label>
<input type="text" class="form-control" id="reference" name="reference" placeholder="Reference">
<div class="input-error form-control-input" style="color: Red; display: none;">Person is required</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="col-md-3">
<div class="form-group">
<label for="reference">Reference</label>
<input type="text" class="form-control" id="reference" name="reference" placeholder="Reference">
<div class="input-error form-control-input" style="color: Red; display: none;">Person is required</div>
</div>
</div>
</div>
</div>
</div>
so my question is why bootstrap does not aligned specified rows of columns in my given snippet of code?
Are you trying to do something like this? I can't recall if bootstrap does this for you. I am sorry if I misinterpreted the question.
label {
display:table;
width:90px;
float:left;
text-align:center;
}
<div class="row">
<div class="col-md-12">
<div class="col-md-3">
<div class="form-group">
<label for="description">Description</label>
<select class="selectpicker" data-live-search="true">
<option>Android</option>
<option>iOS</option>
<option>Windows</option>
<option>Symbian</option>
<option>Atari TOS</option>
<option>Amiga OS</option>
<option>Unix</option>
<option>Linux</option>
<option>OSX</option>
</select>
<div class="input-error form-control-input" style="color: Red; display: none;">Description is required</div>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="group">Issue Date</label>
<input type="text" class="form-control" name="daterange-singe-date-picker" value="10/24/1984">
<div class="input-error form-control-input" style="color: Red; display: none;">date is required</div>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="group">Expiry Date</label>
<input type="text" class="form-control" name="daterange-singe-date-picker" value="10/24/1984">
<div class="input-error form-control-input" style="color: Red; display: none;">date is required</div>
</div>
</div>
</div>
<div class="col-md-12">
<div class="col-md-3">
<div class="form-group">
<label for="reference">Reference</label>
<input type="text" class="form-control" id="reference" name="reference" placeholder="Reference">
<div class="input-error form-control-input" style="color: Red; display: none;">Person is required</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="col-md-3">
<div class="form-group">
<label for="reference">Reference</label>
<input type="text" class="form-control" id="reference" name="reference" placeholder="Reference">
<div class="input-error form-control-input" style="color: Red; display: none;">Person is required</div>
</div>
</div>
</div>
</div>
</div>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
</head>
<body>
<div class="row">
<div class="col-md-12">
<div class="col-md-3">
<div class="form-group">
<label for="description">Description</label>
<select class="selectpicker" data-live-search="true">
<option>Android</option>
<option>iOS</option>
<option>Windows</option>
<option>Symbian</option>
<option>Atari TOS</option>
<option>Amiga OS</option>
<option>Unix</option>
<option>Linux</option>
<option>OSX</option>
</select>
<div class="input-error form-control-input" style="color: Red; display: none;">Description is required</div>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="group">Issue Date</label>
<input type="text" class="form-control" name="daterange-singe-date-picker" value="10/24/1984">
<div class="input-error form-control-input" style="color: Red; display: none;">date is required</div>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="group">Expiry Date</label>
<input type="text" class="form-control" name="daterange-singe-date-picker" value="10/24/1984">
<div class="input-error form-control-input" style="color: Red; display: none;">date is required</div>
</div>
</div>
</div>
<div class="col-md-12">
<div class="col-md-3">
<div class="form-group">
<label for="reference">Reference</label>
<input type="text" class="form-control" id="reference" name="reference" placeholder="Reference">
<div class="input-error form-control-input" style="color: Red; display: none;">Person is required</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="col-md-3">
<div class="form-group">
<label for="reference">Reference</label>
<input type="text" class="form-control" id="reference" name="reference" placeholder="Reference">
<div class="input-error form-control-input" style="color: Red; display: none;">Person is required</div>
</div>
</div>
</div>
</div>
</div>
</body>
This code is just a copy of your code snippet, i just placed a CDN Link to bootstrap CSS which aligned everthing for me
I hope this could help.
N.B. I think you have got two </div> tag that should not be there (Please check comments in my example) also keep in mind that you should have unique id (not relevant according with your question but it might be helpful, I hope)
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
<div class="row">
<div class="col-md-12">
<div class="col-md-3">
<div class="form-group">
<label for="description">Description</label>
<select class="selectpicker" data-live-search="true">
<option>Android</option>
<option>iOS</option>
<option>Windows</option>
<option>Symbian</option>
<option>Atari TOS</option>
<option>Amiga OS</option>
<option>Unix</option>
<option>Linux</option>
<option>OSX</option>
</select>
<div class="input-error form-control-input" style="color: Red; display: none;">Description is required</div>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="group">Issue Date</label>
<input type="text" class="form-control" name="daterange-singe-date-picker" value="10/24/1984">
<div class="input-error form-control-input" style="color: Red; display: none;">date is required</div>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="group">Expiry Date</label>
<input type="text" class="form-control" name="daterange-singe-date-picker" value="10/24/1984">
<div class="input-error form-control-input" style="color: Red; display: none;">date is required</div>
</div>
</div>
</div>
<div class="col-md-12">
<div class="col-md-3">
<div class="form-group">
<label for="reference">Reference</label>
<input type="text" class="form-control" id="reference" name="reference" placeholder="Reference">
<div class="input-error form-control-input" style="color: Red; display: none;">Person is required</div>
</div>
</div>
</div>
</div>
<!--</div> you should delete this closing div -->
<div class="row">
<div class="col-md-12">
<div class="col-md-3">
<div class="form-group">
<label for="reference">Reference</label>
<input type="text" class="form-control" id="reference" name="reference" placeholder="Reference">
<div class="input-error form-control-input" style="color: Red; display: none;">Person is required</div>
</div>
</div>
</div>
</div>
<!--</div> you should delete this closing div -->
I need to style a bootstrap 3 form such as there is a border around each form field and label. Something like this -
I am not able to make out how to go about doing this. Here is my attempt to achieve this (Please expand the output so that you see 2 columns in each row) -
https://jsfiddle.net/yy7ddtby/15/
.custom-label {
line-height: 3.3em !important;
}
.label-size {
/*font-size: 10px;*/
line-height: 2.1em;
/*padding-right:0px;
width: 10%;*/
}
.border {
color: #555;
border: 1px solid #ccc;
border-radius: 1px;
padding: 5px;
}
<div class="container-fluid">
<form>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="name" class="col-md-4 label-size custom-label border">Name</label>
<div class="col-md-8 border">
<input type="text" id="name" class="form-control input-field">
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="gender" class="col-md-4 label-size custom-label border">Gender</label>
<div class="col-md-8 border">
<select id="gender" class="form-control input-field">
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="col-md-4 label-size custom-label">Functions</label>
<div class="checkbox col-md-8 label-size">
<label>
<input type="checkbox" id="Func1"> Func1</label>
<label>
<input type="checkbox" id="Func2">Func2</label>
<label>
<input type="checkbox" id="Func3">Func3</label>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="country" class="col-md-4 label-size custom-label">Country</label>
<div class="col-md-8">
<select id="country" class="form-control input-field">
<option>Select</option>
</select>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="options" class="col-md-4 label-size custom-label">Options</label>
<div class="col-md-8">
<select id="options" class="form-control input-field">
<option>Select</option>
</select>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="addr" class="col-md-4 label-size custom-label">ADDR</label>
<div class="col-md-8">
<input type="text" id="addr" class="form-control input-field">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="author" class="col-md-4 label-size custom-label">Author</label>
<div class="col-md-8">
<input type="text" id="author" class="form-control input-field">
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="range1" class="col-md-4 label-size custom-label">Range1</label>
<div class="col-md-3">
<input type="text" id="range1" class="form-control input-field">
</div>
<div class="col-md-2">
to
</div>
<div class="col-md-3">
<input type="text" id="range2" class="form-control input-field">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="ip" class="col-md-4 label-size custom-label">IP</label>
<div class="col-md-8">
<input type="text" id="ip" class="form-control input-field">
</div>
</div>
</div>
</div>
</form>
</div>
I have tried to style the first row using a custom CSS called border. However, it doesn't look the way I want it to. The border it generates is quite untidy and not the way in the image.
How can I go about achieving the expected UI with borders?
I would actually give the entire row the border, then use left/right borders on the form elements to divide them up.
Here's the basic idea:
.row {
border: 2px solid black;
}
.form-group > label {
border-right: 2px solid black;
}
input {
border-right: 2px solid black;
}
revised demo
I am trying to create a form using bootstrap 3 that looks like
this.
I can get it to look pretty similar, but the only problem I have is that my last horizontal rule in the ETO section goes the entire way across. Is there any way I can make this only go across half of the page? I tried putting it in different col sizes inside that but I couldn't get it to work. Here's my html. Thanks ahead of time!
<div class="panel panel-default">
<div class="panel-heading">
<label style="color: white; font-weight: bold;">JOHNSON Summary</label>
</div>
<div class="panel-body">
<form class="form-horizontal" role="form" style="overflow-x:auto;">
<fieldset>
<div class="col-xs-6">
<div class="form-group">
<label class="col-xs-5"> Status </label>
<div class="col-xs-7">
<select class="form-control" id="empStatus">
<option value="" disabled>Choose Type....</option>
<option value="Current">Current</option>
<option value="Terminated">Terminated</option>
</select>
</div>
</div>
</div>
<div class="col-xs-6">
<div class="form-group">
<label class="col-xs-5"> Anniversary </label>
<div class="col-xs-7">
<input class='form-control' type="text" id="empAnniversary"/>
</div>
</div>
</div>
<div class="col-xs-6">
<div class="form-group">
<label class="col-xs-5"> Start Date </label>
<div class="col-xs-7">
<input class='form-control' type="date" id="empStartDate"/>
</div>
</div>
</div>
<div class="col-xs-6">
<div class="form-group">
<label class="col-xs-5"> Adjusted Start </label>
<div class="col-xs-7">
<input class='form-control' type="date" id="empAdjustedStart"/>
</div>
</div>
</div>
<div class="col-xs-6">
<div class="form-group">
<label class="col-xs-5"> STD/LTD </label>
<div class="col-xs-7">
<input class='form-control' type="text" id="empSTDLTD"/>
</div>
</div>
</div>
<div class="col-xs-6">
<div class="form-group">
<label class="col-xs-5"> Uncharged </label>
<div class="col-xs-7">
<input class='form-control' type="text" id="empUncharged"/>
</div>
</div>
</div>
</fieldset>
<fieldset>
<h4>PTO</h4>
<div class="col-xs-12">
<div class="form-group">
<div class="col-xs-1"></div>
<label class="col-xs-2"> Base </label>
<div class="col-xs-3">
<input class='form-control' type="text" id="ptoBase" />
</div>
<div class="col-xs-6">
</div>
</div>
</div>
<div class="col-xs-6">
<div class="form-group">
<label class="col-xs-2" style="font-weight: bold;"> + </label>
<label class="col-xs-4"> Carryover </label>
<div class="col-xs-6">
<input class='form-control' type="text" id="ptoCarryover" />
</div>
</div>
</div>
<div class="col-xs-6">
<div class="form-group">
<div class="col-xs-1"></div>
<label class="col-xs-4"> Balance </label>
<div class="col-xs-6">
<input class='form-control' type="text" id="ptoBalance" />
</div>
<div class="col-xs-1"></div>
</div>
</div>
<div class="col-xs-6">
<div class="form-group">
<label class="col-xs-2" style="font-weight: bold;"> ― </label>
<label class="col-xs-4"> Borrowed </label>
<div class="col-xs-6">
<input class='form-control' type="text" id="ptoBorrowed" />
</div>
</div>
<hr style="border: solid 1px black;border-bottom:1px solid black;clear:both" />
</div>
<div class="col-xs-6">
<div class="form-group">
<label class="col-xs-1" style="font-weight: bold;"> ― </label>
<label class="col-xs-4"> Requests </label>
<div class="col-xs-6">
<input class='form-control' type="text" id="ptoRequests" />
</div>
<div class="col-xs-1"></div>
</div>
<hr style="border: solid 1px black;border-bottom:1px solid black;clear:both" />
</div>
<div class="col-xs-6">
<div class="form-group">
<label class="col-xs-2" style="font-weight: bold;"> = </label>
<label class="col-xs-4"> Balance </label>
<div class="col-xs-6">
<input class='form-control' type="text" id="ptoBalance" />
</div>
</div>
</div>
<div class="col-xs-6">
<div class="form-group">
<label class="col-xs-1" style="font-weight: bold;"> = </label>
<label class="col-xs-4"> Available </label>
<div class="col-xs-6">
<input class='form-control' type="text" id="ptoAvailable" />
</div>
<div class="col-xs-1"></div>
</div>
</div>
</fieldset>
<fieldset>
<h4>ETO</h4>
<div class="col-xs-12">
<div class="form-group">
<div class="col-xs-1"></div>
<label class="col-xs-2"> Earned </label>
<div class="col-xs-3">
<input class='form-control' type="text" id="etoEarned" />
</div>
<div class="col-xs-6">
</div>
</div>
</div>
<div class="col-xs-12">
<div class="form-group">
<label class="col-xs-1"> ― </label>
<label class="col-xs-2"> Requests </label>
<div class="col-xs-3">
<input class='form-control' type="text" id="etoRequested" />
</div>
<div class="col-xs-6">
</div>
</div>
<hr style="border: solid 1px black;border-bottom:1px solid black;clear:both" />
</div>
<div class="col-xs-12">
<div class="form-group">
<label class="col-xs-1"> = </label>
<label class="col-xs-2"> Available </label>
<div class="col-xs-3">
<input class='form-control' type="text" id="etoAvailable" />
</div>
<div class="col-xs-6">
</div>
</div>
</div>
</fieldset>
</form>
</div>
</div>
UPDATED.
I think you need to use Bootstrap's horizontal form as described in official docs. It seems you are using horizontal form structure, but you've forgotten to add .form-horizontal class to your form element or to .form-group.
I have the following fiddle which is a cut down sample of a page I am working on utilising bootstrap for the styling.
NOTE: When viewing the fiddle, make sure the Result pane is wide enough to have the first 3 controls on a single row!
The issue that I have is that the 'Free Text Search' row of controls seem to be offset to the right more than I would like. I want the 'Free Text Search' label to be directly under the 'Store Number' label and the same width. Along with that I wand the corresponding input to start at the beginning of the 'Store Number' input and finish at the end of the 'Parent Category' select.
I can't quite see where I have gone wrong with the bootstrap classes.
Here is my html:
<form class="form-horizontal">
<h3 style="padding-left: 20px; padding-bottom: 20px">A pointless title</h3>
<div class="row form-group">
<div class="col-md-4">
<label for="storeNumber" class="col-sm-4 control-label">Store Number</label>
<div class="col-sm-6">
<input id="storeNumber" class="form-control" type="text"
name="storeNumber" placeholder="Store Number" />
</div>
</div>
<div class="col-md-4">
<label for="actionedTo" class="col-sm-4 control-label">Actioned To</label>
<div class="col-sm-6">
<select id="actionedTo" class="form-control"></select>
</div>
</div>
<div class="col-md-4">
<label for="parentCategory"
class="col-sm-4 control-label">Parent Category</label>
<div class="col-sm-6">
<select id="parentCategory" class="form-control"></select>
</div>
</div>
</div>
<div class="row form-group">
<div class="col-md-12">
<label for="freeTextSearch"
class="col-sm-2 control-label">Free Text Search</label>
<div class="col-sm-10">
<input id="freeTextSearch" class="form-control" type="text"
name="requestNumber" placeholder="Free Text Search" />
</div>
</div>
</div>
</form>
Your general structure is counter to your classes. You're structuring for your inputs to position inline but you're using form-horizontal and you're nesting columns.
You don't need any of that markup for this. Just use the form-group class and columns.
See working Snippet.
*The CSS I've added isn't needed to make everything work but I believe it looks better on larger viewports with it.
#media (min-width: 768px) {
.lg-group {
margin-top: 25px;
}
h3.form-title {
margin-bottom: 40px;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<nav class="navbar navbar-default">
<div class="navbar-header"> <a class="navbar-brand" href="#">Bootstrap 3 Header</a>
</div>
</nav>
</div>
<div class="container">
<div class="form-group">
<div class="col-sm-12">
<h3 class="form-title">A Pointless Title</h3>
</div>
</div>
<form class="myForm">
<div class="form-group">
<label for="storeNumber" class="col-sm-2 control-label">Store Number</label>
<div class="col-sm-2">
<input id="storeNumber" class="form-control" type="text" name="storeNumber" placeholder="Store Number" />
</div>
</div>
<div class="form-group">
<label for="actionedTo" class="col-sm-2 control-label">Actioned To</label>
<div class="col-sm-2">
<select id="actionedTo" class="form-control" name="actionedTo"></select>
</div>
</div>
<div class="form-group">
<label for="parentCategory" class="col-sm-2 control-label">Parent Category</label>
<div class="col-sm-2">
<select id="parentCategory" class="form-control" name="parentCategory"></select>
</div>
</div>
<div class="clearfix"></div>
<div class="form-group lg-group">
<label for="requestNumber" class="col-sm-2 control-label">Free Text Search</label>
<div class="col-sm-10">
<input id="freeTextSearch" class="form-control" type="text" name="requestNumber" placeholder="Free Text Search" />
</div>
</div>
</form>
</div>
Alternative Layout for Multiple Controls
#media (min-width: 768px) {
.lg-group {
margin-top: 25px;
}
h3.form-title {
margin-bottom: 40px;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<nav class="navbar navbar-default">
<div class="navbar-header"> <a class="navbar-brand" href="#">Bootstrap 3 Header</a>
</div>
</nav>
</div>
<div class="container">
<div class="form-group">
<div class="col-sm-12">
<h3 class="form-title">A Pointless Title</h3>
</div>
</div>
<form class="myForm">
<div class="row">
<div class="col-sm-12">
<div class="lg-group">
<div class="form-group">
<label for="storeNumber" class="col-sm-2 control-label">Store Number</label>
<div class="col-sm-2">
<input id="storeNumber" class="form-control" type="text" name="storeNumber" placeholder="Store Number" />
</div>
</div>
<div class="form-group">
<label for="actionedTo" class="col-sm-2 control-label">Actioned To</label>
<div class="col-sm-2">
<select id="actionedTo" class="form-control" name="actionedTo"></select>
</div>
</div>
<div class="form-group">
<label for="parentCategory" class="col-sm-2 control-label">Parent Category</label>
<div class="col-sm-2">
<select id="parentCategory" class="form-control" name="parentCategory"></select>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="lg-group">
<div class="form-group">
<label for="storeNumber" class="col-sm-2 control-label">Store Number</label>
<div class="col-sm-2">
<input id="storeNumber" class="form-control" type="text" name="storeNumber" placeholder="Store Number" />
</div>
</div>
<div class="form-group">
<label for="actionedTo" class="col-sm-2 control-label">Actioned To</label>
<div class="col-sm-2">
<select id="actionedTo" class="form-control" name="actionedTo"></select>
</div>
</div>
<div class="form-group">
<label for="parentCategory" class="col-sm-2 control-label">Parent Category</label>
<div class="col-sm-2">
<select id="parentCategory" class="form-control" name="parentCategory"></select>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-12">
<div class="row">
<div class="form-group lg-group">
<label for="requestNumber" class="col-sm-2 control-label">Free Text Search</label>
<div class="col-sm-10">
<input id="freeTextSearch" class="form-control" type="text" name="requestNumber" placeholder="Free Text Search" />
</div>
</div>
</div>
</div>
</form>
</div>