forked from react-bootstrap/react-bootstrap.github.io
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathcomponents.html
More file actions
17 lines (17 loc) · 76.8 KB
/
components.html
File metadata and controls
17 lines (17 loc) · 76.8 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!doctype html><html data-reactid=".jhu0vnmpz4" data-react-checksum="-246748041"><head data-reactid=".jhu0vnmpz4.0"><title>React Bootstrap</title><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><link href="vendor/bootstrap/bootstrap.css" rel="stylesheet" /><link href="vendor/bootstrap/docs.css" rel="stylesheet" /><link href="vendor/codemirror/codemirror.css" rel="stylesheet" /><link href="vendor/codemirror/solarized.css" rel="stylesheet" /><link href="vendor/codemirror/syntax.css" rel="stylesheet" /><link href="assets/style.css" rel="stylesheet" /><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><script src="http://code.jquery.com/jquery-1.11.1.min.js"></script><script src="http://cdnjs.cloudflare.com/ajax/libs/es5-shim/3.4.0/es5-shim.js"></script><script src="http://cdnjs.cloudflare.com/ajax/libs/es5-shim/3.4.0/es5-sham.js"></script><![endif]--></head><body data-reactid=".jhu0vnmpz4.1"><div data-reactid=".jhu0vnmpz4.1.0"><div data-reactid=".jhu0vnmpz4.1.0.0"><div data-reactid=".jhu0vnmpz4.1.0.0.0"><header class="bs-docs-nav navbar navbar-default navbar-static-top" role="banner" data-reactid=".jhu0vnmpz4.1.0.0.0.0"><div class="container" data-reactid=".jhu0vnmpz4.1.0.0.0.0.0"><div class="navbar-header" data-reactid=".jhu0vnmpz4.1.0.0.0.0.0.0"><a class="navbar-brand navbar-brand" href="/" data-reactid=".jhu0vnmpz4.1.0.0.0.0.0.0.0">React Bootstrap</a><button class="navbar-toggle" type="button" data-reactid=".jhu0vnmpz4.1.0.0.0.0.0.0.1"><span class="sr-only" data-reactid=".jhu0vnmpz4.1.0.0.0.0.0.0.1.$0">Toggle navigation</span><span class="icon-bar" data-reactid=".jhu0vnmpz4.1.0.0.0.0.0.0.1.$1"></span><span class="icon-bar" data-reactid=".jhu0vnmpz4.1.0.0.0.0.0.0.1.$2"></span><span class="icon-bar" data-reactid=".jhu0vnmpz4.1.0.0.0.0.0.0.1.$3"></span></button></div><nav class="bs-navbar-collapse collapse navbar-collapse" role="navigation" id="top" data-reactid=".jhu0vnmpz4.1.0.0.0.0.0.1:$=10:$0"><ul class="bs-navbar-collapse nav navbar-nav" role="navigation" id="top" data-reactid=".jhu0vnmpz4.1.0.0.0.0.0.1:$=10:$0.0"><li data-reactid=".jhu0vnmpz4.1.0.0.0.0.0.1:$=10:$0.0.$=1$getting-started:$getting-started"><a href="/getting-started.html" data-reactid=".jhu0vnmpz4.1.0.0.0.0.0.1:$=10:$0.0.$=1$getting-started:$getting-started.0">Getting started</a></li><li class="active" data-reactid=".jhu0vnmpz4.1.0.0.0.0.0.1:$=10:$0.0.$=1$components:$components"><a href="/components.html" data-reactid=".jhu0vnmpz4.1.0.0.0.0.0.1:$=10:$0.0.$=1$components:$components.0">Components</a></li></ul></nav></div></header><div class="bs-docs-header" id="content" data-reactid=".jhu0vnmpz4.1.0.0.0.1"><div class="container" data-reactid=".jhu0vnmpz4.1.0.0.0.1.0"><h1 data-reactid=".jhu0vnmpz4.1.0.0.0.1.0.0">Components</h1><p data-reactid=".jhu0vnmpz4.1.0.0.0.1.0.1"></p></div></div><div class="container bs-docs-container" data-reactid=".jhu0vnmpz4.1.0.0.0.2"><div class="row" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0"><div class="col-md-9" role="main" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0"><div class="bs-docs-section" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.0"><h1 id="buttons" class="page-header" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.0.0"><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.0.0.0">Buttons </span><small data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.0.0.1">Button</small></h1><h2 id="buttons-options" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.0.1">Options</h2><p data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.0.2"><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.0.2.0">Use any of the available button style types to quickly create a styled button. Just modify the</span><code data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.0.2.1">bsStyle</code><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.0.2.2"> prop.</span></p><div class="playground" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.0.3"><div class="bs-example" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.0.3.0"><div data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.0.3.0.0"></div></div><a class="code-toggle" href="#" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.0.3.2">show code</a></div><div class="bs-callout bs-callout-warning" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.0.4"><h4 data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.0.4.0">Button spacing</h4><p data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.0.4.1"><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.0.4.1.0">Because React doesn't output newlines between elements, buttons on the same line are displayed flush against each other. To preserve the spacing between multiple inline buttons, wrap your button group in </span><code data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.0.4.1.1"><ButtonToolbar /></code><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.0.4.1.2">.</span></p></div><h2 id="buttons-sizes" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.0.5">Sizes</h2><p data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.0.6"><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.0.6.0">Fancy larger or smaller buttons? Add </span><code data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.0.6.1">bsSize="large"</code><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.0.6.2">, </span><code data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.0.6.3">bsSize="small"</code><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.0.6.4">, or </span><code data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.0.6.5">bsSize="xsmall"</code><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.0.6.6"> for additional sizes.</span></p><div class="playground" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.0.7"><div class="bs-example" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.0.7.0"><div data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.0.7.0.0"></div></div><a class="code-toggle" href="#" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.0.7.2">show code</a></div><p data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.0.8"><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.0.8.0">Create block level buttons—those that span the full width of a parent— by adding the</span><code data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.0.8.1">block</code><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.0.8.2"> prop.</span></p><div class="playground" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.0.9"><div class="bs-example" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.0.9.0"><div data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.0.9.0.0"></div></div><a class="code-toggle" href="#" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.0.9.2">show code</a></div><h2 id="buttons-active" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.0.a">Active state</h2><p data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.0.b"><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.0.b.0">To set a buttons active state simply set the components </span><code data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.0.b.1">active</code><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.0.b.2"> prop.</span></p><div class="playground" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.0.c"><div class="bs-example" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.0.c.0"><div data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.0.c.0.0"></div></div><a class="code-toggle" href="#" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.0.c.2">show code</a></div><h2 id="buttons-disabled" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.0.d">Disabled state</h2><p data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.0.e"><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.0.e.0">Make buttons look unclickable by fading them back 50%. To do this add the </span><code data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.0.e.1">disabled</code><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.0.e.2">attribute to buttons.</span></p><div class="playground" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.0.f"><div class="bs-example" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.0.f.0"><div data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.0.f.0.0"></div></div><a class="code-toggle" href="#" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.0.f.2">show code</a></div><div class="bs-callout bs-callout-warning" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.0.g"><h4 data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.0.g.0">Event handler functionality not impacted</h4><p data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.0.g.1"><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.0.g.1.0">This prop will only change the </span><code data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.0.g.1.1"><Button /></code><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.0.g.1.2">’s appearance, not its functionality. Use custom logic to disable the effect of the </span><code data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.0.g.1.3">onClick</code><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.0.g.1.4"> handlers.</span></p></div><h2 id="buttons-tags" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.0.h">Button tags</h2><p data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.0.i"><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.0.i.0">The DOM element tag is choosen automaticly for you based on the props you supply. Passing a</span><code data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.0.i.1">href</code><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.0.i.2"> will result in the button using a </span><code data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.0.i.3"><a /></code><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.0.i.4"> element otherwise a</span><code data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.0.i.5"><button /></code><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.0.i.6"> element will be used.</span></p><div class="playground" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.0.j"><div class="bs-example" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.0.j.0"><div data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.0.j.0.0"></div></div><a class="code-toggle" href="#" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.0.j.2">show code</a></div><h2 id="buttons-tags" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.0.k">Button loading state</h2><p data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.0.l"><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.0.l.0">When activating an asynchronous action from a button it is a good UX pattern to give the user feedback as to the loading state, this can easily be done by updating your</span><code data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.0.l.1"><Button /></code><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.0.l.2">’s props from a state change like below.</span></p><div class="playground" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.0.m"><div class="bs-example" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.0.m.0"><div data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.0.m.0.0"></div></div><a class="code-toggle" href="#" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.0.m.2">show code</a></div></div><div class="bs-docs-section" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.1"><h1 id="btn-groups" class="page-header" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.1.0"><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.1.0.0">Button groups </span><small data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.1.0.1">ButtonGroup, ButtonToolbar</small></h1><p class="lead" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.1.1">Group a series of buttons together on a single line with the button group.</p><h3 id="btn-groups-single" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.1.2">Basic example</h3><p data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.1.3"><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.1.3.0">Wrap a series of </span><code data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.1.3.1"><Button /></code><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.1.3.2">’s in a </span><code data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.1.3.3"><ButtonGroup /></code><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.1.3.4">.</span></p><div class="playground" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.1.4"><div class="bs-example" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.1.4.0"><div data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.1.4.0.0"></div></div><a class="code-toggle" href="#" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.1.4.2">show code</a></div><h3 id="btn-groups-toolbar" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.1.5">Button toolbar</h3><p data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.1.6"><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.1.6.0">Combine sets of </span><code data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.1.6.1"><ButtonGroup /></code><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.1.6.2">’s into a </span><code data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.1.6.3"><ButtonToolbar /></code><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.1.6.4">for more complex components.</span></p><div class="playground" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.1.7"><div class="bs-example" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.1.7.0"><div data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.1.7.0.0"></div></div><a class="code-toggle" href="#" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.1.7.2">show code</a></div><h3 id="btn-groups-sizing" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.1.8">Sizing</h3><p data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.1.9"><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.1.9.0">Instead of applying button sizing props to every button in a group, just add </span><code data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.1.9.1">bsSize</code><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.1.9.2">prop to the </span><code data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.1.9.3"><ButtonGroup /></code><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.1.9.4">.</span></p><div class="playground" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.1.a"><div class="bs-example" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.1.a.0"><div data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.1.a.0.0"></div></div><a class="code-toggle" href="#" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.1.a.2">show code</a></div><h3 id="btn-groups-nested" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.1.b">Nesting</h3><p data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.1.c"><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.1.c.0">You can place other button types within the </span><code data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.1.c.1"><ButtonGroup /></code><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.1.c.2"> like</span><code data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.1.c.3"><DropdownButton /></code><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.1.c.4">’s.</span></p><div class="playground" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.1.d"><div class="bs-example" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.1.d.0"><div data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.1.d.0.0"></div></div><a class="code-toggle" href="#" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.1.d.2">show code</a></div><h3 id="btn-groups-vertical" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.1.e">Vertical variation</h3><p data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.1.f"><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.1.f.0">Make a set of buttons appear vertically stacked rather than horizontally.</span><strong class="text-danger" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.1.f.1">Split button dropdowns are not supported here.</strong></p><p data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.1.g"><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.1.g.0">Just add </span><code data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.1.g.1">vertical</code><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.1.g.2"> to the </span><code data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.1.g.3"><ButtonGroup /></code><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.1.g.4">.</span></p><div class="playground" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.1.h"><div class="bs-example" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.1.h.0"><div data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.1.h.0.0"></div></div><a class="code-toggle" href="#" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.1.h.2">show code</a></div><h3 id="btn-groups-justified" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.1.i">Justified button groups</h3><p data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.1.j">Make a group of buttons stretch at equal sizes to span the entire width of its parent. Also works with button dropdowns within the button group.</p><div class="bs-callout bs-callout-warning" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.1.k"><h4 data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.1.k.0">Style issues</h4><p data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.1.k.1"><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.1.k.1.0">There are some issues and workarounds required when using this property, please see </span><a href="http://getbootstrap.com/components/#btn-groups-justified" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.1.k.1.1">bootstrap’s button group docs</a><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.1.k.1.2"> for more specifics.</span></p></div><p data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.1.l"><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.1.l.0">Just add </span><code data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.1.l.1">justified</code><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.1.l.2"> to the </span><code data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.1.l.3"><ButtonGroup /></code><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.1.l.4">.</span></p><div class="playground" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.1.m"><div class="bs-example" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.1.m.0"><div data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.1.m.0.0"></div></div><a class="code-toggle" href="#" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.1.m.2">show code</a></div></div><div class="bs-docs-section" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.2"><h1 id="btn-dropdowns" class="page-header" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.2.0">Button dropdowns</h1><p class="lead" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.2.1"><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.2.1.0">Use </span><code data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.2.1.1"><DropdownButton /></code><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.2.1.2"> or </span><code data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.2.1.3"><SplitButton /></code><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.2.1.4"> components to display a button with a dropdown menu.</span></p><h3 id="btn-dropdowns-single" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.2.2">Single button dropdowns</h3><p data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.2.3"><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.2.3.0">Create a dropdown button with the </span><code data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.2.3.1"><DropdownButton /></code><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.2.3.2"> component.</span></p><div class="playground" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.2.4"><div class="bs-example" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.2.4.0"><div data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.2.4.0.0"></div></div><a class="code-toggle" href="#" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.2.4.2">show code</a></div><h3 id="btn-dropdowns-split" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.2.5">Split button dropdowns</h3><p data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.2.6"><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.2.6.0">Similarly, create split button dropdowns with the </span><code data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.2.6.1"><SplitButton /></code><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.2.6.2"> component.</span></p><div class="playground" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.2.7"><div class="bs-example" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.2.7.0"><div data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.2.7.0.0"></div></div><a class="code-toggle" href="#" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.2.7.2">show code</a></div><h3 id="btn-dropdowns-sizing" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.2.8">Sizing</h3><p data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.2.9">Button dropdowns work with buttons of all sizes.</p><div class="playground" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.2.a"><div class="bs-example" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.2.a.0"><div data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.2.a.0.0"></div></div><a class="code-toggle" href="#" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.2.a.2">show code</a></div><h3 id="btn-dropdowns-dropup" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.2.b">Dropup variation</h3><p data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.2.c"><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.2.c.0">Trigger dropdown menus that site above the button by adding the </span><code data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.2.c.1">dropup</code><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.2.c.2"> prop.</span></p><div class="playground" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.2.d"><div class="bs-example" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.2.d.0"><div data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.2.d.0.0"></div></div><a class="code-toggle" href="#" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.2.d.2">show code</a></div><h3 id="btn-dropdowns-right" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.2.e">Dropdown right variation</h3><p data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.2.f"><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.2.f.0">Trigger dropdown menus that align to the right of the button using the </span><code data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.2.f.1">pullRight</code><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.2.f.2"> prop.</span></p><div class="playground" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.2.g"><div class="bs-example" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.2.g.0"><div data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.2.g.0.0"></div></div><a class="code-toggle" href="#" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.2.g.2">show code</a></div></div><div class="bs-docs-section" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.3"><h1 id="panels" class="page-header" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.3.0"><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.3.0.0">Panels </span><small data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.3.0.1">Panel, PanelGroup, Accordion</small></h1><h3 id="panels-basic" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.3.1">Basic example</h3><p data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.3.2"><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.3.2.0">By default, all the </span><code data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.3.2.1"><Panel /></code><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.3.2.2"> does is apply some basic border and padding to contain some content.</span></p><div class="playground" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.3.3"><div class="bs-example" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.3.3.0"><div data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.3.3.0.0"></div></div><a class="code-toggle" href="#" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.3.3.2">show code</a></div><h3 id="panels-heading" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.3.4">Panel with heading</h3><p data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.3.5"><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.3.5.0">Easily add a heading container to your panel with the </span><code data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.3.5.1">header</code><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.3.5.2"> prop.</span></p><div class="playground" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.3.6"><div class="bs-example" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.3.6.0"><div data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.3.6.0.0"></div></div><a class="code-toggle" href="#" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.3.6.2">show code</a></div><h3 id="panels-footer" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.3.7">Panel with footer</h3><p data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.3.8"><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.3.8.0">Pass buttons or secondary text in the </span><code data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.3.8.1">footer</code><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.3.8.2"> prop. Note that panel footers do not inherit colors and borders when using contextual variations as they are not meant to be in the foreground.</span></p><div class="playground" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.3.9"><div class="bs-example" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.3.9.0"><div data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.3.9.0.0"></div></div><a class="code-toggle" href="#" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.3.9.2">show code</a></div><h3 id="panels-contextual" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.3.a">Contextual alternatives</h3><p data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.3.b"><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.3.b.0">Like other components, easily make a panel more meaningful to a particular context by adding a </span><code data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.3.b.1">bsStyle</code><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.3.b.2"> prop.</span></p><div class="playground" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.3.c"><div class="bs-example" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.3.c.0"><div data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.3.c.0.0"></div></div><a class="code-toggle" href="#" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.3.c.2">show code</a></div><h3 id="panels-controlled" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.3.d">Controlled PanelGroups</h3><p data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.3.e"><code data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.3.e.0">PanelGroup</code><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.3.e.1">s can be controlled by a parent component. The </span><code data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.3.e.2">activeKey</code><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.3.e.3"> prop dictates which panel is open.</span></p><div class="playground" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.3.f"><div class="bs-example" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.3.f.0"><div data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.3.f.0.0"></div></div><a class="code-toggle" href="#" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.3.f.2">show code</a></div><h3 id="panels-uncontrolled" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.3.g">Uncontrolled PanelGroups</h3><p data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.3.h"><code data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.3.h.0">PanelGroup</code><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.3.h.1">s can also be uncontrolled where they manage their own state. The </span><code data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.3.h.2">defaultActiveKey</code><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.3.h.3"> prop dictates which panel is open when initially.</span></p><div class="playground" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.3.i"><div class="bs-example" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.3.i.0"><div data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.3.i.0.0"></div></div><a class="code-toggle" href="#" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.3.i.2">show code</a></div><h3 id="panels-accordion" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.3.j">Accordions</h3><p data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.3.k"><code data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.3.k.0"><Accordion /></code><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.3.k.1"> aliases </span><code data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.3.k.2"><PanelGroup accordion /></code><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.3.k.3">.</span></p><div class="playground" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.3.l"><div class="bs-example" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.3.l.0"><div data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.3.l.0.0"></div></div><a class="code-toggle" href="#" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.3.l.2">show code</a></div></div><div class="bs-docs-section" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.4"><h1 id="modals" class="page-header" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.4.0"><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.4.0.0">Modals </span><small data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.4.0.1">Modal</small></h1><h3 id="modals-static" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.4.1">A static example</h3><p data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.4.2">A rendered modal with header, body, and set of actions in the footer.</p><p data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.4.3"><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.4.3.0">The header is added automatically if you pass in a </span><code data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.4.3.1">title</code><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.4.3.2"> prop.</span></p><div class="playground" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.4.4"><div class="bs-example" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.4.4.0"><div data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.4.4.0.0"></div></div><a class="code-toggle" href="#" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.4.4.2">show code</a></div><h3 id="modals-live" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.4.5">Live demo</h3><p data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.4.6"><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.4.6.0">Use </span><code data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.4.6.1"><ModalTrigger /></code><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.4.6.2"> to create a real modal that's added to the document body when opened.</span></p><div class="playground" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.4.7"><div class="bs-example" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.4.7.0"><div data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.4.7.0.0"></div></div><a class="code-toggle" href="#" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.4.7.2">show code</a></div><h3 id="modals-custom" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.4.8">Custom trigger</h3><p data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.4.9"><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.4.9.0">Use </span><code data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.4.9.1"><OverlayMixin /></code><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.4.9.2"> in a custom component to manage the modal's state yourself.</span></p><div class="playground" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.4.a"><div class="bs-example" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.4.a.0"><div data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.4.a.0.0"></div></div><a class="code-toggle" href="#" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.4.a.2">show code</a></div><h3 id="modals-custom" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.4.b">Contained Modal</h3><p data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.4.c"><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.4.c.0">You will need to add the following css to your project and ensure that your container has the </span><code data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.4.c.1">modal-container</code><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.4.c.2"> class.</span></p><pre data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.4.d"><code data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.4.d.0">.modal-container {
position: relative;
}
.modal-container .modal, .modal-container .modal-backdrop {
position: absolute;
}
</code></pre><div class="playground" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.4.e"><div class="bs-example" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.4.e.0"><div data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.4.e.0.0"></div></div><a class="code-toggle" href="#" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.4.e.2">show code</a></div></div><div class="bs-docs-section" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.5"><h1 id="tooltips" class="page-header" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.5.0"><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.5.0.0">Tooltips </span><small data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.5.0.1">Tooltip</small></h1><h2 id="tooltips-examples" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.5.1">Example tooltips</h2><p data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.5.2">Tooltip component.</p><div class="playground" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.5.3"><div class="bs-example" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.5.3.0"><div data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.5.3.0.0"></div></div><a class="code-toggle" href="#" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.5.3.2">show code</a></div><p data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.5.4">Positioned tooltip component.</p><div class="playground" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.5.5"><div class="bs-example" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.5.5.0"><div data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.5.5.0.0"></div></div><a class="code-toggle" href="#" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.5.5.2">show code</a></div><p data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.5.6">Positioned tooltip in copy.</p><div class="playground" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.5.7"><div class="bs-example" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.5.7.0"><div data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.5.7.0.0"></div></div><a class="code-toggle" href="#" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.5.7.2">show code</a></div></div><div class="bs-docs-section" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.6"><h1 id="popovers" class="page-header" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.6.0"><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.6.0.0">Popovers </span><small data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.6.0.1">Popover</small></h1><h2 id="popovers-examples" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.6.1">Example popovers</h2><p data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.6.2">Popovers component.</p><div class="playground" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.6.3"><div class="bs-example" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.6.3.0"><div data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.6.3.0.0"></div></div><a class="code-toggle" href="#" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.6.3.2">show code</a></div><p data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.6.4">Popovers component.</p><div class="playground" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.6.5"><div class="bs-example" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.6.5.0"><div data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.6.5.0.0"></div></div><a class="code-toggle" href="#" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.6.5.2">show code</a></div><p data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.6.6">Popovers scrolling.</p><div class="playground" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.6.7"><div class="bs-example bs-example-scroll" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.6.7.0"><div data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.6.7.0.0"></div></div><a class="code-toggle" href="#" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.6.7.2">show code</a></div></div><div class="bs-docs-section" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.7"><h1 id="progress" class="page-header" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.7.0"><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.7.0.0">Progress bars </span><small data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.7.0.1">ProgressBar</small></h1><p class="lead" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.7.1">Provide up-to-date feedback on the progress of a workflow or action with simple yet flexible progress bars.</p><h2 id="progress-basic" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.7.2">Basic example</h2><p data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.7.3">Default progress bar.</p><div class="playground" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.7.4"><div class="bs-example" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.7.4.0"><div data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.7.4.0.0"></div></div><a class="code-toggle" href="#" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.7.4.2">show code</a></div><h2 id="progress-label" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.7.5">With label</h2><p data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.7.6"><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.7.6.0">Add a </span><code data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.7.6.1">label</code><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.7.6.2"> prop to show a visible percentage. For low percentages, consider adding a min-width to ensure the label's text is fully visible.</span></p><p data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.7.7"><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.7.7.0">The following keys are interpolated with the current values: </span><code data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.7.7.1">%(min)s</code><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.7.7.2">, </span><code data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.7.7.3">%(max)s</code><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.7.7.4">, </span><code data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.7.7.5">%(now)s</code><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.7.7.6">, </span><code data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.7.7.7">%(percent)s</code><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.7.7.8">, </span><code data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.7.7.9">%(bsStyle)s</code></p><div class="playground" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.7.8"><div class="bs-example" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.7.8.0"><div data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.7.8.0.0"></div></div><a class="code-toggle" href="#" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.7.8.2">show code</a></div><h2 id="progress-screenreader-label" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.7.9">Screenreader only label</h2><p data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.7.a"><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.7.a.0">Add a </span><code data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.7.a.1">srOnly</code><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.7.a.2"> prop to hide the label visually.</span></p><div class="playground" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.7.b"><div class="bs-example" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.7.b.0"><div data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.7.b.0.0"></div></div><a class="code-toggle" href="#" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.7.b.2">show code</a></div><h2 id="progress-contextual" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.7.c">Contextual alternatives</h2><p data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.7.d">Progress bars use some of the same button and alert classes for consistent styles.</p><div class="playground" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.7.e"><div class="bs-example" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.7.e.0"><div data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.7.e.0.0"></div></div><a class="code-toggle" href="#" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.7.e.2">show code</a></div><h2 id="progress-striped" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.7.f">Striped</h2><p data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.7.g">Uses a gradient to create a striped effect. Not available in IE8.</p><div class="playground" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.7.h"><div class="bs-example" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.7.h.0"><div data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.7.h.0.0"></div></div><a class="code-toggle" href="#" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.7.h.2">show code</a></div><h2 id="progress-animated" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.7.i">Animated</h2><p data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.7.j"><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.7.j.0">Add </span><code data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.7.j.1">active</code><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.7.j.2"> prop to animate the stripes right to left. Not available in IE9 and below.</span></p><div class="playground" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.7.k"><div class="bs-example" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.7.k.0"><div data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.7.k.0.0"></div></div><a class="code-toggle" href="#" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.7.k.2">show code</a></div><h2 id="progress-stacked" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.7.l">Stacked</h2><p data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.7.m"><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.7.m.0">Nest </span><code data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.7.m.1"><ProgressBar /></code><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.7.m.2">s to stack them.</span></p><div class="playground" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.7.n"><div class="bs-example" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.7.n.0"><div data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.7.n.0.0"></div></div><a class="code-toggle" href="#" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.7.n.2">show code</a></div></div><div class="bs-docs-section" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.8"><h1 id="navs" class="page-header" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.8.0"><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.8.0.0">Navs </span><small data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.8.0.1">Nav, NavItem</small></h1><h2 id="navs-examples" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.8.1">Example navs</h2><p data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.8.2"><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.8.2.0">Navs come in two styles, </span><code data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.8.2.1">pills</code><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.8.2.2"> and </span><code data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.8.2.3">tabs</code><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.8.2.4">. Disable a tab by adding </span><code data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.8.2.5">disabled</code><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.8.2.6">.</span></p><div class="playground" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.8.3"><div class="bs-example" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.8.3.0"><div data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.8.3.0.0"></div></div><a class="code-toggle" href="#" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.8.3.2">show code</a></div><h3 data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.8.4">Dropdown</h3><p data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.8.5"><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.8.5.0">Add dropdowns using the </span><code data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.8.5.1">DropdownButton</code><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.8.5.2"> component. Just make sure to set </span><code data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.8.5.3">navItem</code><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.8.5.4"> property to true.</span></p><div class="playground" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.8.6"><div class="bs-example" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.8.6.0"><div data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.8.6.0.0"></div></div><a class="code-toggle" href="#" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.8.6.2">show code</a></div><h3 data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.8.7">Stacked</h3><p data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.8.8"><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.8.8.0">They can also be </span><code data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.8.8.1">stacked</code><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.8.8.2"> vertically.</span></p><div class="playground" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.8.9"><div class="bs-example" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.8.9.0"><div data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.8.9.0.0"></div></div><a class="code-toggle" href="#" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.8.9.2">show code</a></div><h3 data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.8.a">Justified</h3><p data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.8.b"><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.8.b.0">They can be </span><code data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.8.b.1">justified</code><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.8.b.2"> to take the full width of their parent.</span></p><div class="playground" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.8.c"><div class="bs-example" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.8.c.0"><div data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.8.c.0.0"></div></div><a class="code-toggle" href="#" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.8.c.2">show code</a></div></div><div class="bs-docs-section" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.9"><h1 id="navbars" class="page-header" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.9.0"><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.9.0.0">Navbars </span><small data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.9.0.1">Navbar, Nav, NavItem</small></h1><h2 id="navbars-examples" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.9.1">Example navbars</h2><div class="playground" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.9.2"><div class="bs-example" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.9.2.0"><div data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.9.2.0.0"></div></div><a class="code-toggle" href="#" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.9.2.2">show code</a></div></div><div class="bs-docs-section" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.a"><h1 id="tabs" class="page-header" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.a.0"><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.a.0.0">Togglable tabs </span><small data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.a.0.1">TabbedArea, TabPane</small></h1><h2 id="tabs-examples" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.a.1">Example tabs</h2><p data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.a.2">Add quick, dynamic tab functionality to transition through panes of local content, even via dropdown menus.</p><h3 data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.a.3">Uncontrolled</h3><p data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.a.4">Allow the component to control its own state.</p><div class="playground" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.a.5"><div class="bs-example bs-example-tabs" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.a.5.0"><div data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.a.5.0.0"></div></div><a class="code-toggle" href="#" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.a.5.2">show code</a></div><h3 data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.a.6">Controlled</h3><p data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.a.7">Pass down the active state on render via props.</p><div class="playground" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.a.8"><div class="bs-example bs-example-tabs" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.a.8.0"><div data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.a.8.0.0"></div></div><a class="code-toggle" href="#" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.a.8.2">show code</a></div><h3 data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.a.9">No animation</h3><p data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.a.a"><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.a.a.0">Set the </span><code data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.a.a.1">animation</code><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.a.a.2"> prop to </span><code data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.a.a.3">false</code></p><div class="playground" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.a.b"><div class="bs-example bs-example-tabs" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.a.b.0"><div data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.a.b.0.0"></div></div><a class="code-toggle" href="#" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.a.b.2">show code</a></div><div class="bs-callout bs-callout-info" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.a.c"><h4 data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.a.c.0">Extends tabbed navigation</h4><p data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.a.c.1"><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.a.c.1.0">This plugin extends the </span><a href="#navs" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.a.c.1.1">tabbed navigation component</a><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.a.c.1.2"> to add tabbable areas.</span></p></div></div><div class="bs-docs-section" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.b"><h1 id="pager" class="page-header" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.b.0"><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.b.0.0">Pager</span><small data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.b.0.1"> Pager, PageItem</small></h1><p data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.b.1">Quick previous and next links.</p><h3 data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.b.2">Default</h3><p data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.b.3">Centers by default.</p><div class="playground" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.b.4"><div class="bs-example" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.b.4.0"><div data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.b.4.0.0"></div></div><a class="code-toggle" href="#" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.b.4.2">show code</a></div><h3 data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.b.5">Aligned</h3><p data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.b.6"><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.b.6.0">Set the </span><code data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.b.6.1">previous</code><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.b.6.2"> or </span><code data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.b.6.3">next</code><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.b.6.4"> prop to </span><code data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.b.6.5">true</code><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.b.6.6">, to align left or right.</span></p><div class="playground" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.b.7"><div class="bs-example" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.b.7.0"><div data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.b.7.0.0"></div></div><a class="code-toggle" href="#" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.b.7.2">show code</a></div><h3 data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.b.8">Disabled</h3><p data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.b.9"><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.b.9.0">Set the </span><code data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.b.9.1">disabled</code><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.b.9.2"> prop to </span><code data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.b.9.3">true</code><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.b.9.4"> to disable the link.</span></p><div class="playground" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.b.a"><div class="bs-example" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.b.a.0"><div data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.b.a.0.0"></div></div><a class="code-toggle" href="#" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.b.a.2">show code</a></div></div><div class="bs-docs-section" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.c"><h1 id="alerts" class="page-header" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.c.0"><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.c.0.0">Alert messages </span><small data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.c.0.1">Alert</small></h1><h2 id="alerts-examples" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.c.1">Example alerts</h2><p data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.c.2">Basic alert styles.</p><div class="playground" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.c.3"><div class="bs-example" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.c.3.0"><div data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.c.3.0.0"></div></div><a class="code-toggle" href="#" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.c.3.2">show code</a></div><p data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.c.4"><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.c.4.0">Closeable alerts, just pass in a </span><code data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.c.4.1">onDismiss</code><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.c.4.2"> function.</span></p><div class="playground" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.c.5"><div class="bs-example" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.c.5.0"><div data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.c.5.0.0"></div></div><a class="code-toggle" href="#" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.c.5.2">show code</a></div><p data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.c.6"><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.c.6.0">Auto close after a set time with </span><code data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.c.6.1">dismissAfter</code><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.c.6.2"> prop.</span></p><div class="playground" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.c.7"><div class="bs-example" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.c.7.0"><div data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.c.7.0.0"></div></div><a class="code-toggle" href="#" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.c.7.2">show code</a></div></div><div class="bs-docs-section" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.d"><h1 id="carousels" class="page-header" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.d.0"><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.d.0.0">Carousels </span><small data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.d.0.1">Carousel, CarouselItem</small></h1><h2 id="carousels-examples" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.d.1">Example carousels</h2><h3 data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.d.2">Uncontrolled</h3><p data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.d.3">Allow the component to control its own state.</p><div class="playground" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.d.4"><div class="bs-example bs-example-tabs" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.d.4.0"><div data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.d.4.0.0"></div></div><a class="code-toggle" href="#" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.d.4.2">show code</a></div><h3 data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.d.5">Controlled</h3><p data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.d.6">Pass down the active state on render via props.</p><div class="playground" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.d.7"><div class="bs-example bs-example-tabs" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.d.7.0"><div data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.d.7.0.0"></div></div><a class="code-toggle" href="#" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.d.7.2">show code</a></div></div><div class="bs-docs-section" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.e"><h1 id="grids" class="page-header" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.e.0"><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.e.0.0">Grids </span><small data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.e.0.1">Grid, Row, Col</small></h1><h2 id="grids-examples" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.e.1">Example grids</h2><div class="playground" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.e.2"><div class="bs-example bs-example-tabs" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.e.2.0"><div data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.e.2.0.0"></div></div><a class="code-toggle" href="#" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.e.2.2">show code</a></div></div><div class="bs-docs-section" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.f"><h1 id="listgroup" class="page-header" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.f.0"><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.f.0.0">List group</span><small data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.f.0.1"> ListGroup, ListGroupItem</small></h1><p data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.f.1">Quick previous and next links.</p><h3 data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.f.2">Default</h3><p data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.f.3">Centers by default.</p><div class="playground" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.f.4"><div class="bs-example" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.f.4.0"><div data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.f.4.0.0"></div></div><a class="code-toggle" href="#" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.f.4.2">show code</a></div><h3 data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.f.5">Linked</h3><p data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.f.6"><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.f.6.0">Set the </span><code data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.f.6.1">href</code><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.f.6.2"> or </span><code data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.f.6.3">onClick</code><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.f.6.4"> prop on </span><code data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.f.6.5">ListGroupItem</code><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.f.6.6">, to create a linked or clickable element.</span></p><div class="playground" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.f.7"><div class="bs-example" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.f.7.0"><div data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.f.7.0.0"></div></div><a class="code-toggle" href="#" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.f.7.2">show code</a></div><h3 data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.f.8">Styling</h3><p data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.f.9"><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.f.9.0">Set the </span><code data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.f.9.1">active</code><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.f.9.2"> or </span><code data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.f.9.3">disabled</code><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.f.9.4"> prop to </span><code data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.f.9.5">true</code><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.f.9.6"> to mark or disable the item.</span></p><div class="playground" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.f.a"><div class="bs-example" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.f.a.0"><div data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.f.a.0.0"></div></div><a class="code-toggle" href="#" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.f.a.2">show code</a></div><p data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.f.b"><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.f.b.0">Set the </span><code data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.f.b.1">bsStyle</code><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.f.b.2"> prop to style the item</span></p><div class="playground" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.f.c"><div class="bs-example" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.f.c.0"><div data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.f.c.0.0"></div></div><a class="code-toggle" href="#" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.f.c.2">show code</a></div><h3 data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.f.d">With header</h3><p data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.f.e"><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.f.e.0">Set the </span><code data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.f.e.1">header</code><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.f.e.2"> prop to create a structured item, with a heading and a body area.</span></p><div class="playground" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.f.f"><div class="bs-example" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.f.f.0"><div data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.f.f.0.0"></div></div><a class="code-toggle" href="#" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.f.f.2">show code</a></div></div><div class="bs-docs-section" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.g"><h1 id="labels" class="page-header" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.g.0">Labels</h1><h2 id="label-static" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.g.1">Example</h2><p data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.g.2"><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.g.2.0">Create a </span><code data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.g.2.1"><Label>label</Label></code><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.g.2.2"> show highlight information</span></p><div class="playground" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.g.3"><div class="bs-example" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.g.3.0"><div data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.g.3.0.0"></div></div><a class="code-toggle" href="#" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.g.3.2">show code</a></div><h2 id="label-static" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.g.4">Available variations</h2><p data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.g.5">Add any of the below mentioned modifier classes to change the appearance of a label.</p><div class="playground" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.g.6"><div class="bs-example" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.g.6.0"><div data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.g.6.0.0"></div></div><a class="code-toggle" href="#" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.g.6.2">show code</a></div></div><div class="bs-docs-section" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.h"><h1 id="badges" class="page-header" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.h.0">Badges</h1><p data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.h.1"><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.h.1.0">Easily highlight new or unread items by adding a </span><code data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.h.1.1"><Badge></code><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.h.1.2"> to links, Bootstrap navs, and more.</span></p><h2 id="badge-static" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.h.2">Example</h2><div class="playground" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.h.3"><div class="bs-example" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.h.3.0"><div data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.h.3.0.0"></div></div><a class="code-toggle" href="#" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.h.3.2">show code</a></div><div class="bs-callout bs-callout-info" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.h.4"><h4 data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.h.4.0">Cross-browser compatibility</h4><p data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.h.4.1">Unlike regular Bootstrap badges self collapse even in Internet Explorer 8.</p></div></div><div class="bs-docs-section" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.i"><h1 id="jumbotron" class="page-header" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.i.0">Jumbotron</h1><p data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.i.1">A lightweight, flexible component that can optionally extend the entire viewport to showcase key content on your site.</p><h2 id="page-header-static" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.i.2">Example</h2><div class="playground" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.i.3"><div class="bs-example" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.i.3.0"><div data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.i.3.0.0"></div></div><a class="code-toggle" href="#" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.i.3.2">show code</a></div></div><div class="bs-docs-section" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.j"><h1 id="page-header" class="page-header" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.j.0">Page Header</h1><p data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.j.1"><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.j.1.0">A simple shell for an </span><code data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.j.1.1">h1</code><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.j.1.2"> to appropriately space out and segment sections of content on a page. It can utilize the </span><code data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.j.1.3">h1</code><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.j.1.4">’s default </span><code data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.j.1.5">small</code><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.j.1.6"> element, as well as most other components (with additional styles).</span></p><h2 id="page-header-static" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.j.2">Example</h2><div class="playground" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.j.3"><div class="bs-example" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.j.3.0"><div data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.j.3.0.0"></div></div><a class="code-toggle" href="#" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.j.3.2">show code</a></div></div><div class="bs-docs-section" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.k"><h1 id="wells" class="page-header" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.k.0">Wells</h1><p data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.k.1">Use the well as a simple effect on an element to give it an inset effect.</p><h2 id="well-static" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.k.2">Default Wells</h2><div class="playground" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.k.3"><div class="bs-example" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.k.3.0"><div data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.k.3.0.0"></div></div><a class="code-toggle" href="#" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.k.3.2">show code</a></div><h2 id="well-optins-static" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.k.4">Optional classes</h2><p data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.k.5">Control padding and rounded corners with two optional modifier classes.</p><div class="playground" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.k.6"><div class="bs-example" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.k.6.0"><div data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.k.6.0.0"></div></div><a class="code-toggle" href="#" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.k.6.2">show code</a></div></div><div class="bs-docs-section" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.l"><h1 id="glyphicons" class="page-header" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.l.0">Glyphicons</h1><p data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.l.1">Use them in buttons, button groups for a toolbar, navigation, or prepended form inputs.</p><h2 id="glyphicon-static" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.l.2">Example</h2><div class="playground" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.l.3"><div class="bs-example" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.l.3.0"><div data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.l.3.0.0"></div></div><a class="code-toggle" href="#" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.l.3.2">show code</a></div></div><div class="bs-docs-section" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.m"><h1 id="tables" class="page-header" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.m.0">Tables</h1><h2 id="table-basic" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.m.1">Example</h2><p data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.m.2"><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.m.2.0">Use the </span><code data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.m.2.1">striped</code><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.m.2.2">, </span><code data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.m.2.3">bordered</code><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.m.2.4">, </span><code data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.m.2.5">condensed</code><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.m.2.6"> and </span><code data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.m.2.7">hover</code><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.m.2.8"> props to customise the table.</span></p><div class="playground" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.m.3"><div class="bs-example" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.m.3.0"><div data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.m.3.0.0"></div></div><a class="code-toggle" href="#" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.m.3.2">show code</a></div><h2 id="table-responsive" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.m.4">Responsive</h2><p data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.m.5"><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.m.5.0">Add </span><code data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.m.5.1">responsive</code><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.m.5.2"> prop to make them scroll horizontally up to small devices (under 768px). When viewing on anything larger than 768px wide, you will not see any difference in these tables.</span></p><div class="playground" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.m.6"><div class="bs-example" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.m.6.0"><div data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.m.6.0.0"></div></div><a class="code-toggle" href="#" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.m.6.2">show code</a></div></div><div class="bs-docs-section" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.n"><h1 id="input" class="page-header" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.n.0">Input</h1><p data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.n.1"><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.n.1.0">Renders an input in bootstrap wrappers. Supports label, help, text input add-ons, validation and use as wrapper. Use </span><code data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.n.1.1">getValue()</code><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.n.1.2"> or </span><code data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.n.1.3">getChecked()</code><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.n.1.4"> to get the current state. The helper method </span><code data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.n.1.5">getInputDOMNode()</code><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.n.1.6"> returns the internal input element.</span></p><div class="playground" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.n.2"><div class="bs-example" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.n.2.0"><div data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.n.2.0.0"></div></div><a class="code-toggle" href="#" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.n.2.2">show code</a></div><h2 id="input-types" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.n.3">Types</h2><p data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.n.4"><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.n.4.0">Supports </span><code data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.n.4.1">select</code><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.n.4.2">, </span><code data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.n.4.3">textarea</code><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.n.4.4">, </span><code data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.n.4.5">static</code><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.n.4.6"> as well as standard HTML input types.</span></p><div class="playground" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.n.5"><div class="bs-example" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.n.5.0"><div data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.n.5.0.0"></div></div><a class="code-toggle" href="#" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.n.5.2">show code</a></div><h2 id="input-addons" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.n.6">Add-ons</h2><p data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.n.7"><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.n.7.0">Use </span><code data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.n.7.1">addonBefore</code><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.n.7.2"> and </span><code data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.n.7.3">addonAfter</code><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.n.7.4"> for normal addons, </span><code data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.n.7.5">buttonBefore</code><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.n.7.6"> and </span><code data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.n.7.7">buttonAfter</code><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.n.7.8"> for button addons. Exotic configurations may require some css on your side.</span></p><div class="playground" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.n.8"><div class="bs-example" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.n.8.0"><div data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.n.8.0.0"></div></div><a class="code-toggle" href="#" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.n.8.2">show code</a></div><h2 id="input-validation" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.n.9">Validation</h2><p data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.n.a"><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.n.a.0">Set </span><code data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.n.a.1">bsStyle</code><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.n.a.2"> to one of </span><code data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.n.a.3">success</code><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.n.a.4">, </span><code data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.n.a.5">warning</code><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.n.a.6"> or </span><code data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.n.a.7">error</code><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.n.a.8">. Add </span><code data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.n.a.9">hasFeedback</code><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.n.a.a"> to show glyphicon. Glyphicon may need additional styling if there is an add-on or no label.</span></p><div class="playground" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.n.b"><div class="bs-example" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.n.b.0"><div data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.n.b.0.0"></div></div><a class="code-toggle" href="#" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.n.b.2">show code</a></div><h2 id="input-horizontal" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.n.c">Horizontal forms</h2><p data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.n.d"><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.n.d.0">Use </span><code data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.n.d.1">labelClassName</code><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.n.d.2"> and </span><code data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.n.d.3">wrapperClassName</code><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.n.d.4"> properties to add col classes manually.</span><code data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.n.d.5">checkbox</code><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.n.d.6"> and </span><code data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.n.d.7">radio</code><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.n.d.8"> types need special treatment because label wraps input.</span></p><div class="playground" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.n.e"><div class="bs-example" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.n.e.0"><div data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.n.e.0.0"></div></div><a class="code-toggle" href="#" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.n.e.2">show code</a></div><h2 id="input-wrapper" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.n.f">Use as a wrapper</h2><p data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.n.g"><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.n.g.0">If </span><code data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.n.g.1">type</code><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.n.g.2"> is not set, child element(s) will be rendered instead of an input element.</span><code data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.n.g.3">getValue()</code><span data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.n.g.4"> will not work when used this way.</span></p><div class="playground" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.n.h"><div class="bs-example" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.n.h.0"><div data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.n.h.0.0"></div></div><a class="code-toggle" href="#" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.0.n.h.2">show code</a></div></div></div><div class="col-md-3" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.1"><div class="bs-docs-sidebar hidden-print affix-top" role="complementary" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.1.0"><nav class="bs-docs-sidenav" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.1.0.0"><ul class="bs-docs-sidenav nav" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.1.0.0.0"><li href="#buttons" class="" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.1.0.0.0.$=1$1:$1"><a href="#buttons" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.1.0.0.0.$=1$1:$1.0">Buttons</a><ul class="nav" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.1.0.0.0.$=1$1:$1.1"><li class="" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.1.0.0.0.$=1$1:$1.1.$=1$2:$2"><a href="#btn-groups" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.1.0.0.0.$=1$1:$1.1.$=1$2:$2.0">Button groups</a></li><li class="" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.1.0.0.0.$=1$1:$1.1.$=1$3:$3"><a href="#btn-dropdowns" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.1.0.0.0.$=1$1:$1.1.$=1$3:$3.0">Button dropdowns</a></li></ul></li><li class="" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.1.0.0.0.$=1$4:$4"><a href="#panels" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.1.0.0.0.$=1$4:$4.0">Panels</a></li><li class="" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.1.0.0.0.$=1$5:$5"><a href="#modals" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.1.0.0.0.$=1$5:$5.0">Modals</a></li><li class="" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.1.0.0.0.$=1$6:$6"><a href="#tooltips" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.1.0.0.0.$=1$6:$6.0">Tooltips</a></li><li class="" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.1.0.0.0.$=1$7:$7"><a href="#popovers" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.1.0.0.0.$=1$7:$7.0">Popovers</a></li><li class="" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.1.0.0.0.$=1$8:$8"><a href="#progress" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.1.0.0.0.$=1$8:$8.0">Progress bars</a></li><li class="" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.1.0.0.0.$=1$9:$9"><a href="#navs" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.1.0.0.0.$=1$9:$9.0">Navs</a></li><li class="" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.1.0.0.0.$=1$10:$10"><a href="#navbars" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.1.0.0.0.$=1$10:$10.0">Navbars</a></li><li class="" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.1.0.0.0.$=1$11:$11"><a href="#tabs" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.1.0.0.0.$=1$11:$11.0">Togglable tabs</a></li><li class="" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.1.0.0.0.$=1$12:$12"><a href="#pager" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.1.0.0.0.$=1$12:$12.0">Pager</a></li><li class="" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.1.0.0.0.$=1$13:$13"><a href="#alerts" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.1.0.0.0.$=1$13:$13.0">Alerts</a></li><li class="" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.1.0.0.0.$=1$14:$14"><a href="#carousels" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.1.0.0.0.$=1$14:$14.0">Carousels</a></li><li class="" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.1.0.0.0.$=1$15:$15"><a href="#grids" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.1.0.0.0.$=1$15:$15.0">Grids</a></li><li class="" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.1.0.0.0.$=1$16:$16"><a href="#listgroup" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.1.0.0.0.$=1$16:$16.0">List group</a></li><li class="" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.1.0.0.0.$=1$17:$17"><a href="#labels" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.1.0.0.0.$=1$17:$17.0">Labels</a></li><li class="" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.1.0.0.0.$=1$18:$18"><a href="#badges" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.1.0.0.0.$=1$18:$18.0">Badges</a></li><li class="" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.1.0.0.0.$=1$19:$19"><a href="#jumbotron" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.1.0.0.0.$=1$19:$19.0">Jumbotron</a></li><li class="" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.1.0.0.0.$=1$20:$20"><a href="#page-header" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.1.0.0.0.$=1$20:$20.0">Page Header</a></li><li class="" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.1.0.0.0.$=1$21:$21"><a href="#wells" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.1.0.0.0.$=1$21:$21.0">Wells</a></li><li class="" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.1.0.0.0.$=1$22:$22"><a href="#glyphicons" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.1.0.0.0.$=1$22:$22.0">Glyphicons</a></li><li class="" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.1.0.0.0.$=1$23:$23"><a href="#tables" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.1.0.0.0.$=1$23:$23.0">Tables</a></li><li class="" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.1.0.0.0.$=1$24:$24"><a href="#input" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.1.0.0.0.$=1$24:$24.0">Input</a></li></ul></nav><a class="back-to-top" href="#top" data-reactid=".jhu0vnmpz4.1.0.0.0.2.0.1.0.1">Back to top</a></div></div></div></div><footer class="bs-docs-footer" role="contentinfo" data-reactid=".jhu0vnmpz4.1.0.0.0.3"><div class="container" data-reactid=".jhu0vnmpz4.1.0.0.0.3.0"><div class="bs-docs-social" data-reactid=".jhu0vnmpz4.1.0.0.0.3.0.0"><ul class="bs-docs-social-buttons" data-reactid=".jhu0vnmpz4.1.0.0.0.3.0.0.0"><li data-reactid=".jhu0vnmpz4.1.0.0.0.3.0.0.0.0"><iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=react-bootstrap&repo=react-bootstrap&type=watch&count=true" width="90" height="20" title="Star on GitHub" data-reactid=".jhu0vnmpz4.1.0.0.0.3.0.0.0.0.0"></iframe></li><li data-reactid=".jhu0vnmpz4.1.0.0.0.3.0.0.0.1"><iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=react-bootstrap&repo=react-bootstrap&type=fork&count=true" width="92" height="20" title="Fork on GitHub" data-reactid=".jhu0vnmpz4.1.0.0.0.3.0.0.0.1.0"></iframe></li></ul></div><p data-reactid=".jhu0vnmpz4.1.0.0.0.3.0.1"><span data-reactid=".jhu0vnmpz4.1.0.0.0.3.0.1.0">Code licensed under </span><a href="https://github.com/react-bootstrap/react-bootstrap/blob/master/LICENSE" target="_blank" data-reactid=".jhu0vnmpz4.1.0.0.0.3.0.1.1">MIT</a><span data-reactid=".jhu0vnmpz4.1.0.0.0.3.0.1.2">.</span></p><ul class="bs-docs-footer-links muted" data-reactid=".jhu0vnmpz4.1.0.0.0.3.0.2"><li data-reactid=".jhu0vnmpz4.1.0.0.0.3.0.2.0"><span data-reactid=".jhu0vnmpz4.1.0.0.0.3.0.2.0.0">Currently v</span><span data-reactid=".jhu0vnmpz4.1.0.0.0.3.0.2.0.1">0.13.3</span></li><li data-reactid=".jhu0vnmpz4.1.0.0.0.3.0.2.1">·</li><li data-reactid=".jhu0vnmpz4.1.0.0.0.3.0.2.2"><a href="https://github.com/react-bootstrap/react-bootstrap/" data-reactid=".jhu0vnmpz4.1.0.0.0.3.0.2.2.0">GitHub</a></li><li data-reactid=".jhu0vnmpz4.1.0.0.0.3.0.2.3">·</li><li data-reactid=".jhu0vnmpz4.1.0.0.0.3.0.2.4"><a href="https://github.com/react-bootstrap/react-bootstrap/issues?state=open" data-reactid=".jhu0vnmpz4.1.0.0.0.3.0.2.4.0">Issues</a></li><li data-reactid=".jhu0vnmpz4.1.0.0.0.3.0.2.5">·</li><li data-reactid=".jhu0vnmpz4.1.0.0.0.3.0.2.6"><a href="https://github.com/react-bootstrap/react-bootstrap/releases" data-reactid=".jhu0vnmpz4.1.0.0.0.3.0.2.6.0">Releases</a></li></ul></div></footer></div></div></div><script data-reactid=".jhu0vnmpz4.1.1">window.INITIAL_PROPS = {"initialPath":"components.html"};
(function (w) {
var noop = function () {};
if (!w.console) {
w.console = {};
['log', 'info', 'warn', 'error'].forEach(function (method) {
w.console[method] = noop;
});
}
}(window));
</script><script src="vendor/codemirror/codemirror.js" data-reactid=".jhu0vnmpz4.1.2"></script><script src="vendor/codemirror/javascript.js" data-reactid=".jhu0vnmpz4.1.3"></script><script src="vendor/JSXTransformer.js" data-reactid=".jhu0vnmpz4.1.4"></script><script src="assets/bundle.js" data-reactid=".jhu0vnmpz4.1.5"></script></body></html>