Inputs are not inside the fieldset

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

version 3.3.7 really? that is pretty old. When I see `!important` in CSS my first thought is "what is wrong?" since if CSS is done properly it should be rarely needed. — Mark Schultheiss, Jan 28 '22 at 15:57
By default `.form-horizontal .form-group` has negative margins `margin-right: -15px` and `margin-left: -15px`. Although it's highly recommended to work with updated Bootstrap version, the current structure/nested form-groups aren't well-structured, and that's part of your problem. **Quick & Dirty solution is removing those negative margins from `.form-horizontal .form-group`.** — Elharony, Jan 28 '22 at 16:02

score 0 · Answer 1 · answered Jan 28 '22 at 16:02

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>

You should copy the snippet demo down and make changes to demonstrate your solution. — isherwood, Jan 28 '22 at 16:03
You have thrice-nested `.form-group` elements. That isn't right. — isherwood, Jan 28 '22 at 16:03

score 0 · Accepted Answer · answered Jan 28 '22 at 16:11

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>

You have horizontal scroll. This is because columns must be nested in rows, not other columns. — isherwood, Jan 28 '22 at 16:12
@isherwood - true, but that was not the question asked however wrong that may be in the OP code. — Mark Schultheiss, Jan 28 '22 at 16:13
Yes that worked but don't we need to use row class each time we defines columns — Mohamed, Jan 28 '22 at 16:14
Yeah, you _do_. It's the Bootstrap way and you can see the ugly result here if you don't. See https://getbootstrap.com/docs/3.3/css/#grid. — isherwood, Jan 28 '22 at 16:14
This is the OTHER question noted in the comments but not the question: https://stackoverflow.com/q/22053195/125981 — Mark Schultheiss, Jan 28 '22 at 16:17

score 0 · Answer 3 · answered Jan 28 '22 at 16:13

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>

score 0 · Answer 4 · answered Jan 28 '22 at 16:19

.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>

Your answer should contain some explanation of your changes. Also, the Tidy button in the snippet editor is your friend. — isherwood, Jan 28 '22 at 17:07

score -1 · Answer 5 · edited Jan 29 '22 at 05:17

-1

#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">

edited Jan 29 '22 at 05:17

Mohammadreza Khedri

2,523
1
11
22

answered Jan 28 '22 at 16:34

jeevitha

1
3

Custom CSS for layout is rarely a good idea with the Bootstrap library. – isherwood Jan 28 '22 at 17:08

Inputs are not inside the fieldset

5 Answers5