Margin between elements - html

Question

I can't seem to make the inputs have a margin between them. I though form-group was supposed to handle this but the margin is not working.
Why is not working and how do I fix this?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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="row">
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#command">Command</a></li>
<li><a data-toggle="tab" href="#volumes">Volumes</a></li>
<li><a data-toggle="tab" href="#networkTab">Network</a></li>
<li><a data-toggle="tab" href="#labels">Labels</a></li>
<li><a data-toggle="tab" href="#environmentTab">Environment Variables</a></li>
<li><a data-toggle="tab" href="#security">Security</a></li>
</ul>
<div class="tab-content tab-content-border" style="width: 100%">
<div id="command" class="tab-pane fade in active">
<div class="form-group">
<label for="commands" class="col-sm-2 control-label">Command</label>
<div class="col-sm-10">
<input name="commands" id="commands" class="form-control" type="text" />
</div>
</div>
<div class="form-group">
<label for="entryPoint" class="col-sm-2 control-label">Entry Point</label>
<div class="col-sm-10">
<input name="entryPoint" id="entryPoint" class="form-control" type="text" />
</div>
</div>
<div class="form-group">
<label for="workingDir" class="col-sm-2 control-label">Working
Directory</label>
<div class="col-sm-10">
<input name="workingDir" id="workingDir" class="form-control" type="text" />
</div>
</div>
<div class="form-group">
<label for="user" class="col-sm-2 control-label">User</label>
<div class="col-sm-10">
<input name="user" id="user" class="form-control" type="text" />
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Console</label>
<div class="col-sm-10">
<div class="col-sm-5">
<div class="radio radio-info">
<input name="console" id="it" class="form-control" type="radio" />
<label for="it">Interactive & TTY
<small>(-i -t)</small>
</label>
</div>
<div class="radio radio-info">
<input name="console" id="tty" class="form-control" type="radio" />
<label for="tty">TTY
<small>(-t)</small>
</label>
</div>
</div>
<div class="col-sm-5">
<div class="radio radio-info">
<input name="console" id="interactive" class="form-control" type="radio" />
<label for="interactive">Interactive
<small>(-i)</small>
</label>
</div>
<div class="radio radio-info">
<input name="console" id="none" class="form-control" type="radio" checked/>
<label for="none">None</label>
</div>
</div>
</div>
</div>
</div>

Answer 1

You could try adding a class to the form group div. In this case I've added the class "input-box".
<div class="form-group input-box">
<label for="entryPoint" class="col-sm-2 control-label">Entry
Point</label>
<div class="col-sm-10">
<input name="entryPoint" id="entryPoint" class="form-control"
type="text"/>
</div>
</div>
And for the CSS...
.input-box {
padding-bottom: 30px;
}
This should add a 30px gap between each input.

Answer 2

Check this code snippet. I have added a margin-bottom class to each input.
Also when you are adding a div tag with row, make sure you add a container before. It is a must to add otherwise content will overflow.
Hope this solves your question.
.margin-bottom {
margin-bottom: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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">
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#command">Command</a></li>
<li><a data-toggle="tab" href="#volumes">Volumes</a></li>
<li><a data-toggle="tab" href="#networkTab">Network</a></li>
<li><a data-toggle="tab" href="#labels">Labels</a></li>
<li><a data-toggle="tab" href="#environmentTab">Environment Variables</a></li>
<li><a data-toggle="tab" href="#security">Security</a></li>
</ul>
<div class="tab-content tab-content-border" style="width: 100%">
<div id="command" class="tab-pane fade in active">
<div class="form-group margin-bottom">
<label for="commands" class="col-sm-2 control-label">Command</label>
<div class="col-sm-10">
<input name="commands" id="commands" class="form-control margin-bottom" type="text" />
</div>
</div>
<div class="form-group">
<label for="entryPoint" class="col-sm-2 control-label">Entry Point</label>
<div class="col-sm-10">
<input name="entryPoint" id="entryPoint" class="form-control margin-bottom" type="text" />
</div>
</div>
<div class="form-group">
<label for="workingDir" class="col-sm-2 control-label">Working
Directory</label>
<div class="col-sm-10">
<input name="workingDir" id="workingDir" class="form-control margin-bottom" type="text" />
</div>
</div>
<div class="form-group">
<label for="user" class="col-sm-2 control-label">User</label>
<div class="col-sm-10">
<input name="user" id="user" class="form-control margin-bottom" type="text" />
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Console</label>
<div class="col-sm-10">
<div class="col-sm-5">
<div class="radio radio-info">
<input name="console" id="it" class="form-control margin-bottom" type="radio" />
<label for="it">Interactive & TTY
<small>(-i -t)</small>
</label>
</div>
<div class="radio radio-info">
<input name="console" id="tty" class="form-control" type="radio" />
<label for="tty">TTY
<small>(-t)</small>
</label>
</div>
</div>
<div class="col-sm-5">
<div class="radio radio-info">
<input name="console" id="interactive" class="form-control" type="radio" />
<label for="interactive">Interactive
<small>(-i)</small>
</label>
</div>
<div class="radio radio-info">
<input name="console" id="none" class="form-control" type="radio" checked/>
<label for="none">None</label>
</div>
</div>
</div>
</div>
</div>
</div>

Answer 3

You just need to add row class just go through this fiddle - https://fiddle.jshell.net/Bharadhwaj/3bfpnu94/1/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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="row">
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#command">Command</a></li>
<li><a data-toggle="tab" href="#volumes">Volumes</a></li>
<li><a data-toggle="tab" href="#networkTab">Network</a></li>
<li><a data-toggle="tab" href="#labels">Labels</a></li>
<li><a data-toggle="tab" href="#environmentTab">Environment Variables</a></li>
<li><a data-toggle="tab" href="#security">Security</a></li>
</ul>
<div class="tab-content tab-content-border" style="width: 100%">
<div id="command" class="tab-pane fade in active">
<div class="form-group row">
<label for="commands" class="col-sm-2 control-label">Command</label>
<div class="col-sm-10">
<input name="commands" id="commands" class="form-control" type="text" />
</div>
</div>
<div class="form-group row">
<label for="entryPoint" class="col-sm-2 control-label">Entry Point</label>
<div class="col-sm-10">
<input name="entryPoint" id="entryPoint" class="form-control" type="text" />
</div>
</div>
<div class="form-group row">
<label for="workingDir" class="col-sm-2 control-label">Working
Directory</label>
<div class="col-sm-10">
<input name="workingDir" id="workingDir" class="form-control" type="text" />
</div>
</div>
<div class="form-group">
<label for="user" class="col-sm-2 control-label">User</label>
<div class="col-sm-10">
<input name="user" id="user" class="form-control" type="text" />
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Console</label>
<div class="col-sm-10">
<div class="col-sm-5">
<div class="radio radio-info">
<input name="console" id="it" class="form-control" type="radio" />
<label for="it">Interactive & TTY
<small>(-i -t)</small>
</label>
</div>
<div class="radio radio-info">
<input name="console" id="tty" class="form-control" type="radio" />
<label for="tty">TTY
<small>(-t)</small>
</label>
</div>
</div>
<div class="col-sm-5">
<div class="radio radio-info">
<input name="console" id="interactive" class="form-control" type="radio" />
<label for="interactive">Interactive
<small>(-i)</small>
</label>
</div>
<div class="radio radio-info">
<input name="console" id="none" class="form-control" type="radio" checked/>
<label for="none">None</label>
</div>
</div>
</div>
</div>
</div>

Answer 4

#sdasdasd
Please go through this sample snippet:
<form>
<div class="form-group row">
<label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group row">
<label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
</form>
https://fiddle.jshell.net/Bharadhwaj/ckckkz66/