I use form-groups in a well element, but
the bottom visible margin is more than the top, and this is not looking good. I want it to be centrelised vertically.
<div class="well">
<div class="form-horizontal">
<div class="form-group">
....
<div class="form-group">
....
</div>
</div>
Snippet
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="well">
<div id="date_formatter_widget">
<!-- Widget -->
<div class="form-horizontal">
<div class="form-group">
<div class="col-sm-9 text-right">
<input type="text" class="form-control conversionPattern" id="pattern" placeholder="pattern here...">
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<input type="text" class="form-control conversionPattern" id="conversionPattern" placeholder="" readonly value="2015-05-21">
</div>
</div>
</div>
<!-- /Widget -->
</div>
</div>
The .form-group's last child has a margin-bottom, which can be removed by setting this:
.form-horizontal .form-group:last-child {margin-bottom: 0;}
.form-horizontal .form-group:last-child {
margin-bottom: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="well">
<div id="date_formatter_widget">
<!-- Widget -->
<div class="form-horizontal">
<div class="form-group">
<div class="col-sm-9 text-right">
<input type="text" class="form-control conversionPattern" id="pattern" placeholder="pattern here...">
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<input type="text" class="form-control conversionPattern" id="conversionPattern" placeholder="" readonly value="2015-05-21">
</div>
</div>
</div>
<!-- /Widget -->
</div>
</div>
Preview
Related
Problem
I am expecting to showing two columns. But all the four fields are coming in 1 column.
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div id="app">
<main class="py-4">
<div class="container">
<div class="row justify-content-center">
<div class="col-md-10">
<div class="card">
<div class="card-header">Update Profile</div>
<div class="card-body">
<form method="POST" accept-charset="UTF-8" id="profileForm">
<div class="col-sm-6 col-md-6">
<div class="form-group">
<label for="First_Name" class="control-label">First Name</label>
<input class="form-control" name="First_Name" type="text">
</div>
<div class="form-group">
<label for="Last_Name" class="control-label">Last Name</label>
<input class="form-control" name="Last_Name" type="text">
</div>
</div>
<div class="col-sm-6 col-md-6">
<div class="form-group ">
<label for="City" class="control-label">City</label>
<input class="form-control" name="City" type="text">
</div>
<div class="form-group ">
<label for="State" class="control-label">State</label>
<input class="form-control" name="State" type="text">
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</main>
</div>
</body>
</html>
This should work.
Adding a row div just before the two form fields you are expecting in the same column.
<!DOCTYPE html>
<html lang="en">
<head>
<link href="css/app.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div id="app">
<main class="py-4">
<div class="container">
<div class="row justify-content-center">
<div class="col-md-10 col-lg-10">
<div class="card">
<div class="card-header">Update Profile</div>
<div class="card-body">
<form method="POST" accept-charset="UTF-8" id="profileForm">
<div class="row">
<div class="col-sm-6 col-md-6 col-lg-6">
<div class="form-group">
<label for="FirstName" class="control-label">First Name</label>
<input class="form-control" name="First_Name" type="text">
</div>
</div>
<div class="col-sm-6 col-md-6 col-lg-6">
<div class="form-group">
<label for="LastName" class="control-label">Last Name</label>
<input class="form-control" name="Last_Name" type="text">
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6 col-md-6 col-lg-6">
<div class="form-group ">
<label for="City" class="control-label">City</label>
<input class="form-control" name="City" type="text">
</div>
</div>
<div class="col-sm-6 col-md-6 col-lg-6">
<div class="form-group ">
<label for="State" class="control-label">State</label>
<input class="form-control" name="State" type="text">
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</main>
</div>
</body>
</html>
Wrap it in a div with class "row", this will take all the width avaible
<div class="row">
<div class="col-sm-6 col-md-6">...</div>
<div class="col-sm-6 col-md-6">...</div>
</div>
I have a big form and the problem with alignment. I cut some fields, but the demo will show the problem.
I have two columns in the begining of the form, some rows use half of the width, some rows use full witdh. And, the problem with the last one. As you can see textareas is not aligned with the others inputs:
How can I fix it?
DEMO
PS. I use Bootstrap 4, but, I think this question is related to Bootsrap 3 too.
.full-width {
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://npmcdn.com/tether#1.2.4/dist/js/tether.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<form novalidate>
<div class="row">
<div class="col-md-8">
<div class="form-group row">
<label for="field1" class="col-md-2 col-form-label">Text Area</label>
<div class="col-md-10">
<textarea id="field1" class="form-control"
cols="30" rows="4"></textarea>
</div>
</div>
</div>
<div class="col-md-4">
<div class="form-group row">
<div class="col-md-12">
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox"> Checkbox 1
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox"> Checkbox 2
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox"> Checkbox 3
</label>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-8">
<div class="form-group row">
<label for="field2" class="col-md-2 col-form-label">Input</label>
<div class="col-md-10">
<input id="field2" class="form-control"/>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group row">
<label class="col-md-1 col-form-label">Options</label>
<div class="col-md-11">
<div class="row">
<div class="col-md-6">
<span>Label 1</span>
<input type="radio" name="group1" value="Value 1"> Value 1
<input type="radio" name="group1" value="Value 1"> Value 2
</div>
<div class="col-md-6">
<span>Label 2</span>
<input type="radio" name="group2" value="Value 1"> Value 1
<input type="radio" name="group2" value="Value 2"> Value 2
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-11">
<textarea class="full-width"></textarea>
</div>
<div class="col-md-1">
<span">Icon</span>
</div>
</div>
<div class="row">
<div class="col-md-11">
<textarea class="full-width"></textarea>
</div>
<div class="col-md-1">
<span">Icon</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div>
</form>
The problem is the first 2 rows are nested in col-md-8, and the misaligned "options" row is nested in col-md-12.
Also, clean up the various malformed HTML in the code.
http://www.codeply.com/go/sCYzgdFXxa
I have an inline form with the following code:
<div class="card" style="width:100%;">
<div class="card-block">
<form class="form-inline">
<div class="row">
<div class="form-group col-xs-2">
<label for="displayName">Display Name</label>
<input class="form-control" ng-model="displayName" style="height:30px;" id="displayName">
</div>
<div class="form-group col-xs-2">
<label for="officeEmail">Office Email</label>
<input class="form-control" ng-model="officeEmail" style="height:30px;" id="officeEmail">
</div>
</div>
</form>
</div>
</div>
when I run it it looks like this:
When I resize the Browser it's looking like this:
My question is how I can have input fields with fixed width and fixed distance between columns?
Thanks
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="card" style="width:100%;">
<div class="card-block">
<form class="form-inline">
<div class="row">
<div class=" col-lg-3 col-md-3 col-sm-3 col-xs-3">
<label for="displayName">Display Name</label>
<input class="form-control" ng-model="displayName" style="height:30px;" id="displayName">
</div>
<div class=" col-lg-3 col-md-3 col-sm-3 col-xs-3">
<label for="officeEmail">Office Email</label>
<input class="form-control" ng-model="officeEmail" style="height:30px;" id="officeEmail">
</div>
</div>
</form>
</div>
</div>
</div>
</div>
Is this the same that you are looking for?
Hope this helps.
I have the lumen theme from bootswatch... everything seems to be working fine except that my form never submits any data ... it goes to the action page but never send any data across... he is the complete code...
<!DOCTYPE html>
<html>
<title>Some Title
</title>
<link rel="stylesheet" type="text/css" href="bootstrap.css">
<body>
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="page-header">
<h1 id="container">Some Heading</h1>
</div>
<div class="bs-component">
<div class="jumbotron">
<h1>Incident Management System</h1>
<p> Some heading</p>
<p><a class="btn btn-primary btn-lg">Learn more</a></p>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-8">
<div class="panel panel-success">
<div class="panel-heading">
<h3 class="panel-title">Submit a ticket</h3>
</div>
<div class="panel-body">
<form class="form-horizontal" id="insertForm" method="post" action="addincident.php">
<fieldset>
<legend>We need few details!</legend>
<div class="form-group">
<label for="inputUserName" class="col-lg-2 control-label">Username</label>
<div class="col-lg-10">
<input type="text" class="form-control" id="inputUserName" placeholder="Enter your username">
</div>
</div>
<div class="form-group">
<label for="inputstudentID" class="col-lg-2 control-label">Student ID</label>
<div class="col-lg-10">
<input type="text" class="form-control" id="inputStudentID" placeholder="Enter your Student ID">
</div>
</div>
<div class="form-group">
<label for="inputStudentEmail" class="col-lg-2 control-label">Student EMail</label>
<div class="col-lg-10">
<input type="text" class="form-control" id="inputStudentEMail" placeholder="Enter your Student Email ID">
</div>
</div>
<div class="form-group">
<label for="selectRoomNo" class="col-lg-2 control-label">Room Number</label>
<div class="col-lg-10">
<select class="form-control" id="selectRoomNo">
<option>S114D</option>
<option>S118B</option>
<option>S118E</option>
<option>S120</option>
<option>S114B</option>
</select>
</div>
</div>
<div class="form-group">
<label for="textAreaRoomPosition" class="col-lg-2 control-label">Location of machine</label>
<div class="col-lg-10">
<textarea class="form-control" rows="3" id="textAreaRoomPosition"></textarea>
<span class="help-block">Explain to the best of your knowledge the location of the issue in the lab.</span>
</div>
</div>
<div class="form-group">
<label for="textAreaRoomPosition" class="col-lg-2 control-label">Issue\Incident</label>
<div class="col-lg-10">
<textarea class="form-control" rows="3" id="textAreaRoomPosition"></textarea>
<span class="help-block">Explain to the best of your knowledge the issue you are facing. Try to be as detailed as possible.</span>
</div>
</div>
<div class="form-group">
<div class="col-lg-10 col-lg-offset-2">
<button class="btn btn-default">Cancel</button>
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">Information</h3>
</div>
<div class="panel-body">
Upon recieving the ticket, we will assign it to a designated technician who will then solve the case. You can view the solution of the incident once it is posted.
</div>
</div>
</div>
</div>
</div>
</body>
</html>
It's missing the "name" attribute;
change this:
<input type="text" id="inputUserName">
to something like this:
<input type="text" name="inputUserName" id="inputUserName">
Having some nasty issues with IE6 and reading my div form layout, the html:
<form id="brochureForm" name="brochureForm" action="/how-it-works/request-a-brochure/" method="post">
<div class="row">
<div class="label">
<label for="szName">Name</label>
</div>
<div class="field">
<input type="text" name="szName" id="szName" value="#form.szName#" />
</div>
<div class="clear"></div>
</div>
<div class="row">
<div class="label">
<label for="szCompanyName">Company Name</label>
</div>
<div class="field">
<input type="text" name="szCompanyName" id="szCompanyName" value="#form.szCompanyName#" />
</div>
<div class="clear"></div>
</div>
<div class="row">
<div class="label">
<label for="szAddress">Address</label>
</div>
<div class="field">
<input type="text" name="szAddress" id="szAddress" value="#form.szAddress#" />
</div>
<div class="clear"></div>
</div>
<div class="row">
<div class="label">
<label for="szTown">Town/City</label>
</div>
<div class="field">
<input type="text" name="szTown" id="szTown" value="#form.szTown#" />
</div>
<div class="clear"></div>
</div>
<div class="row">
<div class="label">
<label for="szPostcode">Postcode</label>
</div>
<div class="field">
<input type="text" name="szPostcode" id="szPostcode" value="#form.szPostcode#" />
</div>
<div class="clear"></div>
</div>
<div class="row">
<div class="label">
<label for="szTelephone">Tel</label>
</div>
<div class="field">
<input type="text" name="szTelephone" id="szTelephone" value="#form.szTelephone#" />
</div>
<div class="clear"></div>
</div>
<div class="row">
<div class="label">
<label for="szEmail">E-mail</label>
</div>
<div class="field">
<input type="text" name="szEmail" id="szEmail" value="#form.szEmail#" />
</div>
<div class="clear"></div>
</div>
<div class="submitrow">
<input type="image" name="szSubmit" id="szSubmit" src="/images/form/submit.gif" class="submitRO" />
</div>
</form>
And then the CSS:
.row {width:314px;margin:0 0 8px 0;}
.row .label {width:103px;padding:3px 16px 0 0;float:left;text-align:right;}
.row .field {width:195px;float:left;}
.submitrow {width:314px;text-align:right;padding:3px 0 0 0;}
Working fine in IE8/7, Firefox, etc.
Also, as a rule of thumb when dealing with IE6, try adding display:inline to your floating divs
IE6 sometimes doesnt get margins and paddings right. Try to reduce them a few pixels.