Clever Geek Handbook

Loading fields in a column

I was wondering what I did 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 that padding is not taking effect for form fields. Can anyone tell me why this might be happening and how I can get my margins to sit inside the panel and not to the edge.

+3


source to share


2 answers


Your problem is that you have nested everything in a column. Each component in the column takes an equal width (as specified by you col-md-4

). I replaced your column with a string and all the contents of the container (which you should always 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 inside a container (fixed width) or liquid container (full width) for proper alignment and filling.

BOOTPLY

+5


source


Used form-group

. According to the bootstrap documentation:

Use Bootstrap's predefined grid classes to align labels and groups of format controls in a horizontal layout by adding to a form .form-horizontal

. Making changes .form-groups

behaves like grid lines, so there is no need for .row

.

But in turn, this means that you will need to add columns for the input fields: 



<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" role="form">
        <fieldset>
            <!-- Text input-->
            <div class="form-group">
                <div class="col-md-12">
                    <input id="subject" name="subject" type="text" placeholder="Subject" class="form-control input-md"> <span class="help-block">help</span> 
                </div>
            </div>
            <!-- Textarea -->
            <div class="form-group">
                <div class="col-md-12">
                    <textarea class="form-control" id="message" name="message">default text</textarea>
                </div>
            </div>
            <!-- submit button -->
            <div class="form-group">
                <div class="col-md-12">
                    <button id="singlebutton" name="singlebutton" class="btn btn-primary">Button</button>
                </div>
            </div>
        </fieldset>
      </form>
    </div>
</div>

See here http://www.bootply.com/rSLgYayGaO

0


source






More articles:


All Articles