Bootstrap 3 checkbox doesn't align with form label - html

Question

<div class="form-group">
<label for="property_feature" class="col-md-4 col-sm-4 control-label">ফিচার</label>
<div class="col-md-8 col-sm-8 col-md-offset-4">
<label class="checkbox-inline">
<input type="checkbox" value="1" id="property_furnished" name="feature">আসবাবপত্রে সজ্জিত
</label>
<label class="checkbox-inline">
<input type="checkbox" value="2" id="property_sublet" name="feature">সাবলেট
</label>
<label class="checkbox-inline">
<input type="checkbox" value="3" id="property_mess" name="feature">মেস
</label>
</div>
</div>
The above code gives me following output. But I want everything to be displayed as inline. How can I do this?

Answer 1

A more bootstrap focused approach would to be to restructure your code like such:
<form class="form-inline">
<div class="col-md-8 col-sm-8 col-md-offset-4">
<div class="form-group">
<label for="property_feature">ফিচার</label>
</div>
<div class="form-group">
<label for="property_furnished">আসবাবপত্রে সজ্জিত</label>
<input value="1" id="property_furnished" name="feature" type="checkbox">
</div>
<div class="form-group">
<label for="property_sublet">সাবলেট</label>
<input value="2" id="property_sublet" name="feature" type="checkbox">
</div>
<div class="form-group">
<label for="property_mess">মেস </label>
<input value="3" id="property_mess" name="feature" type="checkbox">
</div>
</div>
</form>
One of the main issues in your code is that your first label is OUTSIDE of your div class that sets the column position. So you aren't including it in the col-md-offset-4 that you specify.
Here's a bootply http://www.bootply.com/ekh1Cpmeht
You will most likely want to adjust the spacing between the property_feature label and the property_furnished .

Answer 2

Use display: inline-block; because Div will break down to new line the checkbox.
.col-md-8.col-sm-8.col-md-offset-4 {
display: inline-block;
}
.col-md-4.col-sm-4.control-label {
display: inline-block;
}
Check Fiddle.