Um eine Smartform mit Hilfe des Bootstrap-Frameworks zu gestalten, muss die in TIM gespeicherte Version erst geladen werden. Dazu muss im <form>-Tag data-bootstrap=„true“ eingetragen werden.

<form class="form-quickstart" data-bootstrap="true" validationMethod="validateQuickstart" initMethod="initQuickstart"> </form>

Bootstrap unterteilt den Bildschirm in Reihen (rows) und Spalten (cols), welche sich dynamisch an die jeweilige Bildschirmgröße des Anwenders anpassen. Deshalb wird bei der Smartform-Entwicklung mit Bootstrap zuerst eine Struktur aus rows und cols geschaffen, in die Anschließend Formularfelder abgelegt werden. Diese werden mit der Klasse form-control versehen, wodurch sich die Dimensionen des jeweiligen Feldes an sein Parent-Element anpassen. Die Breite des Bildschirms wird in 12 Spalten unterteilt. Eine Zelle kann von 1 bis 12 Spalten breit sein, die gewünschte Breite kann in der Klasse des Divs festgelegt werden als Zahl von 1-12: class=„col-md-ERSETZMICH“. Es wird empfohlen, ein formularübergreifendes Div als Container zu benutzen, darin Reihen (row) anzulegen in welchen man Zellen schafft, die x Spalten (col) breit sind. Sollte eine feinere Strukturierung notwendig sein, können Zellen in Zellen geschaffen werden. Falls dies passiert, bezieht sich die Spaltenanzahl der children-Zellen auf die breite der parent-Zelle. So hätte z.B. eine 12 Spalten breite child-Zelle 100% der Breite der parent-Zelle. Manche Elemente, z.B. Textareas können den Parameter rows=„ERSETZMICH“ erhalten. Die übergebene Zahl bestimmt dabei, über wie viele Reihen (row) sich die Höhe des Elements erstreckt.

<div class="container">
 <div class="row">
    <div class="col-md-3">
   <label class="control-label" for="group">Warengruppe:</label>
     </div>
     <div class="col-md-9">
         <input type="text" name="productGroup" placeholder="Warengruppe" id="group" class="form-control" />
     </div>
 </div>
 <div class="row">
     <div class="col-md-3">
        <label class="control-label" for="comment">Kommentar:</label>
    </div>
    <div class="col-md-9">
        <textarea rows="3" id="comment" class="form-control"/>
    </div>
 </div>
</div>