Menu
I would like to have some spacing between the controls. According to spec, it should be achieved using form-group class. However it is not working in my case.
http://jsfiddle.net/TLF4L/
<div class="col-xs-12 col-sm-12"> <form role="form"> <div class="form-group"> <div class="col-xs-3 text-right"> <label for="cpTitle">Title</label> </div> <div class="col-xs-9"> <input type="text" class="form-control" placeholder="Title of the program" id="cpTitle" /> </div> </div> <div class="form-group"> <div class="col-xs-3 text-right"> <label for="cpDesc">Description</label> </div> <div class="col-xs-9"> <textarea class="form-control" rows="3" placeholder="Description of the program" id="cpDesc"></textarea> </div> </div> <div class="form-group"> <div class="col-xs-3 text-right"> <label for="cpAddr">Program address</label> </div> <div class="col-xs-9"> <input type="text" class="form-control" placeholder="Name of Facility" id="cpAddr" /> <input type="text" class="form-control" placeholder="Street 1" /> <input type="text" class="form-control" placeholder="Street 2" /> <div class="col-xs-4"> <input type="text" class="form-control" placeholder="State" /> </div> <div class="col-xs-4"> <input type="text" class="form-control" placeholder="City" /> </div> <div class="col-xs-4"> <input type="text" class="form-control" placeholder="Zip" /> </div> </div> </div> </form> </div> 
227
While form-group sets up the spacing between form elements, form-control sets the width of the form element to 100%, causing it to span the width of the form and resize with the window.
The customized form can be created by using Bootstrap 4 like checkbox, radio buttons, file inputs and more. Bootstrap simplifies the process of alignment and styling of web pages in many forms like label, input, field, textarea, button, checkbox, etc. Custom Checkbox: The . custom-control and .
The .form-group class is the easiest way to add some structure to forms. It provides a flexible class that encourages proper grouping of labels, controls, optional help text, and form validation messaging. By default it only applies margin-bottom , but it picks up additional styles in .form-inline as needed.
Spacing Bootstrap includes a wide range of shorthand responsive margin, padding, and gap utility classes to modify an element’s appearance.
Standard rules for all three form layouts: Wrap labels and form controls in <div class="form-group"> (needed for optimum spacing) Add class.form-control to all textual <input>, <textarea>, and <select> elements Bootstrap Vertical Form (default)
Using form-group classes in your form will automatically add spacing for labels and controls (a type of form item). You can add the form-group class to your form by encasing each label and control in a div class with the form-group class: <div class ="form-group"> <!-- Bootstrap Label or Control code here --> </div>
Form controls automatically receive some global styling with Bootstrap: All textual <input> , <textarea> , and <select> elements with class .form-control have a width of 100%. Bootstrap Form Layouts
http://jsfiddle.net/TLF4L/6/
Main issue is to make sure you set class "form-horizontal" on your form. For the program address fields, you could either set out a separate row for each or what I'd suggest is just adding a css for margin-bottom on each input field. Edited jsfiddle above
.margin-bottom { margin-bottom:15px;} <div class="col-xs-12 col-sm-12"> <form role="form" class='form-horizontal'> <div class="form-group"> <div class="col-xs-3 text-right"> <label for="cpTitle">Title</label> </div> <div class="col-xs-9"> <input type="text" class="form-control" placeholder="Title of the program" id="cpTitle" /> </div> </div> <div class="form-group"> <div class="col-xs-3 text-right"> <label for="cpDesc">Description</label> </div> <div class="col-xs-9"> <textarea class="form-control" rows="3" placeholder="Description of the program" id="cpDesc"></textarea> </div> </div> <div class="form-group"> <div class="col-xs-3 text-right"> <label for="cpAddr">Program address</label> </div> <div class="col-xs-9"> <input type="text" class="form-control margin-bottom" placeholder="Name of Facility" id="cpAddr" /> <input type="text" class="form-control margin-bottom" placeholder="Street 1" /> <input type="text" class="form-control margin-bottom" placeholder="Street 2" /> </div> </div> <div class="form-group"> <div class="col-xs-3 text-right"> </div> <div class="col-xs-3"> <input type="text" class="form-control" placeholder="State" /> </div> <div class="col-xs-3"> <input type="text" class="form-control" placeholder="City" /> </div> <div class="col-xs-3"> <input type="text" class="form-control" placeholder="Zip" /> </div> </div> </form> I updated your fiddle, added a textarea class as well. Updated fiddle
You need to use CSS to set a margin bottom to your input fields
input[type=text], .txtarea{ margin-bottom: 10px; } 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
