Padding missing on Bootstrap rows - html

Question

Would someone please tell me what is wrong with this?
.container {
margin-top: 10px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="panel panel-primary">
<div id="panel-head" class="panel-heading">
Edit Widget
</div>
<div class="panel-body">
<div class="row"><label for="title" class="col-sm-1 control-label">Title</label>
<div class="col-sm-5"><input type="text" id="title" required="required" class="form-control"></div>
<label for="widget_type_id" class="col-sm-1 control-label">Widget Type</label>
<div class="col-sm-5"><select id="widget_type_id" class="form-control">
<option disabled="disabled" value="">Please select one</option>
<option value="1">
2D column
</option>
<option value="2">
Multi-series 2D column
</option>
<option value="3">
Multi-series 3D column and line
</option>
<option value="4">
Gauge
</option>
<option value="5">
Datatable
</option>
<option value="6">
Counter
</option>
</select></div>
</div>
<div class="row">
<label for="link" class="col-sm-1 control-label">Link</label>
<div class="col-sm-5">
<input type="text" id="link" class="form-control">
</div>
<label for="font_size" class="col-sm-1 control-label">Font Size</label>
<div class="col-sm-2">
<input type="text" id="font_size" class="form-control">
</div>
</div>
<div class="row">
<label for="caption" class="col-sm-2 control-label">caption</label>
<div class="col-sm-4"><input type="text" id="caption" class="form-control"></div>
</div>
<div class="row">
<label for="subcaption" class="col-sm-2 control-label">subcaption</label>
<div class="col-sm-4">
<input type="text" id="subcaption" class="form-control">
</div>
</div>
<div class="row">
<label for="yaxisname" class="col-sm-2 control-label">yaxisname</label>
<div class="col-sm-4"><input type="text" id="yaxisname" class="form-control"></div>
</div>
</div>
</div>
There is not any padding between the caption, subcaption and yaxisname fields.

Answer 1

Give form-group instead of row and add <form class="form-horizontal editform">.
.container {
margin-top: 10px;
}
.editform.form-horizontal .control-label {
text-align: left;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="panel panel-primary">
<div id="panel-head" class="panel-heading">
Edit Widget
</div>
<div class="panel-body">
<form class="form-horizontal editform">
<div class="form-group"><label for="title" class="col-sm-1 control-label">Title</label>
<div class="col-sm-5"><input type="text" id="title" required="required" class="form-control"></div>
<label for="widget_type_id" class="col-sm-1 control-label">Widget Type</label>
<div class="col-sm-5"><select id="widget_type_id" class="form-control">
<option disabled="disabled" value="">Please select one</option>
<option value="1">
2D column
</option>
<option value="2">
Multi-series 2D column
</option>
<option value="3">
Multi-series 3D column and line
</option>
<option value="4">
Gauge
</option>
<option value="5">
Datatable
</option>
<option value="6">
Counter
</option>
</select></div>
</div>
<div class="form-group">
<label for="link" class="col-sm-1 control-label">Link</label>
<div class="col-sm-5">
<input type="text" id="link" class="form-control">
</div>
<label for="font_size" class="col-sm-1 control-label">Font Size</label>
<div class="col-sm-2">
<input type="text" id="font_size" class="form-control">
</div>
</div>
<div class="form-group">
<label for="caption" class="col-sm-2 control-label">caption</label>
<div class="col-sm-4"><input type="text" id="caption" class="form-control"></div>
</div>
<div class="form-group">
<label for="subcaption" class="col-sm-2 control-label">subcaption</label>
<div class="col-sm-4">
<input type="text" id="subcaption" class="form-control">
</div>
</div>
<div class="form-group">
<label for="yaxisname" class="col-sm-2 control-label">yaxisname</label>
<div class="col-sm-4"><input type="text" id="yaxisname" class="form-control"></div>
</div>
</form>
</div>
</div>

Answer 2

See this:
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
.container {
margin-top: 10px;
}
.form-group {
margin-bottom: 10px;
display: inline-block;
width: 100%;
}
<div class="panel panel-primary">
<div id="panel-head" class="panel-heading">
Edit Widget
</div>
<div class="panel-body">
<div class="row">
<div class="form-group">
<label for="title" class="col-sm-1 control-label">Title</label>
<div class="col-sm-5"><input type="text" id="title" required="required" class="form-control"></div>
<label for="widget_type_id" class="col-sm-1 control-label">Widget Type</label>
<div class="col-sm-5"><select id="widget_type_id" class="form-control">
<option disabled="disabled" value="">Please select one</option>
<option value="1">
2D column
</option>
<option value="2">
Multi-series 2D column
</option>
<option value="3">
Multi-series 3D column and line
</option>
<option value="4">
Gauge
</option>
<option value="5">
Datatable
</option>
<option value="6">
Counter
</option>
</select></div>
</div>
</div>
<div class="row">
<div class="form-group">
<label for="link" class="col-sm-1 control-label">Link</label>
<div class="col-sm-5">
<input type="text" id="link" class="form-control">
</div>
<label for="font_size" class="col-sm-1 control-label">Font Size</label>
<div class="col-sm-2">
<input type="text" id="font_size" class="form-control">
</div>
</div>
</div>
<div class="row">
<div class="form-group">
<label for="caption" class="col-sm-2 control-label">caption</label>
<div class="col-sm-4"><input type="text" id="caption" class="form-control"></div>
</div>
</div>
<div class="row">
<div class="form-group">
<label for="subcaption" class="col-sm-2 control-label">subcaption</label>
<div class="col-sm-4">
<input type="text" id="subcaption" class="form-control">
</div>
</div>
</div>
<div class="row">
<div class="form-group">
<label for="yaxisname" class="col-sm-2 control-label">yaxisname</label>
<div class="col-sm-4"><input type="text" id="yaxisname" class="form-control"></div>
</div>
</div>
</div>
</div>

Answer 3

This is example HTML for Form component with their default classes provided by Bootstrap.
<form>
<div class="form-group">
<label for="exampleFormControlInput1">Email address</label>
<input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name#example.com">
</div>
<div class="form-group">
<label for="exampleFormControlSelect1">Example select</label>
<select class="form-control" id="exampleFormControlSelect1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<div class="form-group">
<label for="exampleFormControlSelect2">Example multiple select</label>
<select multiple class="form-control" id="exampleFormControlSelect2">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<div class="form-group">
<label for="exampleFormControlTextarea1">Example textarea</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>
</form>
Ref. Link - http://getbootstrap.com/docs/4.0/components/forms/
Try to use their default classes and if you need any customization, add your custom classes to elements and override the styles.

Answer 4

You can do one thing, first of all you can use form tag as parent class and then apply margin top to all label, instead to container class. or your can give a class to label tag like .customlabel and than use this class and add property. for example.
form label{
float:left;
with:100%;
margin-top:10px;
}
.customlabel {
float:left;
with:100%;
margin-top:10px;
}