How can align these bootstrap form elements
user5005768Himadree
I am beginners in bootstrap learning and want to align these elements in bootstrap.It works well when i did not add any icon.But if i add any icon with any input field then the alignment gets broken like the figure given below.
here is the code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Leave Form</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script type="text/javascript">
</script>
</head>
<body style="background-color:#584F39;">
<div class="container">
<div class="panel-group">
<div class="panel panel-primary" style="border-color: #73AD21; ">
<div class="panel-heading" style=" background-color:#73AD21;">
<h3 class="panel-title" style="text-align: center;">Leave Form</h3>
</div>
<div class="panel-body">
<div class="col-xs-12">
<form class="form-horizontal" >
<div class="form-group">
<label class="control-label col-sm-3" for="eid">Employee ID:</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="eid" placeholder="Enter ID">
</div>
</div>
<div class="panel panel-primary " style="border-color: #73AD21; margin-bottom: 15px;">
<div class="panel-heading" style=" background-color:#73AD21;">
<h3 class="panel-title" style="text-align: center;">Employee Information
<span class=" glyphicon glyphicon-user" aria-hidden="true"></span>
</h3>
</div>
<div class="panel-body ">
<div class="col-xs-12">
<div class="form-group">
<label class="control-label col-sm-2" for="name" > Name:</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="name" placeholder="Name">
</div>
<label class="control-label col-sm-2" for="designation" >Designation:</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="designation" placeholder="Designation">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="department" > Department:</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="department" placeholder="Department">
</div>
<label class="control-label col-sm-2" for="sd" >Sec/Division:</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="sd" placeholder="Section/Division">
</div>
</div>
</div>
</div>
</div>
<div class="form-group" >
<div class="form-group" >
<label class="control-label col-sm-3" style=" text-align:right;" >Leave Type:</label>
<div class="col-sm-9 ">
<select class="form-control " id="employeetype" onchange="updateText('facultyinstitute')">
<option value="" disabled="" selected="">Select Leave Type</option>
<option value="10">Sick Leave</option>
<option value="10">Study Leave</option>
</select>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" style="text-align:right;" >From Date:</label>
<div class="col-sm-9 input-group date">
<input type="text" class="form-control" placeholder="DD/MM/YYYY" >
<span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" style="text-align:right;" >To Date:</label>
<div class="col-sm-9 input-group date">
<input type="text" class="form-control" placeholder="DD/MM/YYYY" >
<span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" style="text-align:right;" >Leave Place:</label>
<div class="col-sm-9 ">
<input type="text" class="form-control" id="lp" placeholder="Place Name">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" style="text-align:right;" >Contact Email:</label>
<div class="col-sm-9 input-group">
<input type="text" class="form-control" placeholder="Email Address" aria-describedby="basic-addon2">
<span class="input-group-addon" id="basic-addon2">@example.com</span>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" style="text-align:right;" >Phone:</label>
<div class="col-sm-9 input-group">
<input type="text" class="form-control" placeholder="Phone Number" aria-describedby="basic-addon2">
<span class="input-group-addon"><i class="glyphicon glyphicon-phone-alt"></i></span>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-primary">Save</button>
<button type="button" class="btn btn-info">Exit</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
give me some clue on how to handle this icon properly with correct alignment, gaps etc. please let me know for further information.
vanburen
Input Groups: Don't mix with other components
Do not mix form groups or grid column classes directly with input groups. Instead, nest the input group inside of the form group or grid-related element.
Because you're mixing input-groups with columns, see the Docs and the working Snippet.
body {
background-color: #584F39;
}
.panel.panel-primary {
border-color: #73AD21;
}
.panel-group .panel .panel-heading {
background: #73AD21;
}
.form-horizontal .panel.panel-primary {
border-color: #73AD21;
margin-bottom: 10px;
}
@media (max-width: 767px) {
.form-group-top {
margin-top: 15px;
}
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="panel-group">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title text-center">Leave Form</h3>
</div>
<div class="panel-body">
<form class="form-horizontal">
<div class="form-group">
<label class="control-label col-sm-3" for="eid">Employee ID:</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="eid" placeholder="Enter ID">
</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title text-center">Employee Information <span class=" glyphicon glyphicon-user" aria-hidden="true"></span> </h3>
</div>
<div class="panel-body ">
<div class="form-group">
<label class="control-label col-sm-2" for="name">Name:</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="name" placeholder="Name">
</div>
<div class="form-group-top">
<label class="control-label col-sm-2" for="designation">Designation:</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="designation" placeholder="Designation">
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="department">Department:</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="department" placeholder="Department">
</div>
<div class="form-group-top">
<label class="control-label col-sm-2" for="sd">Sec/Division:</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="sd" placeholder="Section/Division">
</div>
</div>
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" style=" text-align:right;">Leave Type:</label>
<div class="col-sm-9 ">
<select class="form-control " id="employeetype" onchange="updateText('facultyinstitute')">
<option value="" disabled="" selected="">Select Leave Type</option>
<option value="10">Sick Leave</option>
<option value="10">Study Leave</option>
</select>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" style="text-align:right;">From Date:</label>
<div class="col-sm-9">
<div class="input-group date">
<input type="text" class="form-control" placeholder="DD/MM/YYYY">
<span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" style="text-align:right;">To Date:</label>
<div class="col-sm-9">
<div class="input-group date">
<input type="text" class="form-control" placeholder="DD/MM/YYYY">
<span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" style="text-align:right;">Leave Place:</label>
<div class="col-sm-9 ">
<input type="text" class="form-control" id="lp" placeholder="Place Name">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" style="text-align:right;">Contact Email:</label>
<div class="col-sm-9">
<div class="input-group">
<input type="text" class="form-control" placeholder="Email Address" aria-describedby="basic-addon2">
<span class="input-group-addon" id="basic-addon2">@example.com</span>
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" style="text-align:right;">Phone:</label>
<div class="col-sm-9">
<div class="input-group">
<input type="text" class="form-control" placeholder="Phone Number" aria-describedby="basic-addon2">
<span class="input-group-addon"><i class="glyphicon glyphicon-phone-alt"></i></span>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-primary">Save</button>
<button type="button" class="btn btn-info">Exit</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>Collected from the Internet
Please contact [email protected] to delete if infringement.
edited at
- Prev: How can I detect if left Alt + letter was pressed
- Next: Using the same code for both client and server
Related
Related Related
- 1
How to align <form> elements vertically?
- 2
How to align bootstrap form inputs
- 3
How can align these elements?CSS
- 4
How to align inline radios / checkboxes and help-block elements in horizontal form with Twitter's Bootstrap 3
- 5
How to align different elements horizontally in Bootstrap?
- 6
How to align divs with input elements of a form?
- 7
How to align search form in navbar with bootstrap grid?
- 8
How to align form at the center of the page using bootstrap
- 9
How right align bootstrap form button?
- 10
How to vertically align a form in Bootstrap 4
- 11
Align form controls Bootstrap
- 12
Align form controls Bootstrap
- 13
How can I align these elements side by side?
- 14
How can I align a button with the legend in bootstrap?
- 15
How can I align my form the left
- 16
Material UI: How to align different form elements including pickers in a row?
- 17
Material UI: How to align different form elements including pickers in a row?
- 18
How to align inputs in bootstrap form with input-group-addons?
- 19
How do i vertically align my form in bootstrap?
- 20
How to align a button offset to the left or right of a form with Bootstrap
- 21
bootstrap grid align elements horizontally
- 22
Align elements in Bootstrap panel header
- 23
Bootstrap 3 align elements into circle
- 24
Horizontally align form elements in Yesod
- 25
Getting text in a bootstrap form to align
- 26
Getting text in a bootstrap form to align
- 27
How to mix vertical and horizontal form elements in one form in Bootstrap 3?
- 28
Bootstrap Form Elements Not Level
- 29
How can I vertically align elements in a header without tables?
Comments