CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3
Mark
Mark

Reputation: 4960

Force Bootstrap form columns to wrap

I am trying to create a simple Bootstrap form with two columns so when I resize Browser the text fields will keep their widths and columns will wrap. Here is my code:

<form>
    <div class="form-group col-xs-6">
        <label for="name" class="control-label">Line Height</label>
        <input type="email" value='' class="form-control" id="name" placeholder="Ime" />
    </div>
    <div class="form-group col-xs-6">
        <label for="name" class="control-label">Padding Top</label>
        <input type="email" value='' class="form-control" id="name" placeholder="Ime" />
    </div>
</form>

And Fiddle

But instead, when I resize, inputs get smaller and no column wrapping occurs. What am I doing wrong?

Edit. Added a picture: enter image description here

Upvotes: 0

Views: 3103

Answers (1)

dippas
dippas

Reputation: 60573

you are using col-xs-6, which means will always have 2 columns in the smallest breakpoint of Bootstrap (xs), because col-*-6 means 50% width, therefore not wrapping.

To wrap in the smallest breakpoit, you need to use instead col-xs-12 col-sm-6 or col-xs-12 col-md-6, which means it will be 100% width in col-xs and 50% in col-sm and up or col-md or up, depending on when you which break-point you want the columns to wrap.

As mentioned by @banzay in comments below, there is no need to use col-xs-12 along with larger breakpoints, so I've updated the snippet below.

More info on Twitter Bootstrap grid options here

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<form>
  <div class="form-group col-sm-6">
    <label for="name" class="control-label">Line Height</label>
    <input type="email" value='' class="form-control" id="name" placeholder="Ime" />
  </div>
  <div class="form-group col-sm-6">
    <label for="name" class="control-label">Padding Top</label>
    <input type="email" value='' class="form-control" id="name" placeholder="Ime" />
  </div>
</form>

Upvotes: 3

Related Questions