title: Selecting multiple buttons in a form using Bootstrap
body: <p>I have a set of buttons that form a selection as part of my form. </p>
  
  <p>The code is below:</p>
  
  <pre><code>&lt;div class="form-group"&gt;
      &lt;div&gt;
          &lt;h4&gt;Extras&lt;/h4&gt;
      &lt;/div&gt;
      &lt;div class="radio-inline"&gt;               
           &lt;input type="button" class="btn btn-default inline" name="extra" value="Garden" &gt; 
           &lt;input type="button" class="btn btn-default inline" name="extra" value="Balcony"&gt;  
           &lt;input type="button" class="btn btn-default inline" name="extra" value="Parking"&gt;  
      &lt;/div&gt;  
  &lt;/div&gt;
  </code></pre>
  
  <p>However, I want to make the options not mutually exclusive i.e. you can select both 'Garden' and 'Balcony' - and I'd like to retain the button styling. </p>
  
  <p>Can anyone help with this?</p>
  
  <p>EDIT: Ok - got something weird going on now - Got this code. </p>
  
  <pre><code>&lt;div class="btn-group" data-toggle="buttons"&gt;
                        &lt;label class="btn btn-default"&gt;
                          &lt;input type="checkbox" name="garden" checked=""&gt; Garden
                        &lt;/label&gt;
                        &lt;label class="btn btn-default"&gt;
                          &lt;input type="checkbox"&gt; Balcony
                        &lt;/label&gt;
                        &lt;label class="btn btn-default"&gt;
                          &lt;input type="checkbox"&gt; Parking
                        &lt;/label&gt;
                      &lt;/div&gt;
  </code></pre>
  
  <p>When I use bootply the multiple selection user feature works great - when I add it to my page - its not working - does anyone have any idea why it may be? Below is the whole page</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-md-12"&gt;&lt;h2&gt;This is the header&lt;/h2&gt;&lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="row"&gt;
          &lt;div class="col-md-8"&gt;
              &lt;h2&gt;Hello world!&lt;/h2&gt;
              &lt;form d="multiform" role="form" action="listing.php" method="post" enctype="multipart/form-data"&gt;
                  &lt;div&gt;&lt;h4&gt;Listing Type&lt;/h4&gt;&lt;/div&gt;
  
                  &lt;div class="radio"&gt;                          
                       &lt;input type="button" class="btn btn-default" value="For Sale" &gt; 
                       &lt;input type="button" class="btn btn-default inline" name="list_type" value="For Rent"&gt;  
                       &lt;input type="button" class="btn btn-default inline" name="list_type" value="Flat Share"&gt;  
                  &lt;/div&gt;                      
                  &lt;div class="form-group"&gt;
                      &lt;label for="text"&gt;Title&lt;/label&gt;
                          &lt;input class= "form-control" type="text" name="text"&gt;
                  &lt;/div&gt;
  
                  &lt;div class="form-group"&gt;
                  &lt;label for="desc"&gt;Description&lt;/label&gt;
                  &lt;textarea class= "form-control" name="desc" rows="5"&gt;&lt;/textarea&gt;
                  &lt;/div&gt;
  
  
          &lt;!nested columns in the first one!&gt;
              &lt;div class="col-md-6"&gt; 
  
                       &lt;div class="form-group"&gt;
                       &lt;label for="total_beds"&gt;Total Bedrooms&lt;/label&gt;
                           &lt;select class="form-control" name="total_beds"&gt;
                                &lt;option&gt;Total Bedrooms&lt;/option&gt;
                                &lt;option&gt;1&lt;/option&gt;
                                &lt;option&gt;2&lt;/option&gt;
                                &lt;option&gt;3&lt;/option&gt;
                                &lt;option&gt;4&lt;/option&gt;
                                &lt;option&gt;5&lt;/option&gt;
                            &lt;/select&gt;
                        &lt;/div&gt;
  
  
                           &lt;div class="form-group"&gt;
                       &lt;label for="pets"&gt;Pets&lt;/label&gt;
                           &lt;select class="form-control" name="pets"&gt;
                                &lt;option&gt;Pets OK?&lt;/option&gt;
                                &lt;option&gt;Yes&lt;/option&gt;
                                &lt;option&gt;No&lt;/option&gt;
  
                            &lt;/select&gt;
                        &lt;/div&gt;
  
  
                      &lt;p&gt;This is another p&lt;/p&gt;
              &lt;/div&gt;
              &lt;div class="col-md-6"&gt;
                          &lt;div class="form-group"&gt;
                          &lt;label for="postcode"&gt;Postcode (for Maps)&lt;/label&gt;
                          &lt;input type="text" class="form-control" name="postcode" placeholder="Post Code"&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="col-md-12"&gt;
  
                  &lt;div class="form-group"&gt;
                      &lt;div&gt;&lt;h4&gt;Extras&lt;/h4&gt;
                          &lt;div class="checkbox"&gt;               
                               &lt;input type="button" class="btn btn-default inline" name="extra" value="Garden" &gt; 
                               &lt;input type="button" class="btn btn-default inline" name="extra" value="Balcony"&gt;  
                               &lt;input type="button" class="btn btn-default inline" name="extra" value="Parking"&gt;  
                      &lt;/div&gt;  
                  &lt;/div&gt;
  
                      &lt;div class="btn-group" data-toggle="buttons"&gt;
                        &lt;label class="btn btn-default"&gt;
                          &lt;input type="checkbox" name="garden" checked=""&gt; Garden
                        &lt;/label&gt;
                        &lt;label class="btn btn-default"&gt;
                          &lt;input type="checkbox"&gt; Balcony
                        &lt;/label&gt;
                        &lt;label class="btn btn-default"&gt;
                          &lt;input type="checkbox"&gt; Parking
                        &lt;/label&gt;
                      &lt;/div&gt;
              &lt;/div&gt;
              &lt;/form&gt;
  
  
  
          &lt;/div&gt;
  
          &lt;div class="col-md-4"&gt;Hello world Right!        &lt;/div&gt;
  
  
  &lt;/div&gt;&lt;! closes container!&gt;
  </code></pre>