Bootstrap fields in a column

Question

I was wondering what I have done wrong here: http://www.bootply.com/bURS2tSeSU

<div class="col-md-4">
  <div class="panel panel-default">
    <div class="panel-heading">Contact Us</div>
        <div class="panel-body">
<form class="form-horizontal">
<fieldset>

<!-- Text input-->
<div class="form-group">
  <input id="subject" name="subject" type="text" placeholder="Subject" class="form-control input-md">
  <span class="help-block">help</span>  
</div>

<!-- Textarea -->
<div class="form-group">
    <textarea class="form-control" id="message" name="message">default text</textarea>
</div>
    <button id="singlebutton" name="singlebutton" class="btn btn-primary">Button</button>
   </fieldset>
</form>
</div>

 </div> 
   </div>

My panel-body should have padding but instead it seems like the padding isn't taking effect for the form fields. Can anyone tell me why this might be happening and how I can get my fields to sit within the panel-body and not right up to the edges.

Answer 1

Your problem is that you stuck everything into a column. Each component in a column take up equal width (specified by you as col-md-4). I replaced your column with a row, and wrapped everything by a container (which you always need to do).

Code

<div class="container">
<div class="row">
    <div class="panel panel-default">
        <div class="panel-heading">Contact Us</div>
        <div class="panel-body">
            <fieldset>
                <!-- Text input-->
                <div class="form-group">
                    <input id="subject" name="subject" type="text" placeholder="Subject" class="form-control input-md"> <span class="help-block">help</span> 
                </div>
                <!-- Textarea -->
                <div class="form-group">
                    <textarea class="form-control" id="message" name="message">default text</textarea>
                </div>
                <button id="singlebutton" name="singlebutton" class="btn btn-primary">Button</button>
            </fieldset>
        </div>
    </div>
</div>

Documentation:

Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.

BOOTPLY