23 #Components Misc. Components

23.1 #Components.Badges Badges extended

Highlight new or unread items with badge.

Example
Inbox 42 
<a href="#">Inbox <span class="badge">42</span></a>

23.1.1 #Components.Badges.Contextual Contextual Badges

Use empty badges with contextual classes for color and meaningful icons:

Examples
Default styling
badge-success
green
badge-info
blue
badge-warning
yellow
badge-danger
red 
<i class="badge [modifier class]"></i>

23.2 #Components.Dropdowns Dropdowns extended

dropdown, dropdown-toggle, dropdown-menu, divider

Use JavaScript to toggle the is-open class on the dropdown container. See the Bootstrap documentation for instructions for using their script.

Example
Toggle menu 
<div class="dropdown">
  <a href="#" class="dropdown-toggle">Toggle menu</a>
  <ul class="dropdown-menu">
    <li><a href="#">One</a></li>
    <li><a href="#">Two</a></li>
    <li><a href="#">Three</a></li>
    <li class="divider"></li>
    <li><a href="#">Final</a></li>
  </ul>
</div>

23.2.1 #Components.Dropdowns.Header-Dropdown Header Dropdown

header-dropdown, header-dropdown-toggle, header-dropdown-heading, header-dropdown-menu

Add JavaScript to toggle the is-open class when the header-dropdown-toggle element is clicked.

Example
Reports
End of Day
...Any Menu Content Here... 
<div class="header-dropdown">
  <div class="header-dropdown-toggle">Reports</div>
  <div class="header-dropdown-heading">End of Day</div>
  <div class="header-dropdown-menu">
    ...Any Menu Content Here...
  </div>
</div>

23.2.2 #Components.Dropdowns.Submenus Submenus extended

dropdown-submenu

Example
Toggle menu 
<div class="dropdown">
  <a href="#" class="dropdown-toggle">Toggle menu</a>
  <ul class="dropdown-menu">
    <li class="dropdown-submenu">
      <a href="#">
        View Settlement Reports for All Markets
      </a>
      <div class="dropdown-menu">
        <p>This is the submenu content</p>
      </div>
    </li>
    <li><a href="#">
      Daily and Historical Volume and Open Interest
    </a></li>
  </ul>
</div>

23.3 #Components.Folio Folio

folio, folio-menu, folio-pane

Use JavaScript to apply the is-active class to the current menu item and to swap out the contents of the .folio-pane.

Example
  • End of Day
  • Volumes and OI
  • Indices
  • Markers
  • Deliveries
  • Commodity Reports
  • Benchmark Administration
  • Other
  • Recently Viewed

Futures

US | Europe | Canada | Endex | IFED

Options

US | Europe | Canada | Endex | IFED

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque tempor euismod velit, quis mattis lacus sodales quis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed bibendum ultrices lectus, vel rutrum nisl elementum faucibus. Phasellus ut molestie lectus. Phasellus non porta lectus, eget bibendum ipsum. Morbi porta et erat vel semper. Cras ultrices arcu massa, at mollis justo sollicitudin at. Donec condimentum est ut elit tincidunt lacinia. Nam vel egestas libero. Cras euismod elementum massa, non lacinia dolor volutpat in. Aenean vitae viverra risus. Donec nec elementum lorem.

<div class="folio">
  <ul class="folio-menu">
    <li class="is-active">End of Day</li>
    <li>Volumes and OI</li>
    <li>Indices</li>
    <li>Markers</li>
    <li>Deliveries</li>
    <li>Commodity Reports</li>
    <li>Benchmark Administration</li>
    <li>Other</li>
    <li class="divider"></li>
    <li>Recently Viewed</li>
  </ul>
  <div class="folio-pane">
    <div class="container-fluid">
      <h3 class="subheader">Futures</h3>
      <p>
        <a href="#">US</a> |
        <a href="#">Europe</a> |
        <a href="#">Canada</a> |
        <a href="#">Endex</a> |
        <a href="#">IFED</a>
      </p>
      <h3 class="subheader">Options</h3>
      <p>
        <a href="#">US</a> |
        <a href="#">Europe</a> |
        <a href="#">Canada</a> |
        <a href="#">Endex</a> |
        <a href="#">IFED</a>
      </p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque tempor euismod velit, quis mattis lacus sodales quis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed bibendum ultrices lectus, vel rutrum nisl elementum faucibus. Phasellus ut molestie lectus. Phasellus non porta lectus, eget bibendum ipsum. Morbi porta et erat vel semper. Cras ultrices arcu massa, at mollis justo sollicitudin at. Donec condimentum est ut elit tincidunt lacinia. Nam vel egestas libero. Cras euismod elementum massa, non lacinia dolor volutpat in. Aenean vitae viverra risus. Donec nec elementum lorem.</p>
    </div>
  </div>
</div>

23.4 #Components.Labels Labels extended

label, label-*

Examples
Default styling
Label Link
label-primary
primary
Label Link
label-success
success
Label Link
label-info
info
Label Link
label-warning
warning
Label Link
label-danger
danger
Label Link 
<span class="label [modifier class]">Label</span>
<a href="#" class="label [modifier class]">Link</a>

23.5 #Components.Numbers Numbers extended

num

Helper classes for number formatting.

Example
123.456 
<span class="num">123.456</span>

23.5.1 #Components.Numbers.Colors Colors extended

num-colored, num-positive, num-negative

Examples
Default styling
123.456
num-positive
positive number
123.456
num-negative
negative number
123.456 
<span class="num num-colored [modifier class]">123.456</span>

23.5.2 #Components.Numbers.Units With Units extended deprecated

num-units, num-*

Deprecated: since 3.0.0

Examples
Default styling
123.456
num-dollar
Dollars
123.456
num-euro
Euros
123.456
num-pound
British pounds
123.456
num-percent
Percentage
123.456 
<span class="num num-unit [modifier class]">123.456</span>

23.6 #Components.Pagination Pagination extended

pagination, pagination-summary

Example
1–10 of about 190 results
<div class="pagination-summary">1&ndash;10 of about 190 results</div>
<ul class="pagination">
  <li class="is-disabled"><a href="#">Previous</a></li>
  <li class="is-active"><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
  <li class="is-disabled"><span>&hellip;</span></li>
  <li><a href="#">Next</a></li>
</ul>

23.6.1 #Components.Pagination.Pager Pager extended

pager

Example 
<ul class="pager">
  <li>1&ndash;10 of about 190 results</li>
  <li><a href="#">&lsaquo; Previous</a></li>
  <li><a href="#">Next &rsaquo;</a></li>
</ul>

23.7 #Components.Pullquote Pullquote extended

pull-quote

Highlight a short quote or snippet. Add an optional <cite> element within to cite the author or source.

Examples
Default styling
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent in odio leo. Sed viverra, ante nec aliquet imperdiet, risus eros vulputate enim, in semper lorem ligula et magna.
pull-quote-colored
Styles the pullquote with a branded blue color
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent in odio leo. Sed viverra, ante nec aliquet imperdiet, risus eros vulputate enim, in semper lorem ligula et magna. 
<div class="pull-quote [modifier class]">
  <q>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent in
    odio leo. Sed viverra, ante nec aliquet imperdiet, risus eros vulputate
    enim, in semper lorem ligula et magna.
  </q>
</div>
Example
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent in odio leo. Sed viverra, ante nec aliquet imperdiet, risus eros vulputate enim, in semper lorem ligula et magna. George Washington, Former president, USA
Show Markup
<div class="pull-quote">
  <q>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent in
    odio leo. Sed viverra, ante nec aliquet imperdiet, risus eros vulputate
    enim, in semper lorem ligula et magna.
  </q>
  <cite>George Washington, Former president, USA</cite>
</div>

23.8 #Components.Quotes Price Quotes

quote, quote-value, quote-change

Works inside a suggestions list.

Example
183.12
+0.75 (0.02%)
<div class="quote">
  <div class="quote-value">183.12</div>
  <div class="quote-change num num-colored num-positive">+0.75 (0.02%)</div>
</div>

23.9 #Components.Tooltip Tooltip

tooltip, tooltip-body

Tooltips are absolutely positioned. It is up to you to position them using the top, right, bottom, and/or left properties. The point of the tooltip arrow will point to the position you specify.

Examples
Default styling
Tooltip
tooltip-left
place the tooltip to the left of the specified point
Tooltip
tooltip-right
place the tooltip to the right of the specified point
Tooltip
tooltip-top
place the tooltip above the specified point (may be used in conjunction with tooltip-left or tooltip-right)
Tooltip
<div style="position: relative; height: 150px; background-color: gray">
  <div class="tooltip [modifier class]" style="top: 70px; left: 70px;">
    <div class="tooltip-body">Tooltip</div>
  </div>
</div>

23.10 #Components.Typeahead Typeahead

typeahead

Toggle the class is-open on the typeahead element to show/hide the dropdown.

Any list type can be used inside the typeahead-results container. Typically, we use a suggestions list.

Example
Press enter to search
<div class="typeahead">
  <div class="typeahead-mask"></div>
  <div class="typeahead-input">
    <input type="text" placeholder="placeholder"/>
    <button>Go</button>
  </div>
  <div class="typeahead-drop">
    <div class="typeahead-results">
      <ul class="suggestions">
        <li><a href="#">
          <div class="suggestions-name">One</div>
          <div class="suggestions-details">one</div>
        </a></i>
        <li><a href="#">
          <div class="suggestions-name">Two</div>
          <div class="suggestions-details">two</div>
        </a></i>
      </ul>
    </div>
    <div class="typeahead-help">Press enter to search</div>
  </div>
</div>

23.10.1 #Components.Typeahead.Search Site Search

typeahead-search

Use JavaScript to toggle the is-collapsed class to show/hide the search input (click to demo).

Example 
<div class="typeahead typeahead-search is-collapsed">
  <div class="typeahead-input">
    <input type="search" placeholder="placeholder"/>
    <button>Go</button>
  </div>
  <div class="typeahead-drop">
    <div class="typeahead-results">
      <ul class="suggestions">
        <li><a href="#">
          <div class="suggestions-name">One</div>
          <div class="suggestions-details">one</div>
        </a></i>
        <li><a href="#">
          <div class="suggestions-name">Two</div>
          <div class="suggestions-details">two</div>
        </a></i>
      </ul>
    </div>
  </div>
</div>