Selecting multiple buttons in a form using Bootstrap

Question

I have a set of buttons that form a selection as part of my form.

The code is below:

<div class="form-group">
    <div>
        <h4>Extras</h4>
    </div>
    <div class="radio-inline">               
         <input type="button" class="btn btn-default inline" name="extra" value="Garden" > 
         <input type="button" class="btn btn-default inline" name="extra" value="Balcony">  
         <input type="button" class="btn btn-default inline" name="extra" value="Parking">  
    </div>  
</div>

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.

Can anyone help with this?

EDIT: Ok - got something weird going on now - Got this code.

<div class="btn-group" data-toggle="buttons">
                      <label class="btn btn-default">
                        <input type="checkbox" name="garden" checked=""> Garden
                      </label>
                      <label class="btn btn-default">
                        <input type="checkbox"> Balcony
                      </label>
                      <label class="btn btn-default">
                        <input type="checkbox"> Parking
                      </label>
                    </div>

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

<div class="container">
    <div class="row">
        <div class="col-md-12"><h2>This is the header</h2></div>
    </div>

    <div class="row">
        <div class="col-md-8">
            <h2>Hello world!</h2>
            <form d="multiform" role="form" action="listing.php" method="post" enctype="multipart/form-data">
                <div><h4>Listing Type</h4></div>

                <div class="radio">                          
                     <input type="button" class="btn btn-default" value="For Sale" > 
                     <input type="button" class="btn btn-default inline" name="list_type" value="For Rent">  
                     <input type="button" class="btn btn-default inline" name="list_type" value="Flat Share">  
                </div>                      
                <div class="form-group">
                    <label for="text">Title</label>
                        <input class= "form-control" type="text" name="text">
                </div>

                <div class="form-group">
                <label for="desc">Description</label>
                <textarea class= "form-control" name="desc" rows="5"></textarea>
                </div>


        <!nested columns in the first one!>
            <div class="col-md-6"> 

                     <div class="form-group">
                     <label for="total_beds">Total Bedrooms</label>
                         <select class="form-control" name="total_beds">
                              <option>Total Bedrooms</option>
                              <option>1</option>
                              <option>2</option>
                              <option>3</option>
                              <option>4</option>
                              <option>5</option>
                          </select>
                      </div>


                         <div class="form-group">
                     <label for="pets">Pets</label>
                         <select class="form-control" name="pets">
                              <option>Pets OK?</option>
                              <option>Yes</option>
                              <option>No</option>

                          </select>
                      </div>


                    <p>This is another p</p>
            </div>
            <div class="col-md-6">
                        <div class="form-group">
                        <label for="postcode">Postcode (for Maps)</label>
                        <input type="text" class="form-control" name="postcode" placeholder="Post Code">
                </div>
            </div>
            <div class="col-md-12">

                <div class="form-group">
                    <div><h4>Extras</h4>
                        <div class="checkbox">               
                             <input type="button" class="btn btn-default inline" name="extra" value="Garden" > 
                             <input type="button" class="btn btn-default inline" name="extra" value="Balcony">  
                             <input type="button" class="btn btn-default inline" name="extra" value="Parking">  
                    </div>  
                </div>

                    <div class="btn-group" data-toggle="buttons">
                      <label class="btn btn-default">
                        <input type="checkbox" name="garden" checked=""> Garden
                      </label>
                      <label class="btn btn-default">
                        <input type="checkbox"> Balcony
                      </label>
                      <label class="btn btn-default">
                        <input type="checkbox"> Parking
                      </label>
                    </div>
            </div>
            </form>



        </div>

        <div class="col-md-4">Hello world Right!        </div>


</div><! closes container!>

Answer 1

See the JavaScript buttons section of the Bootstrap documentation, and look at checkbox buttons:

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="checkbox" checked> Option 1 (pre-checked)
  </label>
  <label class="btn btn-primary">
    <input type="checkbox"> Option 2
  </label>
  <label class="btn btn-primary">
    <input type="checkbox"> Option 3
  </label>
</div>