Question posted in 
I have a simple bootstrap form with the following fields, now the problem is
- The Labels and text box are not in straight line.
- When i change the Notes field size it is effecting remaining fields, they are moving down(see the screenshot point 2), how to make those fields fixed and how make label and text in a straight line
**below is the runnable code, please help me by editing below
(open the snippet full page).
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/css/bootstrap-datetimepicker.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(function() {
$('#datetimepicker1').datetimepicker({
format: 'DD/MM/YYYY HH:mm',
});
});
</script>
<style>
body {
font-family: Verdana, Arial, sans-serif;
font-size: 12px;
}
.mydiv
{
border-style: solid;
border-width: thin;
width:100%;
height:700px;
}
</style>
</head>
<body>
<div class="mydiv">
<div class="container">
<div class="form-row">
<div class="form-group col-md-6">
<label class="col-sm-2">FirstName</label>
<div class="col-sm-7">
<input type="email" class="form-control" placeholder="FirstName">
</div>
</div>
<div class="form-group col-md-6">
<label class="col-sm-2">StartDate</label>
<div class="col-sm-7" >
<div class="form-group">
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label class="col-sm-2">LastName</label>
<div class="col-sm-7">
<input type="email" class="form-control" placeholder="LastName">
</div>
</div>
<div class="form-group col-md-6">
<label class="col-sm-2">EndDate</label>
<div class="col-sm-7" >
<div class="form-group">
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label class="col-sm-2">test1:</label>
<div class="col-sm-7">
<input type="email" class="form-control" placeholder="test1">
</div>
</div>
<div class="form-group col-md-6">
<label class="col-sm-2">test2:</label>
<div class="col-sm-7">
<input type="email" class="form-control" placeholder="test2">
</div>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label class="col-sm-2">test3</label>
<div class="col-sm-7">
<input type="email" class="form-control" placeholder="test3">
</div>
</div>
<div class="form-group col-md-6">
<label class="col-sm-2">test4 Id</label>
<div class="col-sm-7">
<input type="email" class="form-control" placeholder="">
</div>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label class="col-sm-2">test5</label>
<div class="col-sm-7">
<input type="email" class="form-control" placeholder="">
</div>
</div>
<div class="form-group col-md-6">
<label class="col-sm-2">Notes</label>
<div class="col-sm-7">
<textarea id="w3review" name="w3review" rows="4" cols="50"></textarea>
</div>
</div>
</div>
<div style='clear:both'></div>
<div class="form-row">
<div class="form-group col-md-6">
<label class="col-sm-2">test6</label>
<div class="col-sm-7">
<input type="email" class="form-control" placeholder="test6">
</div>
</div>
</div>
<div style='clear:both'></div>
<div class="form-row">
<div class="form-group col-md-6">
<label class="col-sm-2">test7</label>
<div class="col-sm-7">
<input type="email" class="form-control" placeholder="test7">
</div>
</div>
</div>
<div style='clear:both'></div>
<div class="form-row">
<div class="form-group col-md-6">
<label class="col-sm-2">test8</label>
<div class="col-sm-7">
<input type="email" class="form-control" placeholder="test8">
</div>
</div>
</div>
<div style='clear:both'></div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/js/bootstrap-datetimepicker.min.js"></script>
</body>
</html>code.**
2
Answers
Add this in your Style to make label and textbox in a straight line
Let me know if this code works for you by adding it to your CSS:
working example: