Bootstrap Fluid Form - Approach 2

by kpowz

HTML

<div class="container">
    <form>
        <div class="controls-row">
            <div class="control-group">
                <label for="first-name" class="control-label">First Name:</label>
                <div class="controls">
                    <input type="text" id="first-name" name="FirstName" />
                </div>                
            </div>
            <div class="control-group">
                <label for="middle-initial" class="control-label">M.I.:</label>
                <div class="controls">
                    <input type="text" id="middle-initial" name="MiddleInitial" class="input-mini" />
                </div>                
            </div>
            <div class="control-group">
                <label for="last-name" class="control-label">Last Name:</label>
                <div class="controls">
                    <input type="text" id="last-name" name="LastName" />
                </div>                
            </div>
        </div>
        <div class="control-row">
             <div class="control-group">
                <label for="ssn" class="control-label">Social Security Number:</label>
                <div class="controls">
                    <input type="text" id="ssn" name="SocialSecurityNumber" />
                </div>                
            </div>
            <div class="control-group">
                <label for="dob" class="control-label">Date of Birth:</label>
                <div class="controls input-append">
                    <input type="text" id="dob" name="DateOfBirth" />
                    <a href="#" class="btn btn-small"><i class="icon-calendar"></i></a>
                </div>
            </div>           
        </div>
    </form> 
</diV>

CSS

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');

    .control-group {
        display: inline-block;
        vertical-align: top;
    }