http%3A%2F%2Fhelp.metaphacts.com%2Fresource%2FReactBootstrap.html

<div class="metaphacts_help">
    <ol class="breadcrumb" style="background:white;border:none;padding-left:0px;">
    <li>
      <semantic-link title="Help" uri="http://help.metaphacts.com/resource/Start">Help</semantic-link>
    </li>
    <li>
      <semantic-link title="Documentation" uri="http://help.metaphacts.com/resource/DocumentationOverview">Documentation</semantic-link>
    </li>
    <li>
      <semantic-link title="Components" uri="http://help.metaphacts.com/resource/HTML5Components">Components</semantic-link>
    </li>
    <li class="active">React Bootstrap</li>
  </ol>
     
  <h1>React-Bootstrap Components</h1>
  
  The metaphactory exposes some components from the <a href="https://react-bootstrap.github.io/components.html" target="_blank">React Bootstrap</a> framework.  All components provided through react-bootstrap are being prefixed with <code>bs-*</code>.
  
  <h2>Horizontal Tabs</h2>
  
    See <a href="https://react-bootstrap.github.io/components.html#tabs" target="_blank">https://react-bootstrap.github.io/components.html#tabs</a> for more details and configuration options.
  <h3>Example</h3>
  
  <mp-code-example>
    <bs-tabs>
       <bs-tab event-key="1" title="Tab 1">
         Tab Content 1
       </bs-tab>
       <bs-tab event-key="2" title="Tab 2">
         Tab Content 2
       </bs-tab>
    </bs-tabs>
     </mp-code-example>
  
  <h2>Vertical Tabs</h2>
  
  See <a href="https://react-bootstrap.github.io/components.html#tabs-custom-layout" target="_blank">https://react-bootstrap.github.io/components.html#tabs-custom-layout</a> for more details and configuration options.
  <h3>Example</h3>

  <mp-code-example>
     <bs-tab-container id="some-ide" class="bs-left-vertical-tabs" default-active-key="first">
       <bs-row class="clearfix">
         <bs-col sm="2">
           <bs-nav bs-style="tabs" stacked="true">
             <bs-nav-item event-key="first">
               Tab 1
             </bs-nav-item>
             <bs-nav-item event-key="second">
               Tab 2
             </bs-nav-item>
           </bs-nav>
         </bs-col>
         <bs-col sm="10">
           <bs-tab-content animation="true">
             <bs-tab-pane event-key="first">Tab 1 content</bs-tab-pane>
             <bs-tab-pane event-key="second">Tab 2 content</bs-tab-pane>
           </bs-tab-content>
         </bs-col>
       </bs-row>
     </bs-tab-container>
  </mp-code-example>

  <h2>Grid Layout</h2>
  See <a href="https://react-bootstrap.github.io/components.html#grid" target="_blank">https://react-bootstrap.github.io/components.html#grid</a> for more details and configuration options.
  
  <h3>Example</h3>
  <mp-code-example>
     <bs-row style="background-color:#D9828B;">
        <bs-col sm="12">
          This is a row with only one column with 12 units.<br>
          oone row is divided in 12 units that can be distributed over arbitrary columns with sum of max. 12 units.
        </bs-col>
      </bs-row>
      <bs-row>
         <bs-col sm="4" style="background-color:#F0FFFF;">
          column 1 with 4 units
        </bs-col>
        <bs-col sm="4" sm-offset="1" style="background-color:#CFECEC">
          column 2 with 4 units, 1 offset
        </bs-col>
        <bs-col sm="3" style="background-color:#ADDFFF">
          column 3 with 2 units
        </bs-col>
      </bs-row> 
     </mp-code-example>

  <h2>Alert</h2>
   See <a href="https://react-bootstrap.github.io/components.html#alerts" target="_blank">https://react-bootstrap.github.io/components.html#alerts</a> for more details and configuration options.
  
  <h3>Example</h3>
  <mp-code-example>
    <bs-alert bs-style="warning">
    	<strong>Holy guacamole!</strong> Best check yo self, you're not looking too good.
  	</bs-alert>
  </mp-code-example>
  
  <h2>Navbar and Navbar Items</h2>
  See <a href="https://react-bootstrap.github.io/components.html#navigation" target="_blank">https://react-bootstrap.github.io/components.html#navigation</a> for more details and configuration options.
  <h3>Example</h3>
  <mp-code-example>
    <bs-navbar style="width:50%;">
        <bs-navbar-header>
          <bs-navbar-brand>
            <a href="#">metaphactory Help</a>
          </bs-navbar-brand>
        </bs-navbar-header>
        <bs-nav>
          <mp-resource-link-container uri="http://help.metaphacts.com/resource/Start"><bs-nav-item>Help</bs-nav-item></mp-resource-link-container>
          <mp-resource-link-container uri="http://help.metaphacts.com/resource/DocumentationOverview"><bs-nav-item>Documentation overview</bs-nav-item></mp-resource-link-container>
          <bs-nav-dropdown title="Components" id="basic-nav-dropdown">
            <mp-resource-link-container uri="http://help.metaphacts.com/resource/SemanticTable"><bs-menu-item>Table</bs-menu-item></mp-resource-link-container>
            <mp-resource-link-container uri="http://help.metaphacts.com/resource/SemanticGraph"><bs-menu-item>Graph</bs-menu-item></mp-resource-link-container>
            <mp-resource-link-container uri="http://help.metaphacts.com/resource/SemanticCarousel"><bs-menu-item>Carousel</bs-menu-item></mp-resource-link-container>
            <bs-menu-item divider />
            <mp-resource-link-container uri="http://help.metaphacts.com/resource/SemanticSimpleSearch"><bs-menu-item >Simple Search</bs-menu-item></mp-resource-link-container>
          </bs-nav-dropdown>
        </bs-nav>
    </bs-navbar>
  </mp-code-example>
  
  <h2>Panels</h2>
  See <a href="http://react-bootstrap.github.io/components.html#panels" target="_blank">http://react-bootstrap.github.io/components.html#panels</a> for more details and configuration options.
  <h3>Example</h3>
  <mp-code-example>
    <bs-panel header="Content" collapsible="true">
         Panel Content
    </bs-panel>
  </mp-code-example>
  
</div>