#Options

Use any of the available button style types to quickly create a styled button. Just modify the bsStyle prop.

Button spacing

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 <ButtonToolbar />.

#Sizes

Fancy larger or smaller buttons? Add bsSize="large", bsSize="small", or bsSize="xsmall" for additional sizes.

show code

Create block level buttons—those that span the full width of a parent— by adding the block prop.

show code

#Active state

To set a buttons active state simply set the components active prop.

show code

#Button tags

The DOM element tag is choosen automatically for you based on the props you supply. Passing a href will result in the button using a <a /> element otherwise a <button /> element will be used.

show code

#Disabled state

Make buttons look unclickable by fading them back 50%. To do this add the disabled attribute to buttons.

show code

Cross-Browser compatibility

Because <Button /> will render an <a> tag in certain situations. Since anchor tags can't be disabled, the behavior is emulated as best it can be. Specifically, pointer-events: none; style is added to the anchor to prevent focusing, which is only supported in newer browser versions.

#Button loading state

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 <Button />’s props from a state change like below.

show code

#Props

Name	Type	Default	Description
active	boolean	false
block	boolean	false
bsClass	string	'btn'	Base CSS class and prefix for the component. Generally one should only change `bsClass` to provide new, non-Bootstrap, CSS styles for a component.
bsSize	one of: `"lg"`, `"large"`, `"sm"`, `"small"`, `"xs"`, `"xsmall"`		Component size variations.
bsStyle	one of: `"success"`, `"warning"`, `"danger"`, `"info"`, `"default"`, `"primary"`, `"link"`	'default'	Component visual or contextual style variants.
componentClass	elementType		You can use a custom element type for this component.
disabled	boolean	false
href	string
onClick	function
type	one of: `'button'`, `'reset'`, `'submit'`	'button'	Defines HTML button type attribute

Group a series of buttons together on a single line with the button group.

#Basic example

Wrap a series of <Button />s in a <ButtonGroup />.

show code

#Button toolbar

Combine sets of <ButtonGroup />s into a <ButtonToolbar /> for more complex components.

show code

#Sizing

Instead of applying button sizing props to every button in a group, just add bsSize prop to the <ButtonGroup />.

show code

#Nesting

You can place other button types within the <ButtonGroup /> like <DropdownButton />s.

show code

#Checkbox / Radio

For checkboxes or radio buttons styled as Bootstrap buttons, use the <ToggleButtonGroup> and <ToggleButton> components. The group behaves as a form component, where the value is an array of the selected eventKeys for checkbox groups or the selected eventKey for radio groups.

Uncontrolled

Controlled

Checkbox 1 (pre-checked)Checkbox 2Checkbox 3 (pre-checked)Checkbox 4 (disabled)

show code

#Vertical variation

Make a set of buttons appear vertically stacked rather than horizontally. Split button dropdowns are not supported here.

Just add vertical to the <ButtonGroup />.

show code

Moreover, you can have buttons be block level elements so they take the full width of their container, just add block to the <ButtonGroup />, in addition to the vertical you just added.

show code

#Justified button groups

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.

Style issues

There are some issues and workarounds required when using this property, please see bootstrap’s button group docs for more specifics.

Just add justified to the <ButtonGroup />.

Left Middle

show code

#Props

#ButtonGroup

Name	Type	Default	Description
block	boolean	false	Display block buttons; only useful when used with the "vertical" prop.
bsClass	string	'btn-group'	Base CSS class and prefix for the component. Generally one should only change `bsClass` to provide new, non-Bootstrap, CSS styles for a component.
justified	boolean	false
vertical	boolean	false

#ButtonToolbar

Name	Type	Default	Description
bsClass	string	'btn-toolbar'	Base CSS class and prefix for the component. Generally one should only change `bsClass` to provide new, non-Bootstrap, CSS styles for a component.

#ToggleButtonGroup

Name	Type	Default	Description
name	string		An HTML `<input>` name for each child button. Required if `type` is set to `'radio'`
onChange	function		controls `values` Callback fired when a button is pressed, depending on whether the `type` is `'radio'` or `'checkbox'`, `onChange` will be called with the value or array of active values
type required	one of: `'checkbox'`, `'radio'`	'radio'	The input `type` of the rendered buttons, determines the toggle behavior of the buttons
value	any		controlled by: `onChange`, initial prop: `defaultValue` The value, or array of values, of the active (pressed) buttons

#ToggleButton

Name	Type	Description
checked	boolean	The checked state of the input, managed by ``` automatically
disabled	boolean	The disabled state of both the label and input
name	string	The HTML input name, used to group like checkboxes or radio buttons together semantically
onChange	function	[onChange description]
type	[type]	The `<input>` `type`
value required	any	The value of the input, and unique identifier in the ToggleButtonGroup

#Single button dropdowns

Create a dropdown button with the <DropdownButton /> component.

#Split button dropdowns

Similarly, create split button dropdowns with the <SplitButton /> component.

#Sizing

Dropdowns work with buttons of all sizes.

show code

#No caret variation

Remove the caret using the noCaret prop.

show code

#Dropup variation

Trigger dropdown menus that site above the button by adding the dropup prop.

show code

#Dropdown right variation

Trigger dropdown menus that align to the right of the button using the pullRight prop.

show code

#Dropdown Customization

If the default handling of the dropdown menu and toggle components aren't to your liking, you can customize them, by using the more basic Dropdown Component to explicitly specify the Toggle and Menu components

Additional Import Options

As a convenience Toggle and Menu components available as static properties on the Dropdown component. However, you can also import them directly, from the /lib directory like: require("react-bootstrap/lib/DropdownToggle").

show code

Custom Dropdown Components

For those that want to customize everything, you can forgo the included Toggle and Menu components, and create your own. In order to tell the Dropdown component what role your custom components play, add a special prop bsRole to your menu or toggle components. The Dropdown expects at least one component with bsRole="toggle" and exactly one with bsRole="menu". Custom toggle and menu components must be able to accept refs.

show code

#Props

#DropdownButton

Name	Type	Default	Description
bsSize	string		Component size variations.
bsStyle	string		Component visual or contextual style variants.
componentClass	elementType	ButtonGroup	You can use a custom element type for this component.
defaultOpen	boolean
disabled	boolean		Whether or not component is disabled.
dropup	boolean		The menu will open above the dropdown button, instead of below it.
id required	string\|number		An html id attribute, necessary for assistive technologies, such as screen readers.
noCaret	boolean
onSelect	function		A callback fired when a menu item is selected. `(eventKey: any, event: Object) => any`
onToggle	function		controls `open` A callback fired when the Dropdown wishes to change visibility. Called with the requested `open` value, the DOM event, and the source that fired it: `'click'`,`'keydown'`,`'rootClose'`, or `'select'`. `function(Boolean isOpen, Object event, { String source }) {}`
open	boolean		controlled by: `onToggle`, initial prop: `defaultOpen` Whether or not the Dropdown is visible.
pullRight	boolean		Align the menu to the right side of the Dropdown toggle
role	string		If `'menuitem'`, causes the dropdown to behave like a menu item rather than a menu button.
rootCloseEvent	one of: `'click'`, `'mousedown'`		Which event when fired outside the component will cause it to be closed
title required	node

#SplitButton

Name	Type	Default	Description
bsSize	string		Component size variations.
bsStyle	string		Component visual or contextual style variants.
componentClass	elementType	ButtonGroup	You can use a custom element type for this component.
defaultOpen	boolean
disabled	boolean		Whether or not component is disabled.
dropup	boolean		The menu will open above the dropdown button, instead of below it.
href	string
id required	string\|number		An html id attribute, necessary for assistive technologies, such as screen readers.
onClick	function
onSelect	function		A callback fired when a menu item is selected. `(eventKey: any, event: Object) => any`
onToggle	function		controls `open` A callback fired when the Dropdown wishes to change visibility. Called with the requested `open` value, the DOM event, and the source that fired it: `'click'`,`'keydown'`,`'rootClose'`, or `'select'`. `function(Boolean isOpen, Object event, { String source }) {}`
open	boolean		controlled by: `onToggle`, initial prop: `defaultOpen` Whether or not the Dropdown is visible.
pullRight	boolean		Align the menu to the right side of the Dropdown toggle
role	string		If `'menuitem'`, causes the dropdown to behave like a menu item rather than a menu button.
rootCloseEvent	one of: `'click'`, `'mousedown'`		Which event when fired outside the component will cause it to be closed
title required	node		The content of the split button.
toggleLabel	string		Accessible label for the toggle; the value of `title` if not specified.

#Dropdown

Name	Type	Default	Description
children	node		The children of a Dropdown may be a `<Dropdown.Toggle>` or a `<Dropdown.Menu>`.
componentClass	elementType	ButtonGroup	You can use a custom element type for this component.
defaultOpen	boolean
disabled	boolean		Whether or not component is disabled.
dropup	boolean		The menu will open above the dropdown button, instead of below it.
id required	string\|number		An html id attribute, necessary for assistive technologies, such as screen readers.
onSelect	function		A callback fired when a menu item is selected. `(eventKey: any, event: Object) => any`
onToggle	function		controls `open` A callback fired when the Dropdown wishes to change visibility. Called with the requested `open` value, the DOM event, and the source that fired it: `'click'`,`'keydown'`,`'rootClose'`, or `'select'`. `function(Boolean isOpen, Object event, { String source }) {}`
open	boolean		controlled by: `onToggle`, initial prop: `defaultOpen` Whether or not the Dropdown is visible.
pullRight	boolean		Align the menu to the right side of the Dropdown toggle
role	string		If `'menuitem'`, causes the dropdown to behave like a menu item rather than a menu button.
rootCloseEvent	one of: `'click'`, `'mousedown'`		Which event when fired outside the component will cause it to be closed

This component represents a menu item in a dropdown.

It supports the basic anchor properties href, target, title.

It also supports different properties of the normal Bootstrap MenuItem.

header: To add a header label to sections
divider: Adds an horizontal divider between sections
disabled: shows the item as disabled, and prevents onSelect from firing
eventKey: passed to the callback
onSelect: a callback that is called when the user clicks the item.

The callback is called with the following arguments: event and eventKey

show code

#Props

Name	Type	Default	Description
active	boolean		Highlight the menu item as active.
bsClass	string	'dropdown'	Base CSS class and prefix for the component. Generally one should only change `bsClass` to provide new, non-Bootstrap, CSS styles for a component.
disabled	boolean	false	Disable the menu item, making it unselectable.
divider	all	false	Styles the menu item as a horizontal rule, providing visual separation between groups of menu items.
eventKey	any		Value passed to the `onSelect` handler, useful for identifying the selected menu item.
header	boolean	false	Styles the menu item as a header label, useful for describing a group of menu items.
href	string		HTML `href` attribute corresponding to `a.href`.
onClick	function		Callback fired when the menu item is clicked.
onSelect	function		Callback fired when the menu item is selected. `(eventKey: any, event: Object) => any`

React-Bootstrap offers a number of accessible overlay components built using react-overlays.

#Static Markup

A modal dialog component

show code

#Basic example

A modal with header, body, and set of actions in the footer. Use <Modal/> in combination with other components to show or hide your Modal. The <Modal/> Component comes with a few convenient "sub components": <Modal.Header/>, <Modal.Title/>, <Modal.Body/>, and <Modal.Footer/>, which you can use to build the Modal content.

Click to get the full Modal experience!

show code

Additional Import Options

The Modal Header, Title, Body, and Footer components are available as static properties the <Modal/> component, but you can also, import them directly from the /lib directory like: require("react-bootstrap/lib/ModalHeader").

#Contained Modal

You will need to add the following css to your project and ensure that your container has the modal-container class.

.modal-container {
  position: relative;
}
.modal-container .modal, .modal-container .modal-backdrop {
  position: absolute;
}

show code

#Sizing modals using standard Bootstrap props

You can specify a bootstrap large or small modal by using the "bsSize" prop.

show code

#Sizing modals using custom CSS

You can apply custom css to the modal dialog div using the "dialogClassName" prop. Example is using a custom css class with width set to 90%.

show code

#Props

#Modal

Name	Type	Default	Description
animation	boolean	true	Open and close the Modal with a slide and fade animation.
autoFocus	boolean		When `true` The modal will automatically shift focus to itself when it opens, and replace it to the last focused element when it closes. Generally this should never be set to false as it makes the Modal less accessible to assistive technologies, like screen-readers.
backdrop	one of: `'static'`, `true`, `false`		Include a backdrop component. Specify 'static' for a backdrop that doesn't trigger an "onHide" when clicked.
backdropClassName	string		Add an optional extra class name to .modal-backdrop It could end up looking like class="modal-backdrop foo-modal-backdrop in".
bsClass	string	'modal'	Base CSS class and prefix for the component. Generally one should only change `bsClass` to provide new, non-Bootstrap, CSS styles for a component.
bsSize	one of: `"lg"`, `"large"`, `"sm"`, `"small"`		Component size variations.
dialogClassName	string		A css class to apply to the Modal dialog DOM node.
dialogComponentClass	elementType	ModalDialog	A Component type that provides the modal content Markup. This is a useful prop when you want to use your own styles and markup to create a custom modal component.
enforceFocus	boolean		When `true` The modal will prevent focus from leaving the Modal while open. Consider leaving the default value here, as it is necessary to make the Modal work well with assistive technologies, such as screen readers.
keyboard	boolean		Close the modal when escape key is pressed
onEnter	function		Callback fired before the Modal transitions in
onEntered	function		Callback fired after the Modal finishes transitioning in
onEntering	function		Callback fired as the Modal begins to transition in
onExit	function		Callback fired right before the Modal transitions out
onExited	function		Callback fired after the Modal finishes transitioning out
onExiting	function		Callback fired as the Modal begins to transition out
onHide	function		A callback fired when the header closeButton or non-static backdrop is clicked. Required if either are specified.
restoreFocus	boolean		When `true` The modal will restore focus to previously focused element once modal is hidden
show	boolean		When `true` The modal will show itself.

#Modal.Header

Name	Type	Default	Description
bsClass	string	'modal-header'	Base CSS class and prefix for the component. Generally one should only change `bsClass` to provide new, non-Bootstrap, CSS styles for a component.
closeButton	boolean	false	Specify whether the Component should contain a close button
closeLabel	string	'Close'	Provides an accessible label for the close button. It is used for Assistive Technology when the label text is not readable.
onHide	function		A Callback fired when the close button is clicked. If used directly inside a Modal component, the onHide will automatically be propagated up to the parent Modal `onHide`.

#Modal.Title

Name	Type	Default	Description
bsClass	string	'modal-title'	Base CSS class and prefix for the component. Generally one should only change `bsClass` to provide new, non-Bootstrap, CSS styles for a component.
componentClass	elementType	'h4'	You can use a custom element type for this component.

#Modal.Body

Name	Type	Default	Description
bsClass	string	'modal-body'	Base CSS class and prefix for the component. Generally one should only change `bsClass` to provide new, non-Bootstrap, CSS styles for a component.
componentClass	elementType	'div'	You can use a custom element type for this component.

#Modal.Footer

Name	Type	Default	Description
bsClass	string	'modal-footer'	Base CSS class and prefix for the component. Generally one should only change `bsClass` to provide new, non-Bootstrap, CSS styles for a component.
componentClass	elementType	'div'	You can use a custom element type for this component.

Tooltip component for a more stylish alternative to that anchor tag title attribute.

show code

#With OverlayTrigger

Attach and position tooltips with OverlayTrigger.

show code

#In text copy

Positioned tooltip in text copy.

Tight pants next level keffiyeh you probably haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel have aterry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan whatever keytar, scenester farm-to-table banksy Austin twitter handle freegan cred raw denim single-origin coffee viral.

show code

#Props

#OverlayTrigger

Name	Type	Default	Description
animation	boolean \| elementType	Fade	Use animation
defaultOverlayShown	boolean	false	The initial visibility state of the Overlay. For more nuanced visibility control, consider using the Overlay component directly.
delay	number		A millisecond delay amount to show and hide the Overlay once triggered
delayHide	number		A millisecond delay amount before hiding the Overlay once triggered.
delayShow	number		A millisecond delay amount before showing the Overlay once triggered.
onEnter	function		Callback fired before the Overlay transitions in
onEntered	function		Callback fired after the Overlay finishes transitioning in
onEntering	function		Callback fired as the Overlay begins to transition in
onExit	function		Callback fired right before the Overlay transitions out
onExited	function		Callback fired after the Overlay finishes transitioning out
onExiting	function		Callback fired as the Overlay begins to transition out
overlay required	node		An element or text to overlay next to the target.
placement	one of: `'top'`, `'right'`, `'bottom'`, `'left'`	'right'	Sets the direction of the Overlay.
rootClose	boolean	false	Specify whether the overlay should trigger onHide when the user clicks outside the overlay
trigger	triggerType \| array<triggerType>	['hover', 'focus']	Specify which action or actions trigger Overlay visibility

#Tooltip

Name	Type	Default	Description
arrowOffsetLeft	number \| string		The "left" position value for the Tooltip arrow.
arrowOffsetTop	number \| string		The "top" position value for the Tooltip arrow.
bsClass	string	'tooltip'	Base CSS class and prefix for the component. Generally one should only change `bsClass` to provide new, non-Bootstrap, CSS styles for a component.
id required	string\|number		An html id attribute, necessary for accessibility
placement	one of: `'top'`, `'right'`, `'bottom'`, `'left'`	'right'	Sets the direction the Tooltip is positioned towards.
positionLeft	number \| string		The "left" position value for the Tooltip.
positionTop	number \| string		The "top" position value for the Tooltip.

The Popover, offers a more robust alternative to the Tooltip for displaying overlays of content.

show code

#With OverlayTrigger

The Popover component, like the Tooltip can be used with an OverlayTrigger Component, and positioned around it.

show code

#Trigger behaviors

It's inadvisable to use "hover" or "focus" triggers for popovers, because they have poor accessibility from keyboard and on mobile devices.

show code

#Popover component in container

Specify container to control the DOM element to which to append the overlay. This element must be a positioned element to allow correctly positioning the overlay.

show code

#Positioned popover components in scrolling container

show code

#Props

Name	Type	Default	Description
arrowOffsetLeft	number \| string		The "left" position value for the Popover arrow.
arrowOffsetTop	number \| string		The "top" position value for the Popover arrow.
bsClass	string	'popover'	Base CSS class and prefix for the component. Generally one should only change `bsClass` to provide new, non-Bootstrap, CSS styles for a component.
id required	string		An html id attribute, necessary for accessibility
placement	one of: `'top'`, `'right'`, `'bottom'`, `'left'`	'right'	Sets the direction the Popover is positioned towards.
positionLeft	number \| string		The "left" position value for the Popover.
positionTop	number \| string		The "top" position value for the Popover.
title	node		Title content

The OverlayTrigger component is great for most use cases, but as a higher level abstraction it can lack the flexibility needed to build more nuanced or custom behaviors into your Overlay components. For these cases it can be helpful to forgo the trigger and use the Overlay component directly.

show code

#Use Overlay instead of Tooltip and Popover

You don't need to use the provided Tooltip or Popover components. Creating custom overlays is as easy as wrapping some markup in an Overlay component.

show code

#Props

Name	Type	Default	Description
animation	boolean \| elementType	Fade	Use animation
onEnter	function		Callback fired before the Overlay transitions in
onEntered	function		Callback fired after the Overlay finishes transitioning in
onEntering	function		Callback fired as the Overlay begins to transition in
onExit	function		Callback fired right before the Overlay transitions out
onExited	function		Callback fired after the Overlay finishes transitioning out
onExiting	function		Callback fired as the Overlay begins to transition out
onHide	function		A callback invoked by the overlay when it wishes to be hidden. Required if `rootClose` is specified.
placement	one of: `'top'`, `'right'`, `'bottom'`, `'left'`	'right'	Sets the direction of the Overlay.
rootClose	boolean	false	Specify whether the overlay should trigger onHide when the user clicks outside the overlay
show	boolean	false	Set the visibility of the Overlay

React-Bootstrap offers a variety of responsive, accessible components for setting up navigation both across your website and within your pages.

Navs come in two styles, pills and tabs. Disable a tab by adding disabled.

show code

#Dropdown

Add dropdowns using the NavDropdown component.

show code

#Stacked

They can also be stacked vertically.

show code

#Justified

They can be justified to take the full width of their parent.

show code

#Props

#Nav

Name	Type	Default	Description
activeHref	string		Marks the child NavItem with a matching `href` prop as active.
activeKey	any		Marks the NavItem with a matching `eventKey` as active. Has a higher precedence over `activeHref`.
bsClass	string	'nav'	Base CSS class and prefix for the component. Generally one should only change `bsClass` to provide new, non-Bootstrap, CSS styles for a component.
bsStyle	one of: `"tabs"`, `"pills"`		Component visual or contextual style variants.
justified	all	false
navbar	boolean		Apply styling an alignment for use in a Navbar. This prop will be set automatically when the Nav is used inside a Navbar.
onSelect	function		A callback fired when a NavItem is selected. `function ( Any eventKey, SyntheticEvent event? )`
pullLeft	boolean	false	Float the Nav to the left. When `navbar` is `true` the appropriate contextual classes are added as well.
pullRight	boolean	false	Float the Nav to the right. When `navbar` is `true` the appropriate contextual classes are added as well.
role	string		ARIA role for the Nav, in the context of a TabContainer, the default will be set to "tablist", but can be overridden by the Nav when set explicitly. When the role is set to "tablist" NavItem focus is managed according to the ARIA authoring practices for tabs: https://www.w3.org/TR/2013/WD-wai-aria-practices-20130307/#tabpanel
stacked	boolean	false	NavItems are be positioned vertically.

#NavItem

Name	Type	Default
active	boolean	false
disabled	boolean	false
eventKey	any
href	string
onClick	function
onSelect	function
role	string

Navbars are responsive meta components that serve as navigation headers for your application or site.

They also support all the different Bootstrap classes as properties. Just camelCase the css class and remove navbar from it.

For example navbar-fixed-top becomes the property fixedTop. The different properties are fixedTop, fixedBottom, staticTop, inverse, and fluid.

You can also align elements to the right by specifying the pullRight prop on the Nav, and other sub-components.

#Navbar Basic Example

show code

Additional Import Options

The Navbar Header, Toggle, Brand, and Collapse components are available as static properties on the <Navbar> component but you can also import them directly from the /lib directory like: require("react-bootstrap/lib/NavbarHeader").

#Responsive Navbars

To have a mobile-friendly Navbar, add a Navbar.Toggle to your Header and wrap your Navs in a Navbar.Collapse component. The Navbar will automatically make the toggle control the collapse.

Set the defaultExpanded prop to make the Navbar start expanded. Set collapseOnSelect to make the Navbar collapse automatically when the user selects an item. You can also finely control the collapsing behavior by using the expanded and onToggle props.

show code

#Forms

Use the Navbar.Form convenience component to apply proper margins and alignment to form components.

show code

#Text and Non-nav links

Loose text and links can be wraped in the convenience components: Navbar.Link and Navbar.Text

show code

#Props

#Navbar

Name	Type	Default	Description
bsStyle	one of: `"default"`, `"inverse"`	'default'	Component visual or contextual style variants.
collapseOnSelect	boolean	false	Sets `expanded` to `false` after the onSelect event of a descendant of a child `<Nav>`. Does nothing if no `<Nav>` or `<Nav>` descendants exist. The onSelect callback should be used instead for more complex operations that need to be executed after the `select` event of `<Nav>` descendants.
componentClass	elementType	'nav'	Set a custom element for this component.
expanded	boolean		controlled by: `onToggle`, initial prop: `defaultExpanded` Explicitly set the visiblity of the navbar body
fixedBottom	boolean	false	Create a fixed navbar along the bottom of the screen, that scrolls with the page
fixedTop	boolean	false	Create a fixed navbar along the top of the screen, that scrolls with the page
fluid	boolean	false	Allow the Navbar to fluidly adjust to the page or container width, instead of at the predefined screen breakpoints
inverse	boolean	false	An alternative dark visual style for the Navbar
onSelect	function		A callback fired when a descendant of a child `<Nav>` is selected. Should be used to execute complex closing or other miscellaneous actions desired after selecting a descendant of `<Nav>`. Does nothing if no `<Nav>` or `<Nav>` descendants exist. The callback is called with an eventKey, which is a prop from the selected `<Nav>` descendant, and an event. `function ( Any eventKey, SyntheticEvent event? )` For basic closing behavior after all `<Nav>` descendant onSelect events in mobile viewports, try using collapseOnSelect. Note: If you are manually closing the navbar using this `OnSelect` prop, ensure that you are setting `expanded` to false and not toggling between true and false.
onToggle	function		controls `expanded` A callback fired when the `<Navbar>` body collapses or expands. Fired when a `<Navbar.Toggle>` is clicked and called with the new `expanded` boolean value.
role	string
staticTop	boolean	false	Create a full-width navbar that scrolls away with the page

#Navbar.Toggle

Name	Type	Default	Description
children	node		The toggle content, if left empty it will render the default toggle (seen above).
onClick	function

Breadcrumbs are used to indicate the current page's location. Add active attribute to active Breadcrumb.Item.

Do not set both active and href attributes. active overrides href and span element is rendered instead of a.

#Breadcrumbs Example

show code

#Props

Breadcrumb component itself doesn't have any specific public properties

#Breadcrumb.Item

Name	Type	Default	Description
active	boolean	false	If set to true, renders `span` instead of `a`
href	string		`href` attribute for the inner `a` element
target	string		`target` attribute for the inner `a` element
title	node		`title` attribute for the inner `a` element

Add quick, dynamic tab functionality to transition through panes of local content.

#Uncontrolled

Allow the component to control its own state.

Tab 2 content

show code

#Controlled

Pass down the active state on render via props.

Tab 1 content

show code

#No animation

Set the animation prop to false

Tab 1 content

show code

#Tabs with Dropdown

show code

#Custom Tab Layout

For more complex layouts the flexible TabContainer, TabContent, andTabPane components along with any style of Nav allow you to quickly piece together your own Tabs component with additional markup needed.

Just create a set of NavItems each with an eventKey corresponding to the eventKey of a TabPane. Wrap the whole thing in a TabContainer and you have fully functioning custom tabs component. Check out the below example making use of the grid system and pills.

Tab 1 content

show code

#Props

#Tabs

Name	Type	Default	Description
activeKey	any		controlled by: `onSelect`, initial prop: `defaultActiveKey` Mark the Tab with a matching `eventKey` as active.
animation	boolean	true
bsStyle	one of: `'tabs'`, `'pills'`	'tabs'	Navigation style
id	requiredForA11y
mountOnEnter	boolean	false	Wait until the first "enter" transition to mount tabs (add them to the DOM)
onSelect	function		controls `activeKey` Callback fired when a Tab is selected. `function ( Any eventKey, SyntheticEvent event? )`
unmountOnExit	boolean	false	Unmount tabs (remove it from the DOM) when it is no longer visible

#Tab

Name	Type	Default	Description
animation	boolean \| elementType		Use animation when showing or hiding `<TabPane>`s. Use `false` to disable, `true` to enable the default `<Fade>` animation or any `<Transition>` component.
aria-labelledby	string
bsClass	string	'tab-pane'	Base CSS class and prefix for the component. Generally one should only change `bsClass` to provide new, non-Bootstrap, CSS styles for a component.
disabled	boolean
eventKey	any		Uniquely identify the `<TabPane>` among its siblings.
id	string
mountOnEnter	boolean		Wait until the first "enter" transition to mount the tab (add it to the DOM)
onEnter	function		Transition onEnter callback when animation is not `false`
onEntered	function		Transition onEntered callback when animation is not `false`
onEntering	function		Transition onEntering callback when animation is not `false`
onExit	function		Transition onExit callback when animation is not `false`
onExited	function		Transition onExited callback when animation is not `false`
onExiting	function		Transition onExiting callback when animation is not `false`
tabClassName	string		tabClassName is used as className for the associated NavItem
title	node
unmountOnExit	boolean		Unmount the tab (remove it from the DOM) when it is no longer visible

#TabContainer

Name	Type	Default	Description
activeKey	any		controlled by: `onSelect`, initial prop: `defaultActiveKey` The `eventKey` of the currently active tab.
generateChildId	function	(eventKey, type) => `${this.props.id}-${type}-${key}`	A function that takes an `eventKey` and `type` and returns a unique id for child tab `<NavItem>`s and `<TabPane>`s. The function must be a pure function, meaning it should always return the same id for the same set of inputs. The default value requires that an `id` to be set for the `<TabContainer>`. The `type` argument will either be `"tab"` or `"pane"`.
id	custom		HTML id attribute, required if no `generateChildId` prop is specified.
onSelect	function		controls `activeKey` A callback fired when a tab is selected.

#TabContent

Name	Type	Default	Description
animation	boolean \| elementType	true	Sets a default animation strategy for all children `<TabPane>`s. Use `false` to disable, `true` to enable the default `<Fade>` animation or any `<Transition>` component.
bsClass	string	'tab'	Base CSS class and prefix for the component. Generally one should only change `bsClass` to provide new, non-Bootstrap, CSS styles for a component.
componentClass	elementType	'div'	You can use a custom element type for this component.
mountOnEnter	boolean	false	Wait until the first "enter" transition to mount tabs (add them to the DOM)
unmountOnExit	boolean	false	Unmount tabs (remove it from the DOM) when they are no longer visible

#TabPane

Name	Type	Default	Description
animation	boolean \| elementType		Use animation when showing or hiding `<TabPane>`s. Use `false` to disable, `true` to enable the default `<Fade>` animation or any `<Transition>` component.
aria-labelledby	string
bsClass	string	'tab-pane'	Base CSS class and prefix for the component. Generally one should only change `bsClass` to provide new, non-Bootstrap, CSS styles for a component.
eventKey	any		Uniquely identify the `<TabPane>` among its siblings.
id	string
mountOnEnter	boolean		Wait until the first "enter" transition to mount the tab (add it to the DOM)
onEnter	function		Transition onEnter callback when animation is not `false`
onEntered	function		Transition onEntered callback when animation is not `false`
onEntering	function		Transition onEntering callback when animation is not `false`
onExit	function		Transition onExit callback when animation is not `false`
onExited	function		Transition onExited callback when animation is not `false`
onExiting	function		Transition onExiting callback when animation is not `false`
unmountOnExit	boolean		Unmount the tab (remove it from the DOM) when it is no longer visible

Provide pagination links for your site or app with the multi-page pagination component. Set items to the number of pages. activePage prop dictates which page is active

1
2
3
4
5
6
7
8
9
10

1
2
3
4
5
6
7
8
9
10

1
2
3
4
5
6
7
8
9
10

show code

#More options

such as first, last, previous, next, boundaryLinks and ellipsis.

show code

#Props

Name	Type	Default	Description
activePage	number	1
boundaryLinks	boolean	false	When `true`, will display the first and the last button page when displaying ellipsis.
bsClass	string	'pagination'	Base CSS class and prefix for the component. Generally one should only change `bsClass` to provide new, non-Bootstrap, CSS styles for a component.
buttonComponentClass	elementType		You can use a custom element for the buttons
ellipsis	boolean \| node	true	When `true`, will display the default node value ('…'). Otherwise, will display provided node (when specified).
first	boolean \| node	false	When `true`, will display the default node value ('«'). Otherwise, will display provided node (when specified).
items	number	1
last	boolean \| node	false	When `true`, will display the default node value ('»'). Otherwise, will display provided node (when specified).
maxButtons	number	0
next	boolean \| node	false	When `true`, will display the default node value ('›'). Otherwise, will display provided node (when specified).
onSelect	function
prev	boolean \| node	false	When `true`, will display the default node value ('‹'). Otherwise, will display provided node (when specified).

Quick previous and next links.

#Centers by default

show code

#Aligned

Set the previous or next prop to true, to align left or right.

show code

#Disabled

Set the disabled prop to true to disable the link.

show code

#Props

#Pager

Name	Type	Default	Description
bsClass	string	'pager'	Base CSS class and prefix for the component. Generally one should only change `bsClass` to provide new, non-Bootstrap, CSS styles for a component.
onSelect	function

#Pager.Item

There are no public props for this component.

The components in this section offer different ways to structure and present data on your page.

#Basic Grid

<Col xs={12} md={8} />

<Col xs={6} md={4} />

<Col xsHidden md={4} />

<Col xs={6} xsOffset={6} />

<Col md={6} mdPush={6} />

<Col md={6} mdPull={6} />

show code

#Clearfix

Below, the columns won't clear correctly in viewport sm (768px ≤ width < 992px).

<Col sm={6} md={3} />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec hendrerit tempor tellus. Donec pretium posuere tellus. Proin quam nisl, tincidunt et, mattis eget, convallis nec, purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla posuere.

<Col sm={6} md={3} />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec hendrerit tempor tellus. Donec pretium posuere tellus. Proin quam nisl, tincidunt et, mattis eget, convallis nec, purus.

<Col sm={6} md={3} />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec hendrerit tempor tellus. Donec pretium posuere tellus. Proin quam nisl, tincidunt et, mattis eget, convallis nec, purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla posuere.

<Col sm={6} md={3} />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec hendrerit tempor tellus.

show code

Introduce Clearfix, set to visible for the viewports with issue, so that columns clear correctly.

<Col sm={6} md={3} />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec hendrerit tempor tellus. Donec pretium posuere tellus. Proin quam nisl, tincidunt et, mattis eget, convallis nec, purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla posuere.

<Col sm={6} md={3} />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec hendrerit tempor tellus. Donec pretium posuere tellus. Proin quam nisl, tincidunt et, mattis eget, convallis nec, purus.

<Clearfix visibleSmBlock />

<Col sm={6} md={3} />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec hendrerit tempor tellus. Donec pretium posuere tellus. Proin quam nisl, tincidunt et, mattis eget, convallis nec, purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla posuere.

<Col sm={6} md={3} />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec hendrerit tempor tellus.

show code

#Props

#Grid

Name	Type	Default	Description
bsClass	string	'container'	Base CSS class and prefix for the component. Generally one should only change `bsClass` to provide new, non-Bootstrap, CSS styles for a component.
componentClass	elementType	'div'	You can use a custom element for this component
fluid	boolean	false	Turn any fixed-width grid layout into a full-width layout by this property. Adds `container-fluid` class.

#Row

Name	Type	Default	Description
bsClass	string	'row'	Base CSS class and prefix for the component. Generally one should only change `bsClass` to provide new, non-Bootstrap, CSS styles for a component.
componentClass	elementType	'div'	You can use a custom element type for this component.

#Col

Name	Type	Default	Description
bsClass	string	'col'	Base CSS class and prefix for the component. Generally one should only change `bsClass` to provide new, non-Bootstrap, CSS styles for a component.
componentClass	elementType	'div'	You can use a custom element type for this component.
lg	number		The number of columns you wish to span for Large devices Desktops (≥1200px) class-prefix `col-lg-`
lgHidden	boolean		Hide column on Large devices Desktops adds class `hidden-lg`
lgOffset	number		Move columns to the right for Large devices Desktops class-prefix `col-lg-offset-`
lgPull	number		Change the order of grid columns to the left for Large devices Desktops class-prefix `col-lg-pull-`
lgPush	number		Change the order of grid columns to the right for Large devices Desktops class-prefix `col-lg-push-`
md	number		The number of columns you wish to span for Medium devices Desktops (≥992px) class-prefix `col-md-`
mdHidden	boolean		Hide column on Medium devices Desktops adds class `hidden-md`
mdOffset	number		Move columns to the right for Medium devices Desktops class-prefix `col-md-offset-`
mdPull	number		Change the order of grid columns to the left for Medium devices Desktops class-prefix `col-md-pull-`
mdPush	number		Change the order of grid columns to the right for Medium devices Desktops class-prefix `col-md-push-`
sm	number		The number of columns you wish to span for Small devices Tablets (≥768px) class-prefix `col-sm-`
smHidden	boolean		Hide column on Small devices Tablets adds class `hidden-sm`
smOffset	number		Move columns to the right for Small devices Tablets class-prefix `col-sm-offset-`
smPull	number		Change the order of grid columns to the left for Small devices Tablets class-prefix `col-sm-pull-`
smPush	number		Change the order of grid columns to the right for Small devices Tablets class-prefix `col-sm-push-`
xs	number		The number of columns you wish to span for Extra small devices Phones (<768px) class-prefix `col-xs-`
xsHidden	boolean		Hide column on Extra small devices Phones adds class `hidden-xs`
xsOffset	number		Move columns to the right for Extra small devices Phones class-prefix `col-xs-offset-`
xsPull	number		Change the order of grid columns to the left for Extra small devices Phones class-prefix `col-xs-pull-`
xsPush	number		Change the order of grid columns to the right for Extra small devices Phones class-prefix `col-xs-push-`

#Clearfix

Name	Type	Default	Description
bsClass	string	'clearfix'	Base CSS class and prefix for the component. Generally one should only change `bsClass` to provide new, non-Bootstrap, CSS styles for a component.
componentClass	elementType	'div'	You can use a custom element type for this component.
visibleLgBlock	boolean		Apply clearfix on Large devices Desktops adds class `visible-lg-block`
visibleMdBlock	boolean		Apply clearfix on Medium devices Desktops adds class `visible-md-block`
visibleSmBlock	boolean		Apply clearfix on Small devices Tablets adds class `visible-sm-block`
visibleXsBlock	boolean		Apply clearfix on Extra small devices Phones adds class `visible-xs-block`

A lightweight, flexible component that can optionally extend the entire viewport to showcase key content on your site.

Hello, world!

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

show code

#Props

Name	Type	Default	Description
bsClass	string	'jumbotron'	Base CSS class and prefix for the component. Generally one should only change `bsClass` to provide new, non-Bootstrap, CSS styles for a component.
componentClass	elementType	'div'	You can use a custom element type for this component.

A simple shell for an h1 to appropriately space out and segment sections of content on a page. It can utilize the h1’s default small element, as well as most other components (with additional styles).

show code

#Props

Name	Type	Default	Description
bsClass	string	'page-header'	Base CSS class and prefix for the component. Generally one should only change `bsClass` to provide new, non-Bootstrap, CSS styles for a component.

List groups are a flexible and powerful component for displaying not only simple lists of elements, but complex ones with custom content.

#Centers by default

Item 1
Item 2
...

show code

#Linked

Set the href or onClick prop on ListGroupItem, to create a linked or clickable element.

Link 1 Link 2

show code

#Styling by state

Set the active or disabled prop to true to mark or disable the item.

Link 1 Link 2 Link 3

show code

#Styling by color

Set the bsStyle prop to style the item

Success
Info
Warning
Danger

show code

#With header

Set the header prop to create a structured item, with a heading and a body area.

Heading 1

Some body text

Heading 2

Linked item

Heading 3

Danger styling

show code

#With custom component children

When using ListGroupItems directly, ListGroup looks at whether the items have href or onClick props to determine which DOM elements to emit. However, with custom item components as children to ListGroup, set thecomponentClass prop to specify which element ListGroup should output.

Custom Child 1
Custom Child 2
Custom Child 3

show code

#Props

#ListGroup

Name	Type	Default	Description
bsClass	string	'list-group'	Base CSS class and prefix for the component. Generally one should only change `bsClass` to provide new, non-Bootstrap, CSS styles for a component.
componentClass	elementType		You can use a custom element type for this component. If not specified, it will be treated as `'li'` if every child is a non-actionable `<ListGroupItem>`, and `'div'` otherwise.

#ListGroupItem

Name	Type	Default	Description
active	any
bsClass	string	'list-group-item'	Base CSS class and prefix for the component. Generally one should only change `bsClass` to provide new, non-Bootstrap, CSS styles for a component.
bsStyle	one of: `"success"`, `"warning"`, `"danger"`, `"info"`		Component visual or contextual style variants.
disabled	any
header	node
href	string
listItem	boolean	false
onClick	function
type	string

Use the striped, bordered, condensed and hover props to customise the table.

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

show code

#Responsive

Add responsive 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.

#	Table heading	Table heading	Table heading	Table heading	Table heading	Table heading
1	Table cell	Table cell	Table cell	Table cell	Table cell	Table cell
2	Table cell	Table cell	Table cell	Table cell	Table cell	Table cell
3	Table cell	Table cell	Table cell	Table cell	Table cell	Table cell

show code

#Props

Name	Type	Default	Description
bordered	boolean	false
bsClass	string	'table'	Base CSS class and prefix for the component. Generally one should only change `bsClass` to provide new, non-Bootstrap, CSS styles for a component.
condensed	boolean	false
hover	boolean	false
responsive	boolean	false
striped	boolean	false

#Basic example

By default, all the <Panel /> does is apply some basic border and padding to contain some content.

You can pass on any additional properties you need, e.g. a custom onClick handler, as it is shown in the example code. They all will apply to the wrapper div element.

Basic panel example

show code

#Collapsible Panel

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.

show code

#Panel with heading

Easily add a heading container to your panel with the header prop.

Panel heading without title

Panel content

Panel title

Panel content

show code

#Panel with footer

Pass buttons or secondary text in the footer 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.

Panel content

Panel footer

show code

#Contextual alternatives

Like other components, easily make a panel more meaningful to a particular context by adding a bsStyle prop.

Panel title

Panel content

Panel title

Panel content

Panel title

Panel content

Panel title

Panel content

Panel title

Panel content

Panel title

Panel content

show code

#With tables and list groups

Add the fill prop to <Table /> or <ListGroup /> elements to make them fill the panel.

Panel heading

Some default panel content here.

Item 1
Item 2
…

Some more panel content here.

show code

#Controlled PanelGroups

PanelGroups can be controlled by a parent component. The activeKey prop dictates which panel is open.

Panel 1

Panel 1 content

Panel 2

show code

#Uncontrolled PanelGroups

PanelGroups can also be uncontrolled where they manage their own state. The defaultActiveKey prop dictates which panel is open when initially.

Panel 1

Panel 2

Panel 2 content

show code

#Multiple Expandable Panels

PanelGroups can contain multiple expandable panels.

Panel 1

Panel 2

Panel 3

show code

#Accordions

<Accordion /> aliases <PanelGroup accordion />.

Collapsible Group Item #1

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Collapsible Group Item #2

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Collapsible Group Item #3

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

show code

#Props

#Panels

Name	Type	Default	Description
bsClass	string	'panel'	Base CSS class and prefix for the component. Generally one should only change `bsClass` to provide new, non-Bootstrap, CSS styles for a component.
bsStyle	one of: `"success"`, `"warning"`, `"danger"`, `"info"`, `"default"`, `"primary"`	'default'	Component visual or contextual style variants.
collapsible	boolean
defaultExpanded	boolean	false
eventKey	any
expanded	boolean
footer	node
header	node
headerRole	string
id	string \| number
onEnter	function
onEntered	function
onEntering	function
onExit	function
onExited	function
onExiting	function
onSelect	function
panelRole	string

#PanelGroup, Accordion

Name	Type	Default	Description
accordion	boolean	false
activeKey	any
bsClass	string	'panel-group'	Base CSS class and prefix for the component. Generally one should only change `bsClass` to provide new, non-Bootstrap, CSS styles for a component.
defaultActiveKey	any
onSelect	function
role	string

Use the well as a simple effect on an element to give it an inset effect.

Look I'm in a well!

show code

#Optional classes

Control padding and rounded corners with two optional modifier classes.

Look I'm in a large well!

Look I'm in a small well!

show code

#Props

Name	Type	Default	Description
bsClass	string	'well'	Base CSS class and prefix for the component. Generally one should only change `bsClass` to provide new, non-Bootstrap, CSS styles for a component.
bsSize	one of: `"lg"`, `"large"`, `"sm"`, `"small"`		Component size variations.

The <FormControl> component renders a form control with Bootstrap styling. The <FormGroup> component wraps a form control with proper spacing, along with support for a label, help text, and validation state. To ensure accessibility, set controlId on <FormGroup>, and use <ControlLabel> for the label.

show code

The <FormControl> component directly renders the <input> or other specified component. If you need to access the value of an uncontrolled <FormControl>, attach a ref to it as you would with an uncontrolled input, then call ReactDOM.findDOMNode(ref) to get the DOM node. You can then interact with that node as you would with any other uncontrolled input.

If your application contains a large number of form groups, we recommend building a higher-level component encapsulating a complete field group that renders the label, the control, and any other necessary components. We don't provide this out-of-the-box, because the composition of those field groups is too specific to an individual application to admit a good one-size-fits-all solution.

#Props

#FormGroup

Name	Type	Default	Description
bsClass	string	'form-group'	Base CSS class and prefix for the component. Generally one should only change `bsClass` to provide new, non-Bootstrap, CSS styles for a component.
bsSize	one of: `"lg"`, `"large"`, `"sm"`, `"small"`		Component size variations.
controlId	string		Sets `id` on `<FormControl>` and `htmlFor` on `<FormGroup.Label>`.
validationState	one of: `'success'`, `'warning'`, `'error'`, `null`

#FormControl

Name	Type	Default	Description
bsClass	string	'form-control'	Base CSS class and prefix for the component. Generally one should only change `bsClass` to provide new, non-Bootstrap, CSS styles for a component.
bsSize	one of: `"sm"`, `"small"`, `"lg"`, `"large"`		Component size variations.
componentClass	elementType	'input'	You can use a custom element type for this component.
id	string		Uses `controlId` from `<FormGroup>` if not explicitly specified.
inputRef	function		Attaches a ref to the `<input>` element. Only functions can be used here. `<FormControl inputRef={ref => { this.input = ref; }} />`
type	string		Only relevant if `componentClass` is `'input'`.

#ControlLabel

Name	Type	Default	Description
bsClass	string	'control-label'	Base CSS class and prefix for the component. Generally one should only change `bsClass` to provide new, non-Bootstrap, CSS styles for a component.
htmlFor	string		Uses `controlId` from `<FormGroup>` if not explicitly specified.
srOnly	boolean	false

Examples of standard form controls supported in an example form layout, using a custom <FieldGroup> component. Use <FormControl> for <input>, <textarea>, and <select>. Use <Checkbox> and <Radio> for checkboxes and radios respectively, optionally with inline to render multiple on the same line. Use <FormControl.Static> for static text.

#Props

#Checkbox

Name	Type	Default	Description
bsClass	string	'checkbox'	Base CSS class and prefix for the component. Generally one should only change `bsClass` to provide new, non-Bootstrap, CSS styles for a component.
disabled	boolean	false
inline	boolean	false
inputRef	function		Attaches a ref to the `<input>` element. Only functions can be used here. `<Checkbox inputRef={ref => { this.input = ref; }} />`
title	string	''
validationState	one of: `'success'`, `'warning'`, `'error'`, `null`		Only valid if `inline` is not set.

#Radio

Name	Type	Default	Description
bsClass	string	'radio'	Base CSS class and prefix for the component. Generally one should only change `bsClass` to provide new, non-Bootstrap, CSS styles for a component.
disabled	boolean	false
inline	boolean	false
inputRef	function		Attaches a ref to the `<input>` element. Only functions can be used here. `<Radio inputRef={ref => { this.input = ref; }} />`
title	string	''
validationState	one of: `'success'`, `'warning'`, `'error'`, `null`		Only valid if `inline` is not set.

#FormControl.Static

Name	Type	Default	Description
bsClass	string	'form-control-static'	Base CSS class and prefix for the component. Generally one should only change `bsClass` to provide new, non-Bootstrap, CSS styles for a component.
componentClass	elementType	'p'	You can use a custom element type for this component.

#HelpBlock

Name	Type	Default	Description
bsClass	string	'help-block'	Base CSS class and prefix for the component. Generally one should only change `bsClass` to provide new, non-Bootstrap, CSS styles for a component.

#Inline forms

Use <Form inline> instead of <form>. JSX strips whitespace between lines, so you will need to manually add spaces. Additionally, Bootstrap assigns inline form controls width: auto by default, so you may need to set custom widths.

show code

#Horizontal forms

Use <Form horizontal> instead of <form>, then use <Col>s to align labels and controls. Do not use <Row> here, as <FormGroup> will already serve as a grid row in a horizontal form.

show code

#Props

#Form (only needed for horizontal or inline forms)

Name	Type	Default	Description
bsClass	string	'form'	Base CSS class and prefix for the component. Generally one should only change `bsClass` to provide new, non-Bootstrap, CSS styles for a component.
componentClass	elementType	'form'	You can use a custom element type for this component.
horizontal	boolean	false
inline	boolean	false

#Input add-ons

Wrap your form control in an <InputGroup>, then use for normal add-ons and for button add-ons. Exotic configurations may require CSS on your side.

show code

#Input sizes

Use bsSize on <FormGroup> or <InputGroup> to change the size of inputs. It also works with add-ons and most other options.

show code

#Props

#InputGroup

Name	Type	Default	Description
bsClass	string	'input-group'	Base CSS class and prefix for the component. Generally one should only change `bsClass` to provide new, non-Bootstrap, CSS styles for a component.
bsSize	one of: `"lg"`, `"large"`, `"sm"`, `"small"`		Component size variations.

#InputGroup.Addon

Name	Type	Default	Description
bsClass	string	'input-group-addon'	Base CSS class and prefix for the component. Generally one should only change `bsClass` to provide new, non-Bootstrap, CSS styles for a component.

#InputGroup.Button

Name	Type	Default	Description
bsClass	string	'input-group-btn'	Base CSS class and prefix for the component. Generally one should only change `bsClass` to provide new, non-Bootstrap, CSS styles for a component.

Set validationState to one of 'success', 'warning' or 'error' to show validation state. Set validationState to null (or undefined) to hide validation state. Add <FormControl.Feedback> for a feedback icon when validation state is set.

show code

#Props

#FormControl.Feedback

Name	Type	Default	Description
bsClass	string	'form-control-feedback'	Base CSS class and prefix for the component. Generally one should only change `bsClass` to provide new, non-Bootstrap, CSS styles for a component.

The React-Bootstrap media content components offer ways to present images and other media to your users in a responsive way, along with support for styling those components.

#Shape

Use the rounded, circle and thumbnail props to customise the image.

show code

#Responsive

Use the responsive to scale image nicely to the parent element.

show code

#Props

Name	Type	Default	Description
bsClass	string	'img'	Base CSS class and prefix for the component. Generally one should only change `bsClass` to provide new, non-Bootstrap, CSS styles for a component.
circle	boolean	false	Sets image shape as circle
responsive	boolean	false	Sets image as responsive image
rounded	boolean	false	Sets image shape as rounded
thumbnail	boolean	false	Sets image shape as thumbnail

Thumbnails are designed to showcase linked images with minimal required markup. You can extend the grid component with thumbnails.

#Anchor Thumbnail

Creates an anchor wrapping an image.

show code

#Divider Thumbnail

Creates a divider wrapping an image and other children elements.

Thumbnail label

Description

Thumbnail label

Description

Thumbnail label

Description

show code

#Props

Name	Type	Default	Description
alt	string		alt property that is passed down to the image inside this component
bsClass	string	'thumbnail'	Base CSS class and prefix for the component. Generally one should only change `bsClass` to provide new, non-Bootstrap, CSS styles for a component.
href	string		href property that is passed down to the image inside this component
onError	function		onError callback that is passed down to the image inside this component
onLoad	function		onLoad callback that is passed down to the image inside this component
src	string		src property that is passed down to the image inside this component

Allow browsers to determine video or slideshow dimensions based on the width of their containing block by creating an intrinsic ratio that will properly scale on any device.

You don't need to include frameborder="0" in your iframes.

Either 16by9 or 4by3 aspect ratio via a16by9 or a4by3 attribute must be set.

show code

#Props

Name	Type	Default	Description
a16by9	boolean	false	16by9 aspect ratio
a4by3	boolean	false	4by3 aspect ratio
bsClass	string	'embed-responsive'	Base CSS class and prefix for the component. Generally one should only change `bsClass` to provide new, non-Bootstrap, CSS styles for a component.
children required	element		This component requires a single child element

#Uncontrolled

Allow the component to control its own state.

First slide label

Nulla vitae elit libero, a pharetra augue mollis interdum.

Second slide label

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Third slide label

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

show code

#Controlled

Pass down the active state on render via props.

First slide label

Nulla vitae elit libero, a pharetra augue mollis interdum.

Second slide label

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Third slide label

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

show code

#Props

#Carousel

Name	Type	Default	Description
activeIndex	number
bsClass	string	'carousel'	Base CSS class and prefix for the component. Generally one should only change `bsClass` to provide new, non-Bootstrap, CSS styles for a component.
controls	boolean	true
defaultActiveIndex	number
direction	one of: `'prev'`, `'next'`
indicators	boolean	true
interval	number	5000	The amount of time to delay between automatically cycling an item. If `null`, carousel will not automatically cycle.
nextIcon	node	<Glyphicon glyph="chevron-right" />
nextLabel	string	'Next'	Label shown to screen readers only, can be used to show the next element in the carousel. Set to null to deactivate.
onSelect	function		Callback fired when the active item changes. `(eventKey: any) => any \| (eventKey: any, event: Object) => any` If this callback takes two or more arguments, the second argument will be a persisted event object with `direction` set to the direction of the transition.
onSlideEnd	function
pauseOnHover	boolean	true
prevIcon	node	<Glyphicon glyph="chevron-left" />
prevLabel	string	'Previous'	Label shown to screen readers only, can be used to show the previous element in the carousel. Set to null to deactivate.
slide	boolean	true
wrap	boolean	true

#Carousel.Item

Name	Type	Default
active	boolean	false
animateIn	boolean	false
animateOut	boolean	false
direction	one of: `'prev'`, `'next'`
index	number
onAnimateOutEnd	function

#Carousel.Caption

There are no public props for this component.

Abstract object styles for building various types of components (like blog comments, Tweets, etc) that feature a left or right aligned image alongside textual content.