Inputs are not inside the fieldset - html

Question

I have used field set that contains a set of input and labels. these inputs and label are outside the field set borders. How can I place label and inputs inside field set border.
.legend-custom {
font-size: 1.2em !important;
font-weight: bold !important;
text-align: left !important;
width: auto;
padding: 0 10px;
border-bottom: none;
margin-top: -15px;
background-color: white;
}
.fieldset-custom {
border: 1px solid #eee !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-12 col-xs-12 col-lg-6">
<form class="form-horizontal">
<fieldset class="fieldset-custom form-group">
<legend class="legend-custom">User:</legend>
<div class="form-group">
<div class="row">
<div class="col-md-3 col-sm-12 col-xs-12 col-lg-3">
<label class="control-label">Username:</label>
</div>
<div class="col-md-9 col-sm-12 col-xs-12 col-lg-9">
<input type="text" class="form-control" id="username" name="username" placeholder="UserName" />
</div>
</div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
As you can see the input is outside the field set border. How can I fix this purely with HTML. I tried to setting the padding for the field set and works fine but at certain screen size the end of the label will be slightly hidden. So I wan to see first if can be resolved using just HTML. I am using bootstrap 3.3.7

Answer 1

Just remove the div class="row"> inside the form group perhaps? I gave it a lime border just to make it obvious.
.legend-custom {
font-size: 1.2em !important;
font-weight: bold !important;
text-align: left !important;
width: auto;
padding: 0 10px;
border-bottom: none;
margin-top: -15px;
background-color: white;
}
.fieldset-custom {
border: 1px solid lime !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-12 col-xs-12 col-lg-6">
<form class="form-horizontal">
<fieldset class="fieldset-custom form-group">
<legend class="legend-custom">User:</legend>
<div class="form-group">
<div class="col-md-3 col-sm-12 col-xs-12 col-lg-3">
<label class="control-label">Username:</label>
</div>
<div class="col-md-9 col-sm-12 col-xs-12 col-lg-9">
<input type="text" class="form-control" id="username" name="username" placeholder="UserName" />
</div>
</div>
</fieldset>
</form>
</div>
</div>
</div>

Answer 2

create a parent div where you have to put a div with the form-group class than in the children you have to put form-control for example in your label and input
<form class="form-horizontal">
<fieldset class="fieldset-custom form-group">
<legend class="form-control">User:</legend>
<div class="form-group">
<div class="form-group">
<div class="form-group">
<div class="col-md-3 col-sm-12 col-xs-12 col-lg-3">
<label class="control-control">Username:</label>
</div>
</div>
<div class="col-md-9 col-sm-12 col-xs-12 col-lg-9">
<input type="text" class="form-control" id="username" name="username" placeholder="UserName" />
</div>
</div>
</div>
</fieldset>
</form>

Answer 3

I'm not entirely sure what you're after, but part of your problem is that you're tangling rows and columns with form groups. The latter should really be inside the former. See getbootstrap.com/docs/3.3/css/#forms
Then, your layout seems overly complex. I've removed a few layers to simplify.
Also, you're applying too many column classes and in the wrong order. Bootstrap is mobile first and column classes cascade. Arrange them smallest to largest and don't duplicate any with the same numeric value.
.legend-custom {
font-size: 1.2em;
font-weight: bold;
}
.fieldset-custom {
border: 1px solid #eee;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class=" col-xs-12 col-md-6">
<form class="form-horizontal">
<div class="row form-group">
<div class="col-xs-12 col-md-3">
<fieldset class="fieldset-custom">
<legend class="legend-custom">User:</legend>
<label class="control-label">Username:</label>
<input type="text" class="form-control" id="username" name="username" placeholder="UserName" />
</fieldset>
</div>
</div>
</form>
</div>
</div>
</div>

Answer 4

.legend-custom {
font-size: 1.2em !important;
font-weight: bold !important;
text-align: left !important;
width: auto;
padding: 0 10px;
border-bottom: none;
margin-top: 15px;
background-color: white;
}
.fieldset-custom {
border: 1px solid #eee !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-12 col-xs-12 col-lg-6">
<form class="form-horizontal">
<fieldset class="fieldset-custom form-group">
<legend class="legend-custom">User:</legend>
<div class="form-group">
<div class="row">
<div class="col-md-3 col-sm-12 col-xs-12 col-lg-3">
<label class="control-label">Username:</label>
</div>
<div class="col-md-9 col-sm-12 col-xs-12 col-lg-9">
<input type="text" class="form-control" id="username" name="username" placeholder="UserName" />
</div>
</div>
</div>
</fieldset>
</form>
</div>
</div>
</div>

Answer 5

#row-1 {
margin-right: 5px;
margin-left: 5px;
}
Add the above code to your css file.
Second row class which is like that <div class="row" id="row-1"> before tag <div class="form-group">