SO form example

by marhaba

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css">
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js"></script>
<fieldset>
    <legend>Registration Form</legend>
    
      <form class="form-horizontal">
                            <div class="control-group">
                                <label class="control-label" for="inputSaving">What are you saving for?</label>
                                <div class="controls">
                                    <input class="span7 input-sm" type="text" id="inputSaving" placeholder="e.g. Swimming Lessons, Birthday Party, College Fund, etc.">
                                </div>
                            </div>
                            <div class="control-group">
                                <label class="control-label" for="description">Add a short description</label>
                                <div class="controls">
                                    <textarea class="span7" rows="8" placeholder="Describe in your own words the saving goal for this piggybank"  name="description"></textarea>
                                </div>
                            </div>
                            <div class="control-group">
                                <label class="control-label" for="categoryselect">Choose a Category</label>
                                <div class="controls">
                                    <select class="span4">
                                        <!-- Add some CSS and JS to make a placeholder value-->
                                        <option value="Kittens">Kittens</option>
                                        <option value="Keyboard Cat">Keyboard Cat</option>
                                        <option value="Twitter Bird">Twitter Bird</option>
                                    </select>
                                </div>
                           ...

CSS

.form-horizontal .control-label{
  /* text-align:right; */
  text-align:left;
  font-weight:bold;
}

.form-horizontal{
    padding-left:15px;
    
}