Responsive bootstrap form not becoming responsive

Question

I am trying to build a form using bootstrap and need it to be responsive too. That is it needs to go from 4 colmn layout to 3 to 1 colmn layout deepending on width.

My code is located at http://jsfiddle.net/AzMz2/1/ updated with fluid STILL NOT WORKING

You will notice that initially I have this as 4 columns. However, when I resize, it doesn't become 3 column. I need this to become 3 column and then as widths decreases to 2 and then to 1 column (aka responsiveness). Also the columns need to align vertically and horizontally. That is also not happening. What am I doing wrong? I can not seem to figure out. Thanks in advance.

<form class="form-horizontal" name="submitDetails" acttion="#">
  <fieldset>
    <div class="control-group oneLine">
      <label class="control-label" for="custom1">1. Did you telephone us?</label>
      <div class="controls">
        <label class="radio span2" for="">
          <input name="custom1" id="custom1" value="Yes" checked="checked" type="radio">
          Yes </label>
        <label class="radio span2" for="">
          <input name="custom1" id="custom1" value="No" type="radio">
          No </label>
      </div>
    </div>
    <div class="control-group  oneLine">
      <label class="control-label" for="custom2">2. How did you hear about us?</label>
      <div class="controls">
        <div class="row-fluid">
          <label class="radio span3" for="">
            <input name="custom2" id="custom2" value="1" checked="checked" type="radio">
            Newspaper </label>
          <label class="radio span3" for="">
            <input name="custom2" id="custom2" value="2" type="radio">
            Billboard </label>
          <label class="radio span3" for="">
            <input name="custom2" id="custom2" value="3" type="radio">
            Yellow Pages </label>
          <label class="radio span3 " for="">
            <input name="custom2" id="custom2" value="4" type="radio">
            Radio </label>
        </div>
        <div class="row-fluid">
          <label class="radio span3" for="">
            <input name="custom2" id="custom2" value="5" type="radio">
            Google / Internet </label>
          <label class="radio span3" for="">
            <input name="custom2" id="custom2" value="23" type="radio">
            White Pages </label>
          <label class="radio span3" for="">
            <input name="custom2" id="custom2" value="7" type="radio">
            Referral </label>
          <label class="radio span3" for="">
            <input name="custom2" id="custom2" value="8" type="radio">
            Television </label>
        </div>
        <div class="row-fluid">
          <label class="radio span3" for="">
            <input name="custom2" id="custom2" value="9" type="radio">
            Familiar with area </label>
          <label class="radio span3" for="">
            <input name="custom2" id="custom2" value="10" type="radio">
            Magazine </label>
          <label class="radio span3" for="">
            <input name="custom2" id="custom2" value="21" type="radio">
            Catalogue </label>
          <label class="radio span3" for="">
            <input name="custom2" id="custom2" value="25" type="radio">
            Our website </label>
        </div>
        <div class="row-fluid">
          <label class="radio inline" for="">
            <input name="custom2" id="custom2" value="24" type="radio">
            1300 Number </label>
        </div>
      </div>
    </div>
<br/>
<div align="right"><button>SUBMIT</button></div>
  </fieldset>
</form>


    <style type="text/css">
body {
    background-color: #ffffff;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    max-width: 640px;
    margin: 0 auto;
}
.oneLine .controls {
    background-color: #d8d8d8;
    margin:0px;
    display:inline-block;
    width:100%;
}
.control-group.oneLine > label {

    float: none;
    text-align: left;
    width: 100%;
}
.error {
    color: #ff0000;
}
.radio.inline{
    margin-bottom:auto;
    vertical-align: auto;
}
</style>

Answer 1

<!DOCTYPE html>
<html>

<head>
  <title>Test</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>

<body>
  <div class="container-fluid">
    <form class="form-horizontal" name="submitDetails" acttion="#">
      <fieldset>
        <div class="control-group ">
          <label class="control-label" for="custom2">2. How did you hear about us?</label>
          <div class="controls">
            <div class="">
              <label class="radio col-xs-12 col-sm-6 col-md-4 col-lg-3">
                <input name="custom2" value="1" checked="checked" type="radio">Newspaper</label>
              <label class="radio col-xs-12 col-sm-6 col-md-4 col-lg-3">
                <input name="custom2" value="2" type="radio">Billboard</label>
              <label class="radio col-xs-12 col-sm-6 col-md-4 col-lg-3">
                <input name="custom2" value="3" type="radio">Yellow Pages</label>
              <label class="radio col-xs-12 col-sm-6 col-md-4 col-lg-3">
                <input name="custom2" value="4" type="radio">Radio</label>
              <label class="radio col-xs-12 col-sm-6 col-md-4 col-lg-3">
                <input name="custom2" value="5" type="radio">Google / Internet</label>
              <label class="radio col-xs-12 col-sm-6 col-md-4 col-lg-3">
                <input name="custom2" value="23" type="radio">White Pages</label>
              <label class="radio col-xs-12 col-sm-6 col-md-4 col-lg-3">
                <input name="custom2" value="7" type="radio">Referral</label>
              <label class="radio col-xs-12 col-sm-6 col-md-4 col-lg-3">
                <input name="custom2" value="8" type="radio">Television</label>
              <label class="radio col-xs-12 col-sm-6 col-md-4 col-lg-3">
                <input name="custom2" value="9" type="radio">Familiar with area</label>
              <label class="radio col-xs-12 col-sm-4 col-md-4 col-lg-3">
                <input name="custom2" value="10" type="radio">Magazine</label>
              <label class="radio col-xs-12 col-sm-6 col-md-4 col-lg-3">
                <input name="custom2" value="21" type="radio">Catalogue</label>
              <label class="radio col-xs-12 col-sm-4 col-md-4 col-lg-3">
                <input name="custom2" value="25" type="radio">Our website</label>
              <!-- Optional: clear the XS cols if their content doesn't match in height -->
              <div class="clearfix visible-sm"></div>
              <label class="radio col-xs-12 col-sm-4 col-md-4 col-lg-3">
                <input name="custom2" value="24" type="radio">1300 Number</label>
            </div>
          </div>
        </div>
        <div class="pull-right">
          <button>SUBMIT</button>
        </div>
      </fieldset>
    </form>
  </div>
</body>

</html>

Thanks. It seems to have worked in test... Code added for anyone to use in future

Answer 2

Based on the css you are using on your jsFiddle, and on your span2 / span3 classes, you are using Bootstrap 2 .

Unless you want to use custom CSS, this version of Bootstrap doesn't offer the option of moving from 4 to 3 to 2 to 1 column as the viewport decreases. Four columns will simply collapse to one column at viewports below 768px.

Have you considered using Bootstrap 3?

It has replaced the old .spanX classes with new options like .col-sm-X and .col-md-Y which will let you do what you describe. See http://getbootstrap.com/css/#grid for full details.

Good luck!