Tips for Bootstrap

The official docs at http://getbootstrap.com/ are quite good. The sections on CSS, Components, and Javascript are all useful. This is just a collection of quick pointers for starting out. When in doubt consult the real documentation.

Forms

Office has a whole lot of forms. This is the most basic way to write a form field:

<div class="form-group">
    <label>Field Name</label>
    <input type="text" name="field-name" class="form-control" />
</div>

The form-control class provides the rounded edges and general look/feel. The form-group puts some whitespace around the field. The input box will be as wide as the container and the label will be above the input box.

There are a couple ways to create a horizontal form. The first is using form-inline. This will auto size elements to fit. Line breaks will happen if lines get too long. Usually form-groups are kept together unless the group is itself extremely long.

<p>
<div class="form-inline">
    <div class="form-group">
        <label>Field 1</label>
        <input type="text" name="field1" class="form-control" />
    </div>
    <div class="form-group">
        <label>Field 2</label>
        <input type="text" name="field2" class="form-control" />
    </div>
</div>
</p>

Otherwise, you can use the grid system to lay out rows and columns precisely. Width classes can be applied directly to labels but not to inputs. Again form-group adds whitespace between rows. Using form-horizontal and control-label together right-aligns the labels.

<p>
    <div class="row form-group form-horizontal">
        <label class="col-sm-2 control-label">Field 1</label>
        <div class="col-sm-4">
            <input type="text" name="field1" class="form-control" />
        </div>
        <label class="col-sm-2 control-label">Field 2</label>
        <div class="col-sm-4">
            <input type="text" name="field2" class="form-control" />
        </div>
    </div>
    <div class="row form-group form-horizontal">
        <label class="col-sm-2 control-label">Field 3</label>
        <div class="col-sm-4">
            <input type="text" name="field3" class="form-control" />
        </div>
        <label class="col-sm-2 control-label">Field 4</label>
        <div class="col-sm-4">
            <input type="text" name="field4" class="form-control" />
        </div>
    </div>
</p>

You can attach text directly to an input using the input-group and input-group-addon classes. I find it works best if the input-group element has no other classes. Often that means an extra <div> layer but conflicting rules can cause really confusing output otherwise.

<div class="form-group">
    <div class="input-group">
        <span class="input-group-addon">$</span>
        <input type="text" name="money-field" class="form-control" />
    </div>
</div>
<div class="form-group">
    <div class="input-group">
        <input type="text" name="percent-field" class="form-control" />
        <span class="input-group-addon">%</span>
    </div>
</div>

Buttons are created using btn and btn-default classes. Button elements should always be given a type attribute. Examples:

<button type="submit" class="btn btn-default">Submit Button</button>
<button type="button" class="btn btn-default">Not Submit Button</button>
<a href="" class="btn btn-default">Button Shaped Link</a>

Miscellaneous form notes: the input-sm class makes a form control smaller; input-lg makes a form control bigger. Adding a required attribute to a form control is enforced by most browsers. A placeholder attribute puts in filler text until the input gets focus. If you need a bit of spacing/padding/margin on an element, wrapping it in paragraph tags (<p>) often works.

Tables

Bootstrap will zero out cellspacing and cellpadding on tables. With tables used for content-alignment the effect isn't always bad. On actual tabluar data, especially with borders, it looks pretty hideous. Adding the class table will apply Bootstrap's default styling. Adding table-bordered or table-striped does exactly what it sounds like. Boostrap really, really wants to make tables 100% width. That actually makes a fair amount of sense in terms of scaling with different screen sizes and usually is not worth fighting with.

Alerts

Bootstrap does contextual colors well. Adding alert classes generally makes elements colorful. Examples:

<div class="alert alert-success">The alert-success color</div>
<div class="alert alert-danger">The alert-danger color</div>

The FanniePage class provides a javascript function for adding alerts dynamically: showBootstrapAlert(selector, severity, message) where selector is a jQuery selector specifiying where the alert should go, severity is one of the color keywords such as success or danger, and message is the content of the alert.

showBootstrapAlert('div#some-id', 'success', 'The operation succeeded');

Browser-Specific Issues

Chrome, tables, and input groups Chrome makes odd content sizing choices with input groups in table cells. The input groups end up enormous and force all other inputs to ridiculous narrow sizes (Example). Since input groups in CORE are almost always short numeric values, providing width hints is an OK compromise.

<td class="col-sm-1">
    <div class="input-group">
        <span class="input-group-addon">$</span>
        <input type="text" name="money-field" 
            class="form-control price-field" />
    </div>
</td>

The price-field CSS class is provided by CORE rather than Bootstrap. This fixes the input at 5.5em which is appropriate for most numeric values and will still at least scale with browser font size choices. The col-sm-1 CSS class is also necessary. If it's omitted, Chrome will size the input as requested but leave the table cell gigantic with tons of extra white space. On most screen sizes col-sm-1 is actually too narrow. This seems to work by making the column as narrow as possible with the available CSS classes then letting the content force the column to expand to a more appropriate width.