Bootstrap Summary

Bootstrap Layout

- A separate div for navbar class (container or container-fluid class)
- A separate top-level content div (container or container-fluid class)
- container-fluid makes the element take up the full width of the screen (visually the content is left aligned on all screen resolutions).
- container has a a fixed size for each screen resolution. Therefore, on larger resolutions the content appears horizontally centered.
- Within top-level content div, define a div with "row" class
- Each row has 12 equal size logical units
- Use divs to specify one more columns that fit within the 12 units (e.g. col-md-4 and col-md-8)
- Use col-offset to move the columns from their natural position (to create space between columns)
- Use pull/push to move columns without have to change the order in which divs are coded
- "row" can be nested within a column with its own 12 units
- Can define multiple rows on page

Responsive Design - Automatic Sizing of Elements

- Columns will stack on smaller devices (for example, when using col-md-6 for two elements, those elements will stack on small screen sizes)
- To keep from stacking use col-sm-6 or  col-xs-6
- col-lg-6 will cause the columns to stack for all but large screens
- Hide a component on a device of particular size (e.g. to hide on small and extra small devices, use hidden-sm hidden-xs).
- Use visible-md to show on medium size device only. Example, <div class="jumbotron visible-lg visible-md"> to show on medium and large devices only.
- Say you have two divs with class="col-sm-10 col-md-6" and class="col-sm-2 col-md-6". On small devices the column size ratio will 10:2, on medium 1:1.
- We can size the buttons properly based on the screen resolution. Multiple sizes can be specified for a button so that they occupy proper number of columns. For example,
<div class="col-xs-5 col-sm-3 col-md-2 col-lg-1">
  <input type="submit" value="Submit" class="btn btn-success btn-block" />
</div>
Note: btn-block causes the button to occupy the entire column.

Styling

- Nav buttons, Pills, Breadcrumbs, Pagination (using lists). Can be stacked vertically.
- "alert" class to prominently display text
- "table" class to apply formatting to an HTML table. table table-condensed table-striped table-hover and several others. Can apply styles to rows.
- Turn a link a button into stylized button using btn btn-danger btn-primary btn-large,... classes.
- Button containing div with btn-group causes no space between the buttons
- Supports modal dialog box
- Override bootstrap styles in your own CSS file (use the same class name as in bootstrap, provide own formatting).
- Provides classes that apply formatting to HTML form elements
- Input groups allow you to combine controls (e.g. show the currency sign before an edit control)

Snippets

Button Group

div class btn-group pull-right

<div class="btn-group">
<a class="btn btn-default" href="url" data-toggle="tooltip" title="View transaction details"><span class="glyphicon glyphicon-info-sign"></span></a>
    <a class="btn btn-default" href="url" data-toggle="tooltip" title="Edit transaction"><span class="glyphicon glyphicon-pencil"></span></a>
</div>

Body

// so that the content is not pushed to corners
body {
  margin: 30px
}

Third-party Controls

• Date and Time Picker - bootstrap-datetimepicker (Smalot)
• Toggle Switch - bootstrap-switch
• Application Wizard - bootstrap-application-wizard
• Bootstrap Form Helpers
• Fuel UX (tree control)
• jQueryUI widgets (datepicker, autocomplete)
• Bootstrap typeahead.js and .css (autocomplete), hogan.js for templating

Data Binding

• Manual
• Knockout.js
• Angular.js