Ejemplos de Formularios

Ejemplo Básico


<form role="form">
    <div class="form-group fg-line">
        <label for="exampleInputEmail1">Email address</label>
        <input type="email" class="form-control input-sm" id="exampleInputEmail1" placeholder="Enter email">
    </div>
    <div class="form-group fg-line">
        <label for="exampleInputPassword1">Password</label>
        <input type="password" class="form-control input-sm" id="exampleInputPassword1" placeholder="Password">
    </div>
    <div class="checkbox">
        <label>
            <input type="checkbox" value="">
            <i class="input-helper"></i>
            Don't forget to check me out
        </label>
    </div>

    <button type="submit" class="btn btn-primary btn-sm m-t-10">Submit</button>
</form>

Forma en Línea Agrega '.form-inline' a tu 'form' para alinear a la izquierda y controles en inline-block. Esto solo aplica a formas dentro de viewports de por lo menos 768px de ancho.


<form class="row" role="form">
    <div class="col-sm-3">
        <div class="form-group fg-line">
            <label class="sr-only" for="exampleInputEmail2">Email address</label>
            <input type="email" class="form-control input-sm" id="exampleInputEmail2" placeholder="Enter email">
        </div>
    </div>

    <div class="col-sm-3">
        <div class="form-group fg-line">
            <label class="sr-only" for="exampleInputPassword2">Password</label>
            <input type="password" class="form-control input-sm" id="exampleInputPassword2" placeholder="Password">
        </div>
    </div>

    <div class="col-sm-2">
        <div class="checkbox">
            <label>
                <input type="checkbox" value="">
                <i class="input-helper"></i>
                Remember me
            </label>
        </div>
    </div>

    <div class="col-sm-4">
        <button type="submit" class="btn btn-primary btn-sm m-t-5">Sign in</button>
    </div>
</form>

Forma Horizontal Utiliza el grid predefinido de las clases de Bootstrap para alinear las etiquetas y grupos de controles en un layout horizontal agregando '.form-horizontal' a la forma. Hacer esto cambia '.form-groups' para comportarse como grid rows, y por lo tanto no se necesita el '.row'.


<div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
        <div class="fg-line">
            <input type="email" class="form-control input-sm" id="inputEmail3" placeholder="Email">
        </div>
    </div>
</div>
<div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">

        <div class="fg-line">
            <input type="password" class="form-control input-sm" id="inputPassword3" placeholder="Password">
        </div>
    </div>
</div>
<div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
        <div class="checkbox">
            <label>
                <input type="checkbox" value="">
                <i class="input-helper"></i>
                Remember me
            </label>
        </div>
    </div>
</div>
<div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
        <button type="submit" class="btn btn-primary btn-sm">Sign in</button>
    </div>
</div>

Multi Columna


<div class="row">
    <div class="col-xs-3">
        <div class="fg-line form-group">
            <input type="text" class="form-control input-sm" placeholder=".col-xs-3">
        </div>
    </div>
    <div class="col-xs-3">
        <div class="fg-line form-group">
            <input type="text" class="form-control input-sm" placeholder=".col-xs-3">
        </div>
    </div>
    <div class="col-xs-3">
        <div class="fg-line form-group">
            <input type="text" class="form-control input-sm" placeholder=".col-xs-3">
        </div>
    </div>
    <div class="col-xs-3">
        <div class="fg-line form-group">
            <input type="text" class="form-control input-sm" placeholder=".col-xs-3">
        </div>
    </div>
    <div class="col-xs-4">
        <div class="fg-line form-group">
            <input type="text" class="form-control input-sm" placeholder=".col-xs-4">
        </div>
    </div>
    <div class="col-xs-4">
        <div class="fg-line form-group">
            <input type="text" class="form-control input-sm" placeholder=".col-xs-4">
        </div>
    </div>
    <div class="col-xs-4">
        <div class="fg-line form-group">
            <input type="text" class="form-control input-sm" placeholder=".col-xs-4">
        </div>
    </div>
    <div class="col-xs-6">
        <div class="fg-line form-group">
            <input type="text" class="form-control input-sm" placeholder=".col-xs-6">
        </div>
    </div>
    <div class="col-xs-6">
        <div class="fg-line form-group">
            <input type="text" class="form-control input-sm" placeholder=".col-xs-6">
        </div>
    </div>
    <div class="col-xs-12">
        <div class="fg-line form-group">
            <input type="text" class="form-control input-sm" placeholder=".col-xs-12">
        </div>
    </div>
</div>