In order to use Bootstrap in a smartform, one has to load the framework's artifacts from TIM. This can be done by adding data-bootstrap=“true” to the <form>-Tag.

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

Bootstrap devides the user's screen into rows and cols, which adapt to the current display's width and height. This is the reason why a structure of rows and cols is created in the first place and is filled with input-fields etc. afterwards. They get the class form-control, which causes them to adapt the width and height of their parent element. The screens width is 12 columns. A cell can be 1-12 columns wide, the desired width can be stated using integers from 1 to 12: class=“col-md-CHANGEME”. A recommended heuristic is to create a Div that will be used as a container first, then create rows and afterwards cells inside the rows, which are x columns wide. Should a more precise structure be required, one can create nested cells. Since a cell gets it's width from the parent element, a nested cell's 12 rows equal 100% of the parent cells width.
Some elements, e.g. textareas one can use the rows=“CHANGEME” parameter in order to modify the element's height. The parameter expects an integer.
If one needs to customize the design for certain screensizes, then elements can receive multiple widths. Bootstrap differentiates between xs, sm, md, lg. They mean extra small (e.G: smartphone), small (e.G: tablet), medium (e.G: monitor), and large (e.G: large monitor). A common strategy is to maximize a field's width on smartphones while keeping the label and the inputfield in one line on bigger screens. To achieve this a cell gets two widths: One with and one with

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>