Form Layout in a Panel using Bootstrap

Question

I am trying to layout a form in a panel and have a lot of trouble with the formatting.

I don't seem to be able to put a line break between the Save button and the E-mail label. I have tried moving it down using <p> tags. I have tried using form-inline and form-horizontal but only makes things worse.

Alternatively I would like to place the Save button directly next to the textbox but again can't seem to achieve this.

A jsfiddle for an example https://jsfiddle.net/omyuzuu3/.

<div class="col-sm-4" id="leftCol">
    <div class="panel panel-default">
        <div class="panel-body">
            <strong>Account Details</strong><p>
            <hr>
            <form class="form"  method="post" >
              <div class="form-group">
                <label for="exampleInputName2">Username</label><p>
                <input name="txtUsername" type="text" class="form-control" placeholder="<?php  echo $user->loadUser()->username; ?>">           
              </div>

              <div class="form-group">
                <button type="submit" name="btnSaveUsername" class="btn btn-primary btn-sm pull-right">Save</button>
                <p>
              </div>

                <div class="form-group">
                <p>
                <label for="exampleInputName2">E-mail</label><p>
                <input name="txtEmail"  type="text" class="form-control" placeholder="<?php  echo $user->loadUser()->email; ?>">

              </div>

              <div class="form-group">
              <button type="submit" name="btnSaveEmail" class="btn btn-primary btn-sm pull-right">Save</button>
              </div>

              </form>   
        </div>
    </div>
</div>

score 1 · Accepted Answer · answered Sep 16 '16 at 15:31

you use float:right on the save button.

Float element is out of the normal flow, so its container's height does not account for the floating element

screenshot: https://i.stack.imgur.com/Rvt73.png

Add the clearfix property to floating element's container would fix the issue

screenshot: https://i.stack.imgur.com/PUhTp.png

Bootstrap already contains .clearfix class for adding clearfix css properties

What is clearfix ?

Form Layout in a Panel using Bootstrap

1 Answers1