Abbiamo già parlato in passato di Bootstrap e di quanto faciliti la creazione di layout.
L'esempio di oggi consiste nel creare la classica form, che tipicamente in passato veniva ricreata attraverso delle tabelle, utilizzando solo stili:

<form class="form-horizontal" role="form">
  <div class="form-group">
    <label for="firstName" class="col-sm-2 control-label">Nome</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="firstName" placeholder="Nome">
    </div>
  </div>
  
  <div class="form-group">
    <label for="lastName" class="col-sm-2 control-label">Cognome</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="lastName" placeholder="Cognome">
    </div>
  </div>
  
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Conferma</button>
    </div>
  </div>
</form>

Il tutto si basa sulla griglia di Bootstrap e sull'uso della classe form-group, che provvede a raggruppare i contenuti. Di default, la label apparità sulla sinistra, mentre la form a destra. Grazie al supporto per il respondive design di bootstrap, in automatico la label e il campo saranno allineati uno sotto l'altro in caso di mancanza di spazio, ottimizzando l'esperienza d'uso su un device mobile.

Il risultato ottenuto è disponibile in questa immagine: