Menu
I'm trying to lay out a bootstrap form where the 1st row has 1 input and the 2nd row has 2 inputs. Here's a picture of it not working, you can see what i'm trying to do...
Oh how i wish those boys would line up smartly! I've been staring at this too long - it feels like a margin problem, but i'm probably just missing something obvious.
Can anyone spot my mistake? I've gotten it down to bare bones here:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<div class="container body-content"><br><br>
<form>
<div class="form-horizontal row">
<div class="form-group col-sm-12">
<label class="control-label col-sm-2">Supplier</label>
<div class="col-sm-10">
<input class="form-control"/>
</div>
</div>
<div class="row">
<div class="form-group col-sm-6">
<label class="control-label col-sm-4">Contact</label>
<div class="col-sm-8">
<input class="form-control"/>
</div>
</div>
<div class="form-group col-sm-6">
<label class="control-label col-sm-4">Phone</label>
<div class="col-sm-8">
<input class="form-control"/>
</div>
</div>
</div>
</div>
</form>
</div>
</body>
</html>
Hope you can help!
351
asked Sep 03 '26 05:09
Instead of applying the number of columns to the form control, wrap all the controls in <div>'s with the desired number of columns:
<div class="container body-content"><br><br>
<form>
<div class="form-horizontal">
<div class="col-sm-12">
<div class="form-group">
<label class="control-label col-sm-2">Supplier</label>
<div class="col-sm-10">
<input class="form-control"/>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label class="control-label col-sm-4">Contact</label>
<div class="col-sm-8">
<input class="form-control"/>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label class="control-label col-sm-4">Phone</label>
<div class="col-sm-8">
<input class="form-control"/>
</div>
</div>
</div>
</div>
</form>
Here is a live demo
http://www.bootply.com/I5gUPVenbA
124
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
