Inputs are not inside the fieldset-CodePudding

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 >
  <div >
    <div >
      <form >
        <fieldset >
          <legend >User:</legend>
          <div >
            <div >
              <div >
                <label >Username:</label>
              </div>
              <div >
                <input type="text"  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

CodePudding user response：

Just remove the div > 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 >
  <div >
    <div >
      <form >
        <fieldset >
          <legend >User:</legend>
          <div >
            <div >
              <label >Username:</label>
            </div>
            <div >
              <input type="text"  id="username" name="username" placeholder="UserName" />
            </div>
          </div>
        </fieldset>
      </form>
    </div>
  </div>
</div>

CodePudding user response：

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 >
<fieldset >
<legend >User:</legend>
<div >
<div >
  <div >
    <div >
    <label >Username:</label>
    </div>
  </div>
<div >
<input type="text"  id="username" name="username" placeholder="UserName" />
</div>
</div>
</div>
</fieldset>
</form>

CodePudding user response：

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 >
  <div >
    <div >
      <form >
        <div >
          <div >
            <fieldset >
              <legend >User:</legend>
              <label >Username:</label>
              <input type="text"  id="username" name="username" placeholder="UserName" />
            </fieldset>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>

CodePudding user response：

.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 >
<div >
<div >
<form >
<fieldset >
<legend >User:</legend>
<div >
<div >
<div >
<label >Username:</label>
</div>
<div >
<input type="text"  id="username" name="username" placeholder="UserName" />
</div>
</div>
</div>
</fieldset>
</form>
</div>
</div>
</div>

CodePudding user response：

simple way is set margin left and right : 0 in .row class then add this code in (.form-horizontal .form-group)

margin: 0 auto 15px;

CodePudding user response：

#row-1 {
margin-right: 5px;
margin-left: 5px;

}

add it on your css. second row class which is like that <div id="row-1"> before tag <div >