Um eine Smartform mit Hilfe des Bootstrap-Frameworks zu gestalten, muss die in TIM gespeicherte Version zuerst geladen werden. Dazu muss im <form>-Tag der Smartform 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.
Sollte der Bedarf bestehen, das Design abhängig von der Größe des Bildschirms des Users zu verändern, können Zellen verschiedene Breiten mitgegeben werden. Dabei kann zwischen xs, sm, md, lg unterschieden werden. Diese stehen dabei für sehr klein (z.B: Smartphone), klein (z.B. Tablet), mittel (z.B. Bildschirm) und groß (z.B. großer Bildschirm). Eine gängige Strategie ist, dass Felder bei Smartphones die komplette Breite des Bildschirms ausnutzen, aber auf größeren Bildschirmen das Label mit dem dazugehörenden Feld auf einer Höhe ist. dafür werden den jeweiligen Zellen zusätzlich Breitenangaben mit xs statt md mitgegeben. Diese schreiben vor, dass bei einem kleinen Bildschirm die Zellen 12 Spalten, also 100% der verfügbaren Breite ausnutzen.
<div class="container">
<div class="row">
<div class="col-md-3 col-xs-12">
<label class="control-label" for="group">Warengruppe:</label>
</div>
<div class="col-md-9 col-xs-12">
<input type="text" name="productGroup" placeholder="Warengruppe" id="group" class="form-control" />
</div>
</div>
<div class="row">
<div class="col-md-3 col-xs-12">
<label class="control-label" for="comment">Kommentar:</label>
</div>
<div class="col-md-9 col-xs-12">
<textarea rows="3" id="comment" class="form-control"/>
</div>
</div>
</div>