Buttons Button
- 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 {".
Sizes
- Fancy larger or smaller buttons? Add bsSize="large", bsSize="small", or bsSize="xsmall" for additional sizes.
Create block level buttons—those that span the full width of a parent— by adding the block prop.
Active state
- To set a buttons active state simply set the components active prop.
Disabled state
- Make buttons look unclickable by fading them back 50%. To do this add the disabled attribute to buttons.
Event handler functionality not impacted
-This prop will only change the {""}’s appearance, not its
- functionality. Use custom logic to disable the effect of the onClick handlers.
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 {""} element otherwise
- a {""} element will be used.
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 {""}’s props from a state change like below.
Props
- Button groups ButtonGroup, ButtonToolbar
- Group a series of buttons together on a single line with the button group.
- -Basic example
- Wrap a series of {""}s in a {".
Button toolbar
- Combine sets of {"s into a {" for more complex components.
Sizing
- Instead of applying button sizing props to every button in a group, just add bsSize prop to the {".
Nesting
- You can place other button types within the {" like {"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 {".
-
Moreover, you can have buttons be block level elements so they take the full width of their container, just add block to the {", in addition to the vertical you just added.
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 {".
Props
- Button dropdowns
- Use {" or {" components to display a button with a dropdown menu.
Single button dropdowns
- Create a dropdown button with the {" component.
Split button dropdowns
- Similarly, create split button dropdowns with the {" component.
Sizing
- Button 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".
-
Props
-
- DropdownButton
- SplitButton
- Dropdown
- Menu Item MenuItem
- This is a component used in other components (see Buttons, Navbars).
-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 the onclick
- 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: eventKey, href and target
Props
- Panels Panel, PanelGroup, Accordion
-
- 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.
Collapsible Panel
- Panel with heading
- Easily add a heading container to your panel with the header prop.
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.
Contextual alternatives
- Like other components, easily make a panel more meaningful to a particular context by adding a bsStyle prop.
With tables and list groups
- Add the fill prop to <Table /> or <ListGroup /> elements to make them fill the panel.
Controlled PanelGroups
- PanelGroups can be controlled by a parent component. The activeKey prop dictates which panel is open.
Uncontrolled PanelGroups
- PanelGroups can also be uncontrolled where they manage their own state. The defaultActiveKey prop dictates which panel is open when initially.
Accordions
- <Accordion /> aliases <PanelGroup accordion />.
Props
-
- Panels, Accordion
- PanelGroup
- Modals Modal
-
- Static Markup
- A modal dialog component
-Basic example
-
-
- A modal with header, body, and set of actions in the footer. Use {" in combination with other components to
- show or hide your Modal. The {" Component comes with
- a few convenient "sub components": {", {", {",
- and {", which you can use to build the Modal content.
-
Additional Import Options
-
- The Modal Header, Title, Body, and Footer components are available as static properties the {" 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.
- {React.DOM.code(null,
- '.modal-container {\n' +
- ' position: relative;\n' +
- '}\n' +
- '.modal-container .modal, .modal-container .modal-backdrop {\n' +
- ' position: absolute;\n' +
- '}\n'
- )}
-
- Sizing modals using standard Bootstrap props
- You can specify a bootstrap large or small modal by using the "bsSize" prop.
-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%.
-Props
-
- Modal
- Modal.Header
- Modal.Title
- Modal.Body
- Modal.Footer
- Tooltip
-
- Tooltip component for a more stylish alternative to that anchor tag title attribute.
-
With OverlayTrigger
- Attach and position tooltips with OverlayTrigger.
In text copy
- Positioned tooltip in text copy.
-Props
-
- Overlay Trigger
- Tooltip
- Popovers
-
- - The Popover, offers a more robust alternative to the Tooltip for displaying overlays of content. -
-With OverlayTrigger
- The Popover component, like the Tooltip can be used with an OverlayTrigger Component, and positioned around it.
Trigger behaviors
- It"s inadvisable to use "hover" or "focus" triggers for popovers, because they have poor accessibility from keyboard and on mobile devices.
Popover component in container
- Positioned popover components in scrolling container
- Props
- Overlay
-
-
- 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.
-
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
-
Props
- Progress bars ProgressBar
-
- 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.
The following keys are interpolated with the current values: %(min)s, %(max)s, %(now)s, %(percent)s, %(bsStyle)s
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
- Navs Nav, NavItem
-
- 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
- NavItem
-
- Navbars {' '}
- Navbar, NavbarBrand, NavbarHeader, NavbarToggle, NavbarCollapse
+ Overlays
- 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
- the {" 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!
-
- By setting the prop defaultNavExpanded the Navbar will start
- expanded by default. 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.
-
Text and Non-nav links
-
- Loose text and links can be wraped in the convenience
- components: Navbar.Link and Navbar.Text
-
Props
-
- Navbar
- NavbarToggle, Navbar.Toggle
- Breadcrumbs Breadcrumb, BreadcrumbItems
- Breadcrumbs are used to indicate the current page's location. Add active attribute to active BreadcrumbItem.
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
BreadcrumbItem
- Togglable tabs Tabs, Tab
-
- Add quick, dynamic tab functionality to transition through panes of local content.
- -Uncontrolled
- Allow the component to control its own state.
-Controlled
- Pass down the active state on render via props.
-No animation
- Set the animation prop to false
Left tabs
- Set position to "left". Optionally, tabWidth can be passed the number of columns for the tabs.
Props
-
- Tabs
- Tab
- Pager Pager, PageItem
- 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
- PageItem
- Pagination Pagination
-
- 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 and ellipsis.
Props
- Alert messages Alert
-
- Basic alert styles.
-Closeable alerts
- just pass in a onDismiss function.
Screen Reader Accessibility
-Unlike regular Bootstrap, alerts have an sr-only dismiss button after the content.
-Auto closeable
- Auto close after a set time with dismissAfter prop.
Props
- Carousels Carousel, CarouselItem
-
- Uncontrolled
- Allow the component to control its own state.
-Controlled
- Pass down the active state on render via props.
-Props
-
- Carousel
- CarouselItem
- Grids Grid, Row, Col
-
- Props
-
- Grid
- Row
- Col
- Images
-
- 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
- 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.
-Props
- React-Bootstrap offers a number of accessible overlay components built using react-overlays.
List group ListGroup, ListGroupItem
- Quick previous and next links.
- -Centers by default
- Linked
- Set the href or onClick prop on ListGroupItem, to create a linked or clickable element.
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
With header
- Set the header prop to create a structured item, with a heading and a body area.
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 the
- componentClass prop to specify which element ListGroup should output.
-
Props
-
- ListGroup
- ListGroupItem
- Labels
-
- Create a {""} to highlight information
Available variations
- Add any of the below mentioned modifier classes to change the appearance of a label.
-
+ Navigation
+
- Props
- React-Bootstrap offers a variety of responsive, accessible components for setting up navigation both across your website and within your pages.
Badges
-
- Easily highlight new or unread items by adding a {" to links, Bootstrap navs, and more.
Cross-browser compatibility
-Unlike regular Bootstrap badges self collapse even in Internet Explorer 8.
-Props
- Jumbotron
-
- A lightweight, flexible component that can optionally extend the entire viewport to showcase key content on your site.
-
+ Page layout
+
- Props
- The components in this section offer different ways to structure and present data on your page.
Page Header
+ 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).
Responsive embed
-
- 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.
+ Media content
+
- Props
- 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.
Wells
-
- Use the well as a simple effect on an element to give it an inset effect.
-Optional classes
- Control padding and rounded corners with two optional modifier classes.
-Props
- Glyphicons
-
- Use them in buttons, button groups for a toolbar, navigation, or prepended form inputs.
-
+ Miscellaneous components
+
- Props
- React-Bootstrap also offers various standalone components that can be used to present specific, relevant kinds of information across your pages.
Tables
-
- Use the striped, bordered, condensed and hover props to customise the table.
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.
Props
- Input
-
- Renders an input in bootstrap wrappers. Supports label, help, text input add-ons, validation and use as wrapper.
- Use getValue() or getChecked() to get the current state.
- The helper method getInputDOMNode() returns the internal input element. If you don"t want the form-group class applied apply the prop named standalone.
Types
- Supports select, textarea, as well as standard HTML input types. getValue() returns an array for multiple select.
FormControls.Static
- Static text can be added to your form controls through the use of the FormControls.Static component.
Button Input Types
- Form buttons are encapsulated by ButtonInput. Pass in type="reset" or type="submit" to suit your needs. Styling is the same as Button.
Add-ons
- Use addonBefore and addonAfter for normal addons, buttonBefore and buttonAfter for button addons.
- Exotic configurations may require some css on your side.
Sizes
- Use bsSize to change the size of inputs. It also works with addons and most other options.
Validation
- Set bsStyle to one of success, warning or error.
- Add hasFeedback to show glyphicon. Glyphicon may need additional styling if there is an add-on or no label.
Horizontal forms
- Use labelClassName and wrapperClassName properties to add col classes manually.
- checkbox and radio types need special treatment because label wraps input.
Use as a wrapper
- If type is not set, child element(s) will be rendered instead of an input element.
- getValue() will not work when used this way.
+ Utilities
+
- Props
- React-Bootstrap also exposes certain utility components used internally. They can be used to enhance your own custom components as well.
Utilities Portal, Position
-
- Portal
-
- A Component that renders its children into a new React "subtree" or container. The Portal component kind of like the React
- equivalent to jQuery"s .appendTo(), which is helpful for components that need to be appended to a DOM node other than
- the component"s direct parent. The Modal, and Overlay components use the Portal component internally.
-
Props
- Position
-
- A Component that absolutely positions its child to a target component or DOM node. Useful for creating custom
- popups or tooltips. Used by the Overlay Components.
-
Props
- Transitions
-
- 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.
-
Props
- Fade
- Add a fade animation to a child element or component.
-Props
- Missing components
+
+ Missing components
+
We've intentionally omitted a few components from React-Bootstrap. Don't worry, though – we cover what to do in this section.
Affix
+
+ Affix
+
Use {' or {' 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.
Scrollspy
+
+ Scrollspy
+
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.
@@ -1033,46 +210,67 @@ const ComponentsPage = React.createClass({ activeHref={this.state.activeNavItemHref} onSelect={this.handleNavItemSelect} > -
+ Alert messages Alert
+
+
+ Basic alert styles.
+Closeable alerts
+ just pass in a onDismiss function.
Screen Reader Accessibility
+Unlike regular Bootstrap, alerts have an sr-only dismiss button after the content.
+Auto closeable
+ Auto close after a set time with dismissAfter prop.
Props
+
+ Badges Badge
+
+
+ Easily highlight new or unread items by adding a {" to links, Bootstrap navs, and more.
Cross-browser compatibility
+Unlike regular Bootstrap badges self collapse even in Internet Explorer 8.
+Props
+
+ Breadcrumbs Breadcrumb, BreadcrumbItem
+
+
+ Breadcrumbs are used to indicate the current page's location. Add active attribute to active BreadcrumbItem.
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
BreadcrumbItem
+
+ Button groups ButtonGroup, ButtonToolbar
+
+
+ Group a series of buttons together on a single line with the button group.
+ +Basic example
+ Wrap a series of {""}s in a {".
Button toolbar
+ Combine sets of {"s into a {" for more complex components.
Sizing
+ Instead of applying button sizing props to every button in a group, just add bsSize prop to the {".
Nesting
+ You can place other button types within the {" like {"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 {".
+
Moreover, you can have buttons be block level elements so they take the full width of their container, just add block to the {", in addition to the vertical you just added.
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 {".
Props
+
+ Buttons Button
+
+
+ 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 {".
Sizes
+ Fancy larger or smaller buttons? Add bsSize="large", bsSize="small", or bsSize="xsmall" for additional sizes.
Create block level buttons—those that span the full width of a parent— by adding the block prop.
Active state
+ To set a buttons active state simply set the components active prop.
Disabled state
+ Make buttons look unclickable by fading them back 50%. To do this add the disabled attribute to buttons.
Event handler functionality not impacted
+This prop will only change the {""}’s appearance, not its
+ functionality. Use custom logic to disable the effect of the onClick handlers.
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 {""} element otherwise
+ a {""} element will be used.
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 {""}’s props from a state change like below.
Props
+
+ Carousels Carousel, CarouselItem
+
+
+ Uncontrolled
+ Allow the component to control its own state.
+Controlled
+ Pass down the active state on render via props.
+Props
+
+ Carousel
+ CarouselItem
+
+ Dropdowns DropdownButton, SplitButton, Dropdown
+
+
+ Single button dropdowns
+ Create a dropdown button with the {" component.
Split button dropdowns
+ Similarly, create split button dropdowns with the {" 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".
+
Props
+
+ DropdownButton
+ SplitButton
+ Dropdown
+
+ Forms Input, ButtonInput, FormControls
+
+
+ The {''} component renders an input in Bootstrap wrappers. Supports label, help, text input add-ons, validation and use as wrapper.
+ Use getValue() or getChecked() to get the current state.
+ The helper method getInputDOMNode() returns the internal input element. If you don't want the form-group class applied apply the prop named standalone.
Types
+ Supports select, textarea, as well as standard HTML input types. getValue() returns an array for multiple select.
FormControls.Static
+ Static text can be added to your form controls through the use of the FormControls.Static component.
Button Input Types
+ Form buttons are encapsulated by ButtonInput. Pass in type="reset" or type="submit" to suit your needs. Styling is the same as Button.
Add-ons
+ Use addonBefore and addonAfter for normal addons, buttonBefore and buttonAfter for button addons.
+ Exotic configurations may require some css on your side.
Sizes
+ Use bsSize to change the size of inputs. It also works with addons and most other options.
Validation
+ Set bsStyle to one of success, warning or error.
+ Add hasFeedback to show glyphicon. Glyphicon may need additional styling if there is an add-on or no label.
Horizontal forms
+ Use labelClassName and wrapperClassName properties to add col classes manually.
+ checkbox and radio types need special treatment because label wraps input.
Use as a wrapper
+ If type is not set, child element(s) will be rendered instead of an input element.
+ getValue() will not work when used this way.
Props
+
+ Glyphicons Glyphicon
+
+
+ Use them in buttons, button groups for a toolbar, navigation, or prepended form inputs.
+Props
+
+ Grid system Grid, Row, Col
+
+
+ Props
+
+ Grid
+ Row
+ Col
+
+ Images Image
+
+
+ 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
+
+ Jumbotron Jumbotron
+
+
+ A lightweight, flexible component that can optionally extend the entire viewport to showcase key content on your site.
+Props
+
+ Labels Label
+
+
+ Create a {""} to highlight information
Available variations
+ Add any of the below mentioned modifier classes to change the appearance of a label.
+Props
+
+ List group ListGroup, ListGroupItem
+
+
+ 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
+ Linked
+ Set the href or onClick prop on ListGroupItem, to create a linked or clickable element.
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
With header
+ Set the header prop to create a structured item, with a heading and a body area.
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 the
+ componentClass prop to specify which element ListGroup should output.
+
Props
+
+ ListGroup
+ ListGroupItem
+
+ Menu items MenuItem
+
+
+ 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 the onclick
+ 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: eventKey, href and target
Props
+
+ Modals Modal
+
+
+ Static Markup
+ A modal dialog component
+Basic example
+
+
+ A modal with header, body, and set of actions in the footer. Use {" in combination with other components to
+ show or hide your Modal. The {" Component comes with
+ a few convenient "sub components": {", {", {",
+ and {", which you can use to build the Modal content.
+
Additional Import Options
+
+ The Modal Header, Title, Body, and Footer components are available as static properties the {" 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.
+ {React.DOM.code(null,
+ '.modal-container {\n' +
+ ' position: relative;\n' +
+ '}\n' +
+ '.modal-container .modal, .modal-container .modal-backdrop {\n' +
+ ' position: absolute;\n' +
+ '}\n'
+ )}
+
+ Sizing modals using standard Bootstrap props
+ You can specify a bootstrap large or small modal by using the "bsSize" prop.
+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%.
+Props
+
+ Modal
+ Modal.Header
+ Modal.Title
+ Modal.Body
+ Modal.Footer
+
+ Navs Nav, NavItem
+
+
+ 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
+ NavItem
+
+ Navbars Navbar
+
+
+ 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
+ the {" 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!
+
+ By setting the prop defaultNavExpanded the Navbar will start
+ expanded by default. 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.
+
Text and Non-nav links
+
+ Loose text and links can be wraped in the convenience
+ components: Navbar.Link and Navbar.Text
+
Props
+
+ Navbar
+ NavbarToggle, Navbar.Toggle
+
+ Custom overlays Overlay
+
+
+
+ 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.
+
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
+
Props
+
+ Page header PageHeader
+
+
+ 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).
Props
+
+ Pager Pager, PageItem
+
+
+ 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
+ PageItem
+
+ Pagination Pagination
+
+
+ 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 and ellipsis.
Props
+
+ Panels Panel, PanelGroup, Accordion
+
+
+ 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.
Collapsible Panel
+ Panel with heading
+ Easily add a heading container to your panel with the header prop.
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.
Contextual alternatives
+ Like other components, easily make a panel more meaningful to a particular context by adding a bsStyle prop.
With tables and list groups
+ Add the fill prop to <Table /> or <ListGroup /> elements to make them fill the panel.
Controlled PanelGroups
+ PanelGroups can be controlled by a parent component. The activeKey prop dictates which panel is open.
Uncontrolled PanelGroups
+ PanelGroups can also be uncontrolled where they manage their own state. The defaultActiveKey prop dictates which panel is open when initially.
Accordions
+ <Accordion /> aliases <PanelGroup accordion />.
Props
+
+ Panels, Accordion
+ PanelGroup
+
+ Popovers Popover
+
+
+ + The Popover, offers a more robust alternative to the Tooltip for displaying overlays of content. +
+With OverlayTrigger
+ The Popover component, like the Tooltip can be used with an OverlayTrigger Component, and positioned around it.
Trigger behaviors
+ It's inadvisable to use "hover" or "focus" triggers for popovers, because they have poor accessibility from keyboard and on mobile devices.
Popover component in container
+ Positioned popover components in scrolling container
+ Props
+
+ Progress bars ProgressBar
+
+
+ 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.
The following keys are interpolated with the current values: %(min)s, %(max)s, %(now)s, %(percent)s, %(bsStyle)s
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
+
+ Responsive embed ResponsiveEmbed
+
+
+ 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
+
+ Tables Table
+
+
+ Use the striped, bordered, condensed and hover props to customise the table.
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.
Props
+
+ Togglable tabs Tabs, Tab
+
+
+ Add quick, dynamic tab functionality to transition through panes of local content.
+ +Uncontrolled
+ Allow the component to control its own state.
+Controlled
+ Pass down the active state on render via props.
+No animation
+ Set the animation prop to false
Left tabs
+ Set position to "left". Optionally, tabWidth can be passed the number of columns for the tabs.
Props
+
+ Tabs
+ Tab
+
+ Thumbnails 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.
+Props
+
+ Tooltips Tooltip
+
+
+
+ Tooltip component for a more stylish alternative to that anchor tag title attribute.
+
With OverlayTrigger
+ Attach and position tooltips with OverlayTrigger.
In text copy
+ Positioned tooltip in text copy.
+Props
+
+ Overlay Trigger
+ Tooltip
+
+ Transitions Collapse, Fade
+
+
+ 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.
+
Props
+
+ Fade
+
+
+ Add a fade animation to a child element or component.
+Props
+
+ Wells Well
+
+
+ Use the well as a simple effect on an element to give it an inset effect.
+Optional classes
+ Control padding and rounded corners with two optional modifier classes.
+