widgets


Modal

Modals are used to convey a short piece of information that is overlaid on top of the rest of the page.

Launch demo modal
a[href="#" data-toggle="modal" data-target="#myModal"]
  | Launch demo modal

.modal.fade#myModal[tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"]
  .modal-dialog
    .modal-content
      .modal-header
        button.close[type="button" data-dismiss="modal"]
          span[aria-hidden="true"]
            | ×
          span.sr-only
            | Close
        h4.modal-title#myModalLabel
          | Modal title
      .modal-body
        | ...
      .modal-footer
        button.btn.btn-default.pull-left[type="button" data-dismiss="modal"]
          | Close
        button.btn.btn-primary[type="button"]
          | Save changes

Progress Bar

Progress bars are used to show how much money borrowers have raised on Upstart. The .progress-bar class should have a style attribute that dynmically gives it a width.

$100 left$300 raised
span.pull-left
  | $100 left
span.pull-right
  | $300 raised
.progress
  .progress-bar[style="width: 50%"]