Lets be honest, I’m a coder not a designer. And like many coders who are not designers, I use Twitter Bootstrap a lot. It’s a great framework that works really well, but sometimes I get frustrated by the amount of mark-up I end up adding to style my forms.

Take the following login form example:


<div class="container">

<h2>A simple login form</h2>

<form>

    <div class="form-group">
        <label for="username">Username</label>
        <input type="text" 
               class="form-control" 
               id="username"/>
        <p class="help-block">
            Hint: it might be your email address</p>
    </div>

    <div class="form-group">
        <label for="password">Password</label>
        <input type="password" 
               class="form-control" 
               id="password"/>
    </div>

    <div>
        <label><input type="checkbox"/> Remember me</label>
    </div>

    <button type="submit" 
            class="btn btn-default">Login</button>

</form>

</div>

Continue reading