#Buttons Button

#Options

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

show code

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.

#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

NameTypeDefaultDescription
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.

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


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

#Props

NameTypeDefaultDescription
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

#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.

#No caret variation

Remove the caret using the noCaret prop.

#Dropup variation

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

#Dropdown right variation

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

#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").

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.

#Props

#DropdownButton

NameTypeDefaultDescription
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.

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
onClose
function

A callback fired when the Dropdown closes.

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

NameTypeDefaultDescription
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.

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
onClose
function

A callback fired when the Dropdown closes.

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

NameTypeDefaultDescription
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.

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.

onClose
function

A callback fired when the Dropdown closes.

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

#Props

NameTypeDefaultDescription
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

#Overlays

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

NameTypeDefaultDescription
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.

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

NameTypeDefaultDescription
aria-label
string
'Close'

The 'aria-label' attribute provides an accessible label for the close button. It is used for Assistive Technology when the label text is not readable.

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

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

NameTypeDefaultDescription
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

NameTypeDefaultDescription
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

NameTypeDefaultDescription
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

#Overlay Trigger

NameTypeDefaultDescription
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

NameTypeDefaultDescription
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

NameTypeDefaultDescription
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

NameTypeDefaultDescription
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

#Navigation

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.

#Dropdown

Add dropdowns using the NavDropdown component.

#Stacked

They can also be stacked vertically.

#Justified

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

#Props

#Nav

NameTypeDefaultDescription
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

NameTypeDefaultDescription
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

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 wire the toggle and collapse together!

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.

#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

NameTypeDefaultDescription
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 navExpanded

A callback fired when the <Navbar> body collapses or expands. Fired when a <Navbar.Toggle> is clicked and called with the new navExpanded boolean value.

role
string
staticTop
boolean
false

Create a full-width navbar that scrolls away with the page

#Navbar.Toggle

NameTypeDefaultDescription
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

#Props

Breadcrumb component itself doesn't have any specific public properties

#Breadcrumb.Item

NameTypeDefaultDescription
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

Tab 1 content
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

NameTypeDefaultDescription
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

NameTypeDefaultDescription
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

NameTypeDefaultDescription
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

NameTypeDefaultDescription
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

NameTypeDefaultDescription
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

#More options

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

#Props

NameTypeDefaultDescription
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

#Aligned

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

#Disabled

Set the disabled prop to true to disable the link.

#Props

#Pager

NameTypeDefaultDescription
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.

#Page layout

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 xs={6} md={4} />
<Col xs={6} 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

NameTypeDefaultDescription
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

NameTypeDefaultDescription
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

NameTypeDefaultDescription
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

NameTypeDefaultDescription
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

NameTypeDefaultDescription
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

NameTypeDefaultDescription
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 1Link 2
show code

#Styling by state

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

#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

NameTypeDefaultDescription
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

NameTypeDefaultDescription
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 NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larry 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 headingTable headingTable headingTable headingTable headingTable heading
1Table cellTable cellTable cellTable cellTable cellTable cell
2Table cellTable cellTable cellTable cellTable cellTable cell
3Table cellTable cellTable cellTable cellTable cellTable cell
show code

#Props

NameTypeDefaultDescription
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
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.

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 content
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 2 content
show code

#Accordions

<Accordion /> aliases <PanelGroup accordion />.

show code

#Props

#Panels, Accordion

NameTypeDefaultDescription
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

NameTypeDefaultDescription
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

NameTypeDefaultDescription
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.

#Forms FormGroup, FormControl, ControlLabel

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.

Validation is based on string length.
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

NameTypeDefaultDescription
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

NameTypeDefaultDescription
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

NameTypeDefaultDescription
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.

Example block-level help text here.

email@example.com

show code

#Props

#Checkbox

NameTypeDefaultDescription
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; }} />
validationState
one of: 'success', 'warning', 'error', null

Only valid if inline is not set.

#Radio

NameTypeDefaultDescription
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; }} />
validationState
one of: 'success', 'warning', 'error', null

Only valid if inline is not set.

#FormControl.Static

NameTypeDefaultDescription
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

NameTypeDefaultDescription
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)

NameTypeDefaultDescription
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.

@
.00
$.00
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.

#Props

#InputGroup

NameTypeDefaultDescription
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

NameTypeDefaultDescription
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

NameTypeDefaultDescription
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.

Help text with validation state.
@
@
@
show code

#Props

#FormControl.Feedback

NameTypeDefaultDescription
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.

#Media content

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.

#Responsive

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

#Props

NameTypeDefaultDescription
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.

#Divider Thumbnail

Creates a divider wrapping an image and other children elements.

242x200

Thumbnail label

Description

 

242x200

Thumbnail label

Description

 

242x200

Thumbnail label

Description

 

show code

#Props

NameTypeDefaultDescription
alt
string
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
src
string

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.

#Props

NameTypeDefaultDescription
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.

show code

#Controlled

Pass down the active state on render via props.

show code

#Props

#Carousel

NameTypeDefaultDescription
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
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

NameTypeDefaultDescription
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.

Image

Media Heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Image

Media Heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Image

Nested Media Heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Media Heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Image
Image

Media Heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Image
show code

#Media Alignment

The images or other media can be aligned top, middle, or bottom. The default is top aligned.

Image

Top aligned media

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Image

Middle aligned media

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Image

Bottom aligned media

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

show code

#Media list

You can use media inside list (useful for comment threads or articles lists).

  • Image

    Media heading

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

    Image

    Nested media heading

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

    Image

    Nested media heading

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

    Image

    Nested media heading

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

show code

#Props

#Media

NameTypeDefaultDescription
bsClass
string
'media'

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.

#Media.Left

There are no public props for this component.

#Media.Right

There are no public props for this component.

#Media.Heading

There are no public props for this component.

#Media.Body

There are no public props for this component.

#Miscellaneous components

React-Bootstrap also offers various standalone components that can be used to present specific, relevant kinds of information across your pages.

Use them in buttons, button groups for a toolbar, navigation, or prepended form inputs.

show code

#Props

NameTypeDefaultDescription
bsClass
string
'glyphicon'

Base CSS class and prefix for the component. Generally one should only change bsClass to provide new, non-Bootstrap, CSS styles for a component.

glyph required
string

An icon name without "glyphicon-" prefix. See e.g. http://getbootstrap.com/components/#glyphicons

Create a <Label>label</Label> to highlight information

Label New

Label New

Label New

Label New

Label New

Label New

show code

#Available variations

Add any of the below mentioned modifier classes to change the appearance of a label.

Default Primary Success Info Warning Danger
show code

#Props

NameTypeDefaultDescription
bsClass
string
'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.

bsStyle
one of: "success", "warning", "danger", "info", "default", "primary"
'default'

Component visual or contextual style variants.

Easily highlight new or unread items by adding a <Badge> to links, Bootstrap navs, and more.

Badges 42

show code

Cross-browser compatibility

Unlike in regular Bootstrap, badges self collapse even in Internet Explorer 8.

#Props

NameTypeDefaultDescription
bsClass
string
'badge'

Base CSS class and prefix for the component. Generally one should only change bsClass to provide new, non-Bootstrap, CSS styles for a component.

pullRight
boolean
false

Basic alert styles.

show code

#Closeable alerts

just pass in a onDismiss function.

show code

Screen Reader Accessibility

Unlike regular Bootstrap, alerts have an sr-only dismiss button after the content.

#Props

NameTypeDefaultDescription
bsClass
string
'alert'

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"
'info'

Component visual or contextual style variants.

closeLabel
string
'Close alert'
onDismiss
function

Provide up-to-date feedback on the progress of a workflow or action with simple yet flexible progress bars.

#Basic example

Default progress bar.

#With label

Add a label prop to show a visible percentage. For low percentages, consider adding a min-width to ensure the label's text is fully visible.

#Screenreader only label

Add a srOnly prop to hide the label visually.

#Contextual alternatives

Progress bars use some of the same button and alert classes for consistent styles.

#Striped

Uses a gradient to create a striped effect. Not available in IE8.

#Animated

Add active prop to animate the stripes right to left. Not available in IE9 and below.

#Stacked

Nest <ProgressBar />s to stack them.

#ProgressBar

NameTypeDefaultDescription
active
boolean
false
bsClass
string
'progress-bar'

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.

children
onlyProgressBar
label
node
max
number
100
min
number
0
now
number
srOnly
boolean
false
striped
boolean
false

#Utilities

React-Bootstrap also exposes certain utility components used internally. They can be used to enhance your own custom components as well.

Transition components animate their children transitioning in and out.

#Collapse

Add a collapse toggle animation to an element or component.

Smoothing animations

If you're noticing choppy animations, and the component that's being collapsed has non-zero margin or padding, try wrapping the contents of your <Collapse> inside a node with no margin or padding, like the <div> in the example below. This will allow the height to be computed properly, so the animation can proceed smoothly.

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

#Props

NameTypeDefaultDescription
dimension
one of: 'height', 'width' | function
'height'

The dimension used when collapsing, or a function that returns the dimension

Note: Bootstrap only partially supports 'width'! You will need to supply your own CSS animation for the .width CSS class.

getDimensionValue
function
getDimensionValue

Function that returns the height or width of the animating DOM node

Allows for providing some custom logic for how much the Collapse component should animate in its specified dimension. Called with the current dimension prop value and the DOM node.

in
boolean
false

Show the component; triggers the expand or collapse animation

mountOnEnter
boolean
false

Wait until the first "enter" transition to mount the component (add it to the DOM)

onEnter
function

Callback fired before the component expands

onEntered
function

Callback fired after the component has expanded

onEntering
function

Callback fired after the component starts to expand

onExit
function

Callback fired before the component collapses

onExited
function

Callback fired after the component has collapsed

onExiting
function

Callback fired after the component starts to collapse

role
string

ARIA role of collapsible element

timeout
number
300

Duration of the collapse animation in milliseconds, to ensure that finishing callbacks are fired even if the original browser transition end events are canceled

transitionAppear
boolean
false

Run the expand animation when the component mounts, if it is initially shown

unmountOnExit
boolean
false

Unmount the component (remove it from the DOM) when it is collapsed

#Fade

Add a fade animation to a child element or component.

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

#Props

NameTypeDefaultDescription
in
boolean
false

Show the component; triggers the fade in or fade out animation

mountOnEnter
boolean
false

Wait until the first "enter" transition to mount the component (add it to the DOM)

onEnter
function

Callback fired before the component fades in

onEntered
function

Callback fired after the has component faded in

onEntering
function

Callback fired after the component starts to fade in

onExit
function

Callback fired before the component fades out

onExited
function

Callback fired after the component has faded out

onExiting
function

Callback fired after the component starts to fade out

timeout
number
300

Duration of the fade animation in milliseconds, to ensure that finishing callbacks are fired even if the original browser transition end events are canceled

transitionAppear
boolean
false

Run the fade in animation when the component mounts, if it is initially shown

unmountOnExit
boolean
false

Unmount the component (remove it from the DOM) when it is faded out

The bsStyle prop, available in many components in React-Bootstrap, is used to map to a Bootstrap class for styling; for example, the Bootstrap class used for Button is `btn-${bsStyle}`. Use bootstrapUtils to create a custom class that is used in lieu of the classes provided by Bootstrap:

show code

#Missing components

We've intentionally omitted a few components from React-Bootstrap. Don't worry, though – we cover what to do in this section.

Use <AutoAffix> or <Affix> from react-overlays.

There isn't really any additional Bootstrap markup associated with affixes, so we didn't add a Bootstrap-specific affix class. The upstream ones already give you everything you need.

Setting up a scrollspy in idiomatic React requires wiring up a number of components across your entire page, both to handle elements scrolling in and to wire that up to the navigation. It's a poor fit for a component library, because it's not a standalone component.

To implement this functionality, use a library like React Waypoint along with a bit of your own state management. You can check out how we implemented it on the side panel here by reading the docs source.