Question 61340 in Twitter Bootstrap Question posted in

Inputs are not inside the fieldset-Twitter bootstrap

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

Tags:

5

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
  3. 0

    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>
    Login or Signup to reply.
  4. 0 
    .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>
    Login or Signup to reply.
  5. 0 
    #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">

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search