Menu
I am creating a nested row with some form-group element in a bootstrap tab panel.
Unfortunately those form-groups are not vertically spaced correctly despite to the fact that form-group has a margin-bottom of 15px in bootstrap.css.
Can anybody suggest why and a solution?
Please have a look at the following fiddle to understand.
Thanks
509
form-group can be replaced with mb-3 , since it previously applied the property margin-bottom: 1rem which the mb-3 class will do by default as well. Form specific layout classes are dropped (source: Migration guide). form-row can be replaced with row in most instances.
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.
Form groups are used to wrap labels and form controls in a div to get optimum spacing between the label and the control. Therefore, use both form-group and input-group as required. Do wrap your label and input in a form-group tag.
Inline formsUse the .row-cols-* classes to create responsive horizontal layouts. By adding gutter modifier classes, we'll have gutters in horizontal and vertical directions. On narrow mobile viewports, the .col-12 helps stack the form controls and more.
I suggest you to use http://getbootstrap.com/css/#forms-horizontal
Take a look at DEMO
Markup
<div class="wrapper wrapper-content animated fadeInRight">
<div class="row">
<div class="col-lg-12">
<div class="ibox-content">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Tab1</a></li>
<li role="presentation"><a href="#properties" aria-controls="properties" role="tab" data-toggle="tab">Tab2</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">
<div class="row">
<div class="col-md-6">
<form class="form-horizontal">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Field</label>
<div class="col-sm-10">
<input type="text" class="form-control" placeholder="Value">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Field</label>
<div class="col-sm-10">
<input type="text" class="form-control" placeholder="Value">
</div>
</div>
</form>
</div>
<div class="col-md-6">
<form class="form-horizontal">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Field</label>
<div class="col-sm-10">
<input type="text" class="form-control" placeholder="Value">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Field</label>
<div class="col-sm-10">
<input type="text" class="form-control" placeholder="Value">
</div>
</div>
</form>
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="properties">
<div class="row">
<div class="col-md-12">
<input type="hidden" id="hiddenJson" value="@ViewBag.Json">
<div class="well" style="min-height: 190px;">some data</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Explanation. All col-* classes have float property. All float elements have no height in css, so their parents can't get height value, height: auto doesn't work.
All you need is to wrap forms correctly. Remember, you always should use .row to parent and .col-* to child.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="wrapper wrapper-content animated fadeInRight">
<div class="row">
<div class="col-lg-12">
<div class="ibox-content">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Tab1</a></li>
<li role="presentation"><a href="#properties" aria-controls="properties" role="tab" data-toggle="tab">Tab2</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<div class="row">
<label class="col-md-3 control-label">field 1</label>
<div class="col-md-9">
<input class="form-control" type="text" value="value field 1" disabled="">
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<label class="col-md-3 control-label">field 2</label>
<div class="col-md-9">
<input class="form-control" type="text" value="value field 2" disabled="">
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<div class="row">
<label class="col-md-3 control-label">field 3</label>
<div class="col-md-9">
<input class="form-control" type="text" value="value field 3" disabled="">
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<label class="col-md-3 control-label">field 4</label>
<div class="col-md-9">
<input class="form-control" type="text" value="value field 4" disabled="">
</div>
</div>
</div>
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="properties">
<div class="row">
<div class="col-md-12">
<input type="hidden" id="hiddenJson" value="@ViewBag.Json">
<div class="well" style="min-height: 190px;">some data</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>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
