Selecting multiple buttons in a form using Bootstrap - html

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>