OneMoreQuestion OneMoreQuestion - 4 months ago 51
CSS Question

Form fields overflow Bootstrap form

I am playing around with Bootstrap grid framework in my simple form. For some reason the form fields seem to overflow the form border box. See image below.

enter image description here
This doesn't make sense because all my form field elements are inside the form. My html is here. I have made sure to import Bootstrap css and Bootstrap js.

<div class="container">
<div class="row">
<div class="col-md-12">

<form class="col-md-8 form">
<h4 class="form-heading">A form</h4>

<div class="form-group">
<div class = "col-md-6">
<input type="text" name="input1" class="form-control"/>
</div>

<div class = "col-md-6">
<input type="text" name="input2" class="form-control"/>
</div>

<div class = "col-md-12">
<textarea name="terms" rows="8" class="form-control"></textarea>
</div>

<div class="col-md-12 text-center">
<button type="submit" class="btn btn-lg btn-primary">Submit</button>
</div>
</div>
</form>
</div>
</div>
</div>


My css is here.

.form {
max-width: 100%;
border: solid black;
padding-top: 20px;
margin-top: 30px;
float: none;
}

.form .form-heading {
text-align: center;
}

.form .form-control {
position: relative;
}

input {
max-width: 100%;
max-height: 100%;
}


Please share any ideas on a fix.

Answer

This is caused by the columns float which is typically remedied by using rows as far as Bootstrap goes. You are nesting columns while only using a single row for all these levels of columns you have. I would either use additional rows or clear the float yourself with CSS. And you probably don't need the outer most column.

And this doesn't make much sense either: <form class="col-md-8 form">. You form class has its width set at 100% but your using a column that is set at width 66.66666667% by default. And form-control has a default width of 100% also.

Documentation

Working Example:

.form {
  border: solid black;
  margin: 20px 0;
  padding: 20px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-md-8 col-md-offset-2">
      <form class="form">

        <h4 class="form-heading text-center">A Form</h4>

        <div class="row">
          <div class="col-md-6">
            <div class="form-group">
              <input type="text" name="input1" class="form-control" />
            </div>
          </div>

          <div class="col-md-6">
            <div class="form-group">
              <input type="text" name="input2" class="form-control" />
            </div>
          </div>
        </div>

        <div class="row">
          <div class="col-md-12">
            <div class="form-group">
              <textarea name="terms" rows="8" class="form-control"></textarea>
            </div>
          </div>
        </div>

        <div class="row">
          <div class="col-md-12 text-center">
            <div class="form-group">
              <button type="submit" class="btn btn-lg btn-primary">Submit</button>
            </div>
          </div>
        </div>

      </form>
    </div>
  </div>
</div>

Comments