8 |
11 | {this.props.title}
9 |{this.props.subTitle}
10 |
3 | Look I'm in a large well!
4 | Look I'm in a small well!
5 |
6 | );
7 |
8 | ReactDOM.render(wellInstance, mountNode);
9 |
--------------------------------------------------------------------------------
/docs/examples/PagerDefault.js:
--------------------------------------------------------------------------------
1 | const pagerInstance = (
2 |
3 |
4 |
5 |
6 |
7 | );
8 |
9 | ReactDOM.render(responsiveEmbedInstance, mountNode);
10 |
--------------------------------------------------------------------------------
/docs/examples/ListGroupActive.js:
--------------------------------------------------------------------------------
1 | const listgroupInstance = (
2 |
3 |
8 | );
9 |
10 | ReactDOM.render(progressInstance, mountNode);
11 |
--------------------------------------------------------------------------------
/docs/assets/CodeMirror.css:
--------------------------------------------------------------------------------
1 | .cm-s-solarized.CodeMirror {
2 | -moz-box-shadow: none;
3 | -webkit-box-shadow: none;
4 | box-shadow: none;
5 | }
6 |
7 | .highlight, .code-toggle.open {
8 | background-color: #fdf6e3;
9 | }
10 |
11 | .cm-s-solarized .cm-comment { color: #93a1a1; }
12 |
13 | .CodeMirror, .CodeMirror-scroll {
14 | height: auto;
15 | }
16 |
--------------------------------------------------------------------------------
/docs/examples/ProgressBarStacked.js:
--------------------------------------------------------------------------------
1 | const progressInstance = (
2 | Panel title
3 | ); 4 | 5 | const panelsInstance = ( 6 |
7 |
8 | Panel content
9 |
10 |
11 | Panel content
12 |
13 |
14 | );
15 |
16 | ReactDOM.render(panelsInstance, mountNode);
17 |
--------------------------------------------------------------------------------
/docs/examples/Label.js:
--------------------------------------------------------------------------------
1 | const labelInstance = (
2 |
3 |
10 | );
11 |
12 | ReactDOM.render(labelInstance, mountNode);
13 |
--------------------------------------------------------------------------------
/docs/examples/ProgressBarStriped.js:
--------------------------------------------------------------------------------
1 | const progressInstance = (
2 | Label
4 |Label
5 |Label
6 |Label
7 |Label
8 |Label
9 |
3 |
8 | );
9 |
10 | ReactDOM.render(progressInstance, mountNode);
11 |
--------------------------------------------------------------------------------
/docs/examples/TabsUncontrolled.js:
--------------------------------------------------------------------------------
1 | const tabsInstance = (
2 | Hello, world!
4 |This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.
5 | 6 |
5 |
6 |
7 |
8 | );
9 |
10 | ReactDOM.render(buttonsInstance, mountNode);
11 |
--------------------------------------------------------------------------------
/docs/examples/TabsNoAnimation.js:
--------------------------------------------------------------------------------
1 | const tabsInstance = (
2 |
3 |
10 | And here's some amazing content. It's very engaging. right?
11 |
12 |
13 | ), mountNode);
14 |
--------------------------------------------------------------------------------
/docs/examples/ListGroupHeader.js:
--------------------------------------------------------------------------------
1 | const listgroupInstance = (
2 |
5 |
11 |
12 |
13 | );
14 |
15 | ReactDOM.render(customButtonStyle, mountNode);
16 |
--------------------------------------------------------------------------------
/docs/examples/ListGroupStyle.js:
--------------------------------------------------------------------------------
1 | const listgroupInstance = (
2 |
7 |
12 | );
13 | }
14 | });
15 |
16 | export default PageHeader;
17 |
--------------------------------------------------------------------------------
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": [
3 | ["es2015", { "loose": true }],
4 | "stage-1",
5 | "react"
6 | ],
7 | "plugins": [
8 | "dev-expression",
9 | "transform-runtime",
10 | "transform-es3-member-expression-literals",
11 | "transform-es3-property-literals",
12 | "add-module-exports"
13 | ],
14 |
15 | "env": {
16 | "test": {
17 | "plugins": ["istanbul"]
18 | }
19 | }
20 | }
21 |
--------------------------------------------------------------------------------
/docs/examples/ButtonGroupToggleCheckbox.js:
--------------------------------------------------------------------------------
1 | const toggleButtonGroup = (
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 | );
11 |
12 | ReactDOM.render(labelVariationInstance, mountNode);
13 |
--------------------------------------------------------------------------------
/docs/examples/ListGroupLinked.js:
--------------------------------------------------------------------------------
1 | function alertClicked() {
2 | alert('You clicked the third ListGroupItem');
3 | }
4 |
5 | const listgroupInstance = (
6 |
4 |
5 |
6 | Modal title
7 |
8 |
9 |
10 | One fine body...
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 | );
21 |
22 | ReactDOM.render(modalInstance, mountNode);
23 |
--------------------------------------------------------------------------------
/docs/src/NotFoundPage.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import NavMain from './NavMain';
4 | import PageHeader from './PageHeader';
5 | import PageFooter from './PageFooter';
6 |
7 | const NotFoundPage = React.createClass({
8 | render() {
9 | return (
10 |
11 |
19 | );
20 | }
21 | });
22 |
23 | export default NotFoundPage;
24 |
--------------------------------------------------------------------------------
/test/server/ModalSpec.js:
--------------------------------------------------------------------------------
1 | import {assert} from 'chai';
2 | import React from 'react';
3 | import ReactDOMServer from 'react-dom/server';
4 |
5 | import Modal from '../../src/Modal.js';
6 |
7 | describe('Modal', () => {
8 | it('Should be rendered on the server side', () => {
9 | let noOp = () => {};
10 |
11 | assert.doesNotThrow(function renderOnServerSide() {
12 | return ReactDOMServer.renderToString(
13 |
3 |
4 | Tooltip right
5 |
6 |
7 |
8 | Tooltip top
9 |
10 |
11 |
12 | Tooltip left
13 |
14 |
15 |
16 | Tooltip bottom
17 |
18 |
19 | );
20 |
21 | ReactDOM.render(tooltipInstance, mountNode);
22 |
--------------------------------------------------------------------------------
/docs/examples/ListGroupCustom.js:
--------------------------------------------------------------------------------
1 | const CustomComponent = React.createClass({
2 | render() {
3 | return (
4 |
8 |
9 | {this.props.codeText}
10 |
11 |
12 | );
13 | }
14 |
15 | componentDidMount() {
16 | if (CodeMirror === undefined) {
17 | return;
18 | }
19 |
20 | CodeMirror.runMode(
21 | this.props.codeText,
22 | this.props.mode,
23 | ReactDOM.findDOMNode(this).children[0]
24 | );
25 | }
26 | }
27 |
--------------------------------------------------------------------------------
/src/MediaListItem.js:
--------------------------------------------------------------------------------
1 | import classNames from 'classnames';
2 | import React from 'react';
3 |
4 | import { bsClass, getClassSet, splitBsProps } from './utils/bootstrapUtils';
5 |
6 | class MediaListItem extends React.Component {
7 | render() {
8 | const { className, ...props } = this.props;
9 | const [bsProps, elementProps] = splitBsProps(props);
10 |
11 | const classes = getClassSet(bsProps);
12 |
13 | return (
14 |
18 | );
19 | }
20 | }
21 |
22 | export default bsClass('media', MediaListItem);
23 |
--------------------------------------------------------------------------------
/docs/examples/FormInline.js:
--------------------------------------------------------------------------------
1 | const formInstance = (
2 |
19 | );
20 |
21 | ReactDOM.render(formInstance, mountNode);
22 |
--------------------------------------------------------------------------------
/src/InputGroupAddon.js:
--------------------------------------------------------------------------------
1 | import classNames from 'classnames';
2 | import React from 'react';
3 |
4 | import { bsClass, getClassSet, splitBsProps } from './utils/bootstrapUtils';
5 |
6 | class InputGroupAddon extends React.Component {
7 | render() {
8 | const { className, ...props } = this.props;
9 | const [bsProps, elementProps] = splitBsProps(props);
10 |
11 | const classes = getClassSet(bsProps);
12 |
13 | return (
14 |
18 | );
19 | }
20 | }
21 |
22 | export default bsClass('input-group-addon', InputGroupAddon);
23 |
--------------------------------------------------------------------------------
/src/InputGroupButton.js:
--------------------------------------------------------------------------------
1 | import classNames from 'classnames';
2 | import React from 'react';
3 |
4 | import { bsClass, getClassSet, splitBsProps } from './utils/bootstrapUtils';
5 |
6 | class InputGroupButton extends React.Component {
7 | render() {
8 | const { className, ...props } = this.props;
9 | const [bsProps, elementProps] = splitBsProps(props);
10 |
11 | const classes = getClassSet(bsProps);
12 |
13 | return (
14 |
18 | );
19 | }
20 | }
21 |
22 | export default bsClass('input-group-btn', InputGroupButton);
23 |
--------------------------------------------------------------------------------
/tools/amd/README.md:
--------------------------------------------------------------------------------
1 | # react-bootstrap-bower
2 |
3 | [Bootstrap 3](http://getbootstrap.com) components built with [React](http://facebook.github.io/react/)
4 |
5 | This repo contains built AMD modules and standalone browser globals.
6 |
7 | There is a separate [source repo](https://github.com/react-bootstrap/react-bootstrap).
8 |
9 | A [docs site](http://react-bootstrap.github.io) with live editable examples.
10 |
11 | [](https://travis-ci.org/react-bootstrap/react-bootstrap) [](http://badge.fury.io/bo/react-bootstrap)
12 |
--------------------------------------------------------------------------------
/docs/examples/PanelGroupControlled.js:
--------------------------------------------------------------------------------
1 | const ControlledPanelGroup = React.createClass({
2 | getInitialState() {
3 | return {
4 | activeKey: '1'
5 | };
6 | },
7 |
8 | handleSelect(activeKey) {
9 | this.setState({ activeKey });
10 | },
11 |
12 | render() {
13 | return (
14 |
18 |
22 | );
23 | }
24 | }
25 |
26 | export default bsClass('page-header', PageHeader);
27 |
--------------------------------------------------------------------------------
/src/Well.js:
--------------------------------------------------------------------------------
1 | import classNames from 'classnames';
2 | import React from 'react';
3 |
4 | import { bsClass, bsSizes, getClassSet, splitBsProps }
5 | from './utils/bootstrapUtils';
6 | import { Size } from './utils/StyleConfig';
7 |
8 | class Well extends React.Component {
9 | render() {
10 | const { className, ...props } = this.props;
11 | const [bsProps, elementProps] = splitBsProps(props);
12 |
13 | const classes = getClassSet(bsProps);
14 |
15 | return (
16 |
20 | );
21 | }
22 | }
23 |
24 | export default bsClass('well',
25 | bsSizes([Size.LARGE, Size.SMALL], Well)
26 | );
27 |
--------------------------------------------------------------------------------
/src/ButtonToolbar.js:
--------------------------------------------------------------------------------
1 | import classNames from 'classnames';
2 | import React from 'react';
3 |
4 | import Button from './Button';
5 | import { bsClass, bsSizes, getClassSet, splitBsProps }
6 | from './utils/bootstrapUtils';
7 |
8 | class ButtonToolbar extends React.Component {
9 | render() {
10 | const { className, ...props } = this.props;
11 | const [bsProps, elementProps] = splitBsProps(props);
12 |
13 | const classes = getClassSet(bsProps);
14 |
15 | return (
16 |
21 | );
22 | }
23 | }
24 |
25 | export default bsClass('btn-toolbar',
26 | bsSizes(Button.SIZES, ButtonToolbar)
27 | );
28 |
--------------------------------------------------------------------------------
/docs/examples/DropdownButtonBasic.js:
--------------------------------------------------------------------------------
1 | const BUTTONS = ['Default', 'Primary', 'Success', 'Info', 'Warning', 'Danger'];
2 |
3 | function renderDropdownButton(title, i) {
4 | return (
5 | 19 | {children} 20 |
21 |Panel title
3 | ); 4 | 5 | const panelsInstance = ( 6 |
7 |
8 | Panel content
9 |
10 |
11 |
12 | Panel content
13 |
14 |
15 |
16 | Panel content
17 |
18 |
19 |
20 | Panel content
21 |
22 |
23 |
24 | Panel content
25 |
26 |
27 |
28 | Panel content
29 |
30 |
31 | );
32 |
33 | ReactDOM.render(panelsInstance, mountNode);
34 |
--------------------------------------------------------------------------------
/docs/examples/SplitButtonBasic.js:
--------------------------------------------------------------------------------
1 | const BUTTONS = ['Default', 'Primary', 'Success', 'Info', 'Warning', 'Danger'];
2 |
3 | function renderDropdownButton(title, i) {
4 | return (
5 |
12 |
15 |
16 | Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
17 | Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
18 |
19 |
20 | );
21 | }
22 | }
23 |
24 | ReactDOM.render(-
8 |
9 |
10 |
11 |
12 |
13 |
14 |
17 |
20 |
| # | 6 |First Name | 7 |Last Name | 8 |Username | 9 |
|---|---|---|---|
| 1 | 14 |Mark | 15 |Otto | 16 |@mdo | 17 |
| 2 | 20 |Jacob | 21 |Thornton | 22 |@fat | 23 |
| 3 | 26 |Larry the Bird | 27 |||
11 |
12 |
14 |
15 |
19 |
21 | );
22 | }
23 |
--------------------------------------------------------------------------------
/webpack/webpack.config.js:
--------------------------------------------------------------------------------
1 | import baseConfig, { options } from './base.config';
2 |
3 | export default {
4 | ...baseConfig,
5 |
6 | entry: {
7 | 'react-bootstrap': './src/index.js',
8 | },
9 |
10 | output: {
11 | path: './dist',
12 | filename: options.optimizeMinimize ? '[name].min.js' : '[name].js',
13 | library: 'ReactBootstrap',
14 | libraryTarget: 'umd',
15 | },
16 |
17 | externals: [
18 | {
19 | react: {
20 | root: 'React',
21 | commonjs2: 'react',
22 | commonjs: 'react',
23 | amd: 'react',
24 | },
25 | },
26 | {
27 | 'react-dom': {
28 | root: 'ReactDOM',
29 | commonjs2: 'react-dom',
30 | commonjs: 'react-dom',
31 | amd: 'react-dom',
32 | },
33 | },
34 | ],
35 | };
36 |
--------------------------------------------------------------------------------
/docs/examples/Fade.js:
--------------------------------------------------------------------------------
1 |
2 | class Example extends React.Component {
3 |
4 | constructor(...args) {
5 | super(...args);
6 | this.state = {};
7 | }
8 |
9 | render() {
10 | return (
11 |
12 | Glyphicons Glyphicon
13 |
14 |
15 | Use them in buttons, button groups for a toolbar, navigation, or prepended form inputs.
16 |Props
19 |
12 |
15 |
16 |
23 |
24 | );
25 | }
26 | }
27 |
28 | ReactDOM.render(
17 |
18 | Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
19 | Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
20 |
21 |
22 |
11 |
14 |
15 |
22 |
23 | );
24 | }
25 | }
26 |
27 | ReactDOM.render(
16 |
17 | Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
18 | Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
19 |
20 |
21 |
11 |
12 |
14 |
15 |
19 |
21 | );
22 | }
23 |
--------------------------------------------------------------------------------
/docs/examples/ButtonSizes.js:
--------------------------------------------------------------------------------
1 | const buttonsInstance = (
2 |
12 | Jumbotron Jumbotron
13 |
14 |
15 | A lightweight, flexible component that can optionally extend the entire viewport to showcase key content on your site.
16 |Props
19 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 | );
21 |
22 | ReactDOM.render(buttonsInstance, mountNode);
23 |
--------------------------------------------------------------------------------
/docs/examples/LeftTabs.js:
--------------------------------------------------------------------------------
1 | const tabsInstance = (
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 | );
21 |
22 | ReactDOM.render(glyphInstance, mountNode);
23 |
--------------------------------------------------------------------------------
/test/GlyphiconSpec.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactTestUtils from 'react-addons-test-utils';
3 | import ReactDOM from 'react-dom';
4 |
5 | import Glyphicon from '../src/Glyphicon';
6 |
7 | describe('
10 |
11 |
13 |
14 |
18 | );
19 | }
20 |
--------------------------------------------------------------------------------
/docs/examples/TooltipPositioned.js:
--------------------------------------------------------------------------------
1 |
2 | const tooltip = (
3 |
11 | Custom Styles
12 |
13 |
14 | 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:
24 | {children}
25 |
26 |
11 |
12 |
14 |
15 |
19 |
23 |
25 | );
26 | }
27 |
--------------------------------------------------------------------------------
/src/InputGroup.js:
--------------------------------------------------------------------------------
1 | import classNames from 'classnames';
2 | import React from 'react';
3 |
4 | import InputGroupAddon from './InputGroupAddon';
5 | import InputGroupButton from './InputGroupButton';
6 | import { bsClass, bsSizes, getClassSet, splitBsProps }
7 | from './utils/bootstrapUtils';
8 | import { Size } from './utils/StyleConfig';
9 |
10 | class InputGroup extends React.Component {
11 | render() {
12 | const { className, ...props } = this.props;
13 | const [bsProps, elementProps] = splitBsProps(props);
14 |
15 | const classes = getClassSet(bsProps);
16 |
17 | return (
18 |
22 | );
23 | }
24 | }
25 |
26 | InputGroup.Addon = InputGroupAddon;
27 | InputGroup.Button = InputGroupButton;
28 |
29 | export default bsClass('input-group',
30 | bsSizes([Size.LARGE, Size.SMALL], InputGroup)
31 | );
32 |
--------------------------------------------------------------------------------
/docs/examples/ButtonGroupVertical.js:
--------------------------------------------------------------------------------
1 | const buttonGroupInstance = (
2 |
12 | Alert messages Alert
13 |
14 |
15 | Basic alert styles.
16 |Closeable alerts
19 | just pass in a onDismiss function.
Props
23 |
11 |
12 |
14 |
15 |
19 |
21 | );
22 | }
23 |
--------------------------------------------------------------------------------
/src/ModalFooter.js:
--------------------------------------------------------------------------------
1 | import classNames from 'classnames';
2 | import React from 'react';
3 | import elementType from 'prop-types-extra/lib/elementType';
4 |
5 | import { bsClass, getClassSet, splitBsProps } from './utils/bootstrapUtils';
6 |
7 | const propTypes = {
8 | componentClass: elementType,
9 | };
10 |
11 | const defaultProps = {
12 | componentClass: 'div',
13 | };
14 |
15 | class ModalFooter extends React.Component {
16 | render() {
17 | const { componentClass: Component, className, ...props } = this.props;
18 | const [bsProps, elementProps] = splitBsProps(props);
19 |
20 | const classes = getClassSet(bsProps);
21 |
22 | return (
23 |
12 | Page header PageHeader
13 |
14 |
15 | 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
19 |
11 |
12 |
14 |
15 |
19 |
23 |
25 | );
26 | }
27 |
--------------------------------------------------------------------------------
/src/CarouselCaption.js:
--------------------------------------------------------------------------------
1 | import classNames from 'classnames';
2 | import React from 'react';
3 | import elementType from 'prop-types-extra/lib/elementType';
4 |
5 | import { bsClass, getClassSet, splitBsProps } from './utils/bootstrapUtils';
6 |
7 | const propTypes = {
8 | componentClass: elementType,
9 | };
10 |
11 | const defaultProps = {
12 | componentClass: 'div',
13 | };
14 |
15 | class CarouselCaption extends React.Component {
16 | render() {
17 | const { componentClass: Component, className, ...props } = this.props;
18 | const [bsProps, elementProps] = splitBsProps(props);
19 |
20 | const classes = getClassSet(bsProps);
21 |
22 | return (
23 |
12 | Wells Well
13 |
14 |
15 | Use the well as a simple effect on an element to give it an inset effect.
16 |Optional classes
19 | Control padding and rounded corners with two optional modifier classes.
20 |Props
23 |
9 |
14 |
15 | 20 |
21 | );
22 | }
23 | });
24 |
25 | ReactDOM.render(15 | 20 |
11 |
12 |
14 |
15 |
19 |
23 |
25 | );
26 | }
27 |
--------------------------------------------------------------------------------
/src/Glyphicon.js:
--------------------------------------------------------------------------------
1 | import classNames from 'classnames';
2 | import React from 'react';
3 | import PropTypes from 'prop-types';
4 |
5 | import { bsClass, getClassSet, prefix, splitBsProps }
6 | from './utils/bootstrapUtils';
7 |
8 | const propTypes = {
9 | /**
10 | * An icon name without "glyphicon-" prefix. See e.g. http://getbootstrap.com/components/#glyphicons
11 | */
12 | glyph: PropTypes.string.isRequired,
13 | };
14 |
15 | class Glyphicon extends React.Component {
16 | render() {
17 | const { glyph, className, ...props } = this.props;
18 | const [bsProps, elementProps] = splitBsProps(props);
19 |
20 | const classes = {
21 | ...getClassSet(bsProps),
22 | [prefix(bsProps, glyph)]: true,
23 | };
24 |
25 | return (
26 |
30 | );
31 | }
32 | }
33 |
34 | Glyphicon.propTypes = propTypes;
35 |
36 | export default bsClass('glyphicon', Glyphicon);
37 |
--------------------------------------------------------------------------------
/docs/examples/ButtonTypes.js:
--------------------------------------------------------------------------------
1 | const buttonsInstance = (
2 |
12 | Labels Label
13 |
14 |
15 | Create a {""} to highlight information
Available variations
19 | Add any of the below mentioned modifier classes to change the appearance of a label.
20 |Props
23 |
11 |
12 |
14 |
15 |
23 |
25 | );
26 | }
27 |
--------------------------------------------------------------------------------
/docs/examples/NavDropdown.js:
--------------------------------------------------------------------------------
1 | const NavDropdownExample = React.createClass({
2 | handleSelect(eventKey) {
3 | event.preventDefault();
4 | alert(`selected ${eventKey}`);
5 | },
6 |
7 | render() {
8 | return (
9 |
21 | );
22 | }
23 | });
24 |
25 | ReactDOM.render(
12 | Badges Badge
13 |
14 |
15 | Easily highlight new or unread items by adding a {" to links, Bootstrap navs, and more.
18 |
21 |
22 | Cross-browser compatibility
19 |Unlike in regular Bootstrap, badges self collapse even in Internet Explorer 8.
20 |Props
23 |
17 |
23 | 24 |
30 | 31 |
37 | );
38 | }
39 | });
40 |
41 | ReactDOM.render(23 | 24 |
30 | 31 |
<{'Col xs={12} md={8}'} />
5 | <{'Col xs={6} md={4}'} />
6 | <{'Col xs={6} md={4}'} />
10 | <{'Col xs={6} md={4}'} />
11 | <{'Col xsHidden md={4}'} />
12 | <{'Col xs={6} xsOffset={6}'} />
16 | <{'Col md={6} mdPush={6}'} />
20 | <{'Col md={6} mdPull={6}'} />
21 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 | );
36 |
37 | ReactDOM.render(buttonGroupInstance, mountNode);
38 |
--------------------------------------------------------------------------------
/docs/examples/SplitButtonDropup.js:
--------------------------------------------------------------------------------
1 | const buttonsInstance = (
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 | );
24 |
25 | ReactDOM.render(buttonsInstance, mountNode);
26 |
--------------------------------------------------------------------------------
/src/utils/deprecationWarning.js:
--------------------------------------------------------------------------------
1 | import warning from 'warning';
2 |
3 | let warned = {};
4 |
5 | function deprecationWarning(oldname, newname, link) {
6 | let message;
7 |
8 | if (typeof oldname === 'object') {
9 | message = oldname.message;
10 | } else {
11 | message = `${oldname} is deprecated. Use ${newname} instead.`;
12 |
13 | if (link) {
14 | message += `\nYou can read more about it at ${link}`;
15 | }
16 | }
17 |
18 | if (warned[message]) {
19 | return;
20 | }
21 |
22 | warning(false, message);
23 | warned[message] = true;
24 | }
25 |
26 |
27 | deprecationWarning.wrapper = (Component, ...args) => {
28 | return class DeprecatedComponent extends Component {
29 | componentWillMount(...methodArgs) {
30 | deprecationWarning(...args);
31 |
32 | if (super.componentWillMount) {
33 | super.componentWillMount(...methodArgs);
34 | }
35 | }
36 | };
37 | };
38 |
39 | export default deprecationWarning;
40 |
41 | export function _resetWarned() {
42 | warned = {};
43 | }
44 |
--------------------------------------------------------------------------------
/tools/build-cli.js:
--------------------------------------------------------------------------------
1 | /* eslint no-process-exit: 0 */
2 |
3 | import 'colors';
4 | import build from './build';
5 | import docs from '../docs/build';
6 | import { setExecOptions } from './exec';
7 |
8 | import yargs from 'yargs';
9 |
10 | const argv = yargs
11 | .help('h')
12 | .option('docs-only', {
13 | demand: false,
14 | default: false
15 | })
16 | .option('verbose', {
17 | demand: false,
18 | default: false,
19 | describe: 'Increased debug output'
20 | })
21 | .option('dev', {
22 | demand: false,
23 | default: false,
24 | describe: 'Only used when supplied with the --docs-only flag'
25 | })
26 | .argv;
27 |
28 | setExecOptions(argv);
29 |
30 | let buildProcess;
31 |
32 | if (argv.docsOnly) {
33 | buildProcess = docs(argv);
34 | } else {
35 | buildProcess = build(argv);
36 | }
37 |
38 | buildProcess
39 | .catch(err => {
40 | if (err.stack) {
41 | console.error(err.stack.red);
42 | } else {
43 | console.error(err.toString().red);
44 | }
45 | process.exit(1);
46 | });
47 |
--------------------------------------------------------------------------------
/test/WellSpec.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactTestUtils from 'react-addons-test-utils';
3 | import ReactDOM from 'react-dom';
4 |
5 | import Well from '../src/Well';
6 |
7 | describe('Well', () => {
8 | it('Should output a well with content', () => {
9 | let instance = ReactTestUtils.renderIntoDocument(
10 |
11 |
12 |
14 |
15 |
16 |
20 |
24 |
26 | );
27 | }
28 |
--------------------------------------------------------------------------------
/docs/examples/CarouselUncontrolled.js:
--------------------------------------------------------------------------------
1 | const carouselInstance = (
2 |
12 | Images Image
13 |
14 |
15 | Shape
16 | Use the rounded, circle and thumbnail props to customise the image.
Responsive
20 | Use the responsive to scale image nicely to the parent element.
Props
24 | 
5 | First slide label
7 |Nulla vitae elit libero, a pharetra augue mollis interdum.
8 |
12 | Second slide label
14 |Lorem ipsum dolor sit amet, consectetur adipiscing elit.
15 |
19 | Third slide label
21 |Praesent commodo cursus magna, vel scelerisque nisl consectetur.
22 |{children}
24 | );
25 | }
26 |
27 | expect(
28 | $(
29 | <{'Col sm={6} md={3}'} />{dummySentences.slice(0, 6).join(' ')} 7 |
<{'Col sm={6} md={3}'} />{dummySentences.slice(0, 4).join(' ')} 8 |
<{'Col sm={6} md={3}'} />{dummySentences.slice(0, 6).join(' ')} 9 |
<{'Col sm={6} md={3}'} />{dummySentences.slice(0, 2).join(' ')} 10 |
11 |
12 |
14 |
15 |
19 |
23 |
25 | );
26 | }
27 |
--------------------------------------------------------------------------------
/src/Thumbnail.js:
--------------------------------------------------------------------------------
1 | import classNames from 'classnames';
2 | import React from 'react';
3 | import PropTypes from 'prop-types';
4 |
5 | import SafeAnchor from './SafeAnchor';
6 | import { bsClass, getClassSet, splitBsProps } from './utils/bootstrapUtils';
7 |
8 | const propTypes = {
9 | src: PropTypes.string,
10 | alt: PropTypes.string,
11 | href: PropTypes.string,
12 | };
13 |
14 | class Thumbnail extends React.Component {
15 | render() {
16 | const { src, alt, className, children, ...props } = this.props;
17 | const [bsProps, elementProps] = splitBsProps(props);
18 |
19 | const Component = elementProps.href ? SafeAnchor : 'div';
20 | const classes = getClassSet(bsProps);
21 |
22 | return (
23 |
12 | Tables Table
13 |
14 |
15 | Use the striped, bordered, condensed and hover props to customise the table.
Responsive
19 | 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
23 |
31 | {children}
32 |
33 | )}
34 |
11 |
12 |
14 |
15 |
21 |
23 | );
24 | }
25 |
--------------------------------------------------------------------------------
/docs/examples/AlertDismissable.js:
--------------------------------------------------------------------------------
1 | const AlertDismissable = React.createClass({
2 | getInitialState() {
3 | return {
4 | alertVisible: true
5 | };
6 | },
7 |
8 | render() {
9 | if (this.state.alertVisible) {
10 | return (
11 |
12 | Responsive embed ResponsiveEmbed
13 |
14 |
15 | 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.
16 |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
21 | Oh snap! You got an error!
13 |Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.
14 |15 | 16 | or 17 | 18 |
19 |
11 |
12 |
14 |
15 |
19 |
20 |
21 |
23 | );
24 | }
25 |
--------------------------------------------------------------------------------
/docs/src/sections/ThumbnailSection.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import Anchor from '../Anchor';
4 | import PropTable from '../PropTable';
5 | import ReactPlayground from '../ReactPlayground';
6 | import Samples from '../Samples';
7 |
8 | export default function ThumbnailSection() {
9 | return (
10 |
12 | Validation states FormControl.Feedback
13 |
14 |
15 | Set validationState to one of 'success', 'warning' or 'error' to show validation state. Set validationState to null (or undefined) to hide validation state. Add {' for a feedback icon when validation state is set.
Props
19 |
20 | FormControl.Feedback
21 |
11 |
12 |
14 |
15 |
18 |
22 |
26 |
28 | );
29 | }
30 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2014-present Stephen J. Collings, Matthew Honnibal, Pieter Vanderwerff
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in
13 | all copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21 | THE SOFTWARE.
22 |
--------------------------------------------------------------------------------
/docs/src/sections/PaginationSection.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import Anchor from '../Anchor';
4 | import PropTable from '../PropTable';
5 | import ReactPlayground from '../ReactPlayground';
6 | import Samples from '../Samples';
7 |
8 | export default function PaginationSection() {
9 | return (
10 |
12 | Thumbnails Thumbnail
13 |
14 |
15 | Thumbnails are designed to showcase linked images with minimal required markup. You can extend the grid component with thumbnails.
16 | 17 |Anchor Thumbnail
18 | Creates an anchor wrapping an image.
19 |Divider Thumbnail
22 | Creates a divider wrapping an image and other children elements.
23 |Props
26 |
11 |
12 |
14 |
15 |
19 |
23 |
25 | );
26 | }
27 |
--------------------------------------------------------------------------------
/test/JumbotronSpec.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactTestUtils from 'react-addons-test-utils';
3 | import ReactDOM from 'react-dom';
4 |
5 | import Jumbotron from '../src/Jumbotron';
6 |
7 | describe('
12 | Pagination Pagination
13 |
14 |
15 | 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
19 | such as first, last, previous, next, boundaryLinks and ellipsis.
Props
23 | | # | 6 |Table heading | 7 |Table heading | 8 |Table heading | 9 |Table heading | 10 |Table heading | 11 |Table heading | 12 |
|---|---|---|---|---|---|---|
| 1 | 17 |Table cell | 18 |Table cell | 19 |Table cell | 20 |Table cell | 21 |Table cell | 22 |Table cell | 23 |
| 2 | 26 |Table cell | 27 |Table cell | 28 |Table cell | 29 |Table cell | 30 |Table cell | 31 |Table cell | 32 |
| 3 | 35 |Table cell | 36 |Table cell | 37 |Table cell | 38 |Table cell | 39 |Table cell | 40 |Table cell | 41 |
Thumbnail label
7 |Description
8 |9 | 10 | 11 |
12 |Thumbnail label
17 |Description
18 |19 | 20 | 21 |
22 |Thumbnail label
27 |Description
28 |29 | 30 | 31 |
32 |-
26 | {ValidComponentChildren.map(children, child => (
27 | cloneElement(child, {
28 | onSelect: createChainedFunction(child.props.onSelect, onSelect),
29 | })
30 | ))}
31 |
<{'Col sm={6} md={3}'} />{dummySentences.slice(0, 6).join(' ')} 7 |
<{'Col sm={6} md={3}'} />{dummySentences.slice(0, 4).join(' ')} 8 |
<{'Clearfix visibleSmBlock'} /><{'Col sm={6} md={3}'} />{dummySentences.slice(0, 6).join(' ')} 10 |
<{'Col sm={6} md={3}'} />{dummySentences.slice(0, 2).join(' ')} 11 |
19 |
22 |
23 |
24 | Tooltip overload!
25 |
26 |
27 | Tooltip overload!
28 |
29 |
30 | Tooltip overload!
31 |
32 |
33 | Tooltip overload!
34 |
35 |
36 | );
37 | }
38 | });
39 |
40 | ReactDOM.render(
11 |
12 |
14 |
15 |
19 |
22 |
25 |
27 | );
28 | }
29 |
--------------------------------------------------------------------------------
/test/MediaListSpec.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactTestUtils from 'react-addons-test-utils';
3 | import ReactDOM from 'react-dom';
4 |
5 | import Media from '../src/Media';
6 |
7 | describe(`Media.List`, () => {
8 | it(`uses "ul"`, () => {
9 | const instance = ReactTestUtils.renderIntoDocument(
10 |
12 | Breadcrumbs Breadcrumb, Breadcrumb.Item
13 |
14 |
15 | 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
19 | Props
22 | Breadcrumb component itself doesn't have any specific public properties
Breadcrumb.Item
25 |
17 | Holy guacamole! Check this info.
18 |
19 | );
20 | },
21 | });
22 |
23 | const Example = React.createClass({
24 | getInitialState() {
25 | return { show: true };
26 | },
27 |
28 | toggle() {
29 | this.setState({ show: !this.state.show });
30 | },
31 |
32 | render() {
33 | return (
34 |
35 |
38 |
39 | this.setState({ show: false })}
42 | placement="right"
43 | container={this}
44 | target={() => ReactDOM.findDOMNode(this.refs.target)}
45 | >
46 |
48 |
49 | );
50 | },
51 | });
52 |
53 | ReactDOM.render(
11 |
12 |
14 |
15 |
21 |
27 |
29 | );
30 | }
31 |
--------------------------------------------------------------------------------
/docs/src/sections/PagerSection.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import Anchor from '../Anchor';
4 | import PropTable from '../PropTable';
5 | import ReactPlayground from '../ReactPlayground';
6 | import Samples from '../Samples';
7 |
8 | export default function PagerSection() {
9 | return (
10 |
12 | Custom overlays Overlay
13 |
14 |
15 |
16 | 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.
17 |
Use Overlay instead of Tooltip and Popover
21 |
22 | 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.
23 |
Props
27 |
11 |
12 |
14 |
15 |
18 |
21 |
25 |
29 |
30 |
31 |
34 |
36 | );
37 | }
38 |
--------------------------------------------------------------------------------
/src/Alert.js:
--------------------------------------------------------------------------------
1 | import classNames from 'classnames';
2 | import React from 'react';
3 | import PropTypes from 'prop-types';
4 |
5 | import { bsClass, bsStyles, getClassSet, prefix, splitBsProps }
6 | from './utils/bootstrapUtils';
7 | import { State } from './utils/StyleConfig';
8 | import CloseButton from './CloseButton';
9 |
10 | const propTypes = {
11 | onDismiss: PropTypes.func,
12 | closeLabel: PropTypes.string,
13 | };
14 |
15 | const defaultProps = {
16 | closeLabel: 'Close alert',
17 | };
18 |
19 | class Alert extends React.Component {
20 | render() {
21 | const { onDismiss, closeLabel, className, children, ...props } =
22 | this.props;
23 | const [bsProps, elementProps] = splitBsProps(props);
24 |
25 | const dismissable = !!onDismiss;
26 | const classes = {
27 | ...getClassSet(bsProps),
28 | [prefix(bsProps, 'dismissable')]: dismissable,
29 | };
30 |
31 | return (
32 |
12 | Pager Pager, Pager.Item
13 |
14 |
15 | Quick previous and next links.
16 | 17 |Centers by default
18 | Aligned
21 | Set the previous or next prop to true, to align left or right.
Disabled
25 | Set the disabled prop to true to disable the link.
Props
29 |
30 | Pager
31 | Pager.Item
34 |
37 | {dismissable && (
38 |
45 | );
46 | }
47 | }
48 |
49 | Alert.propTypes = propTypes;
50 | Alert.defaultProps = defaultProps;
51 |
52 | export default bsStyles(Object.values(State), State.INFO,
53 | bsClass('alert', Alert)
54 | );
55 |
--------------------------------------------------------------------------------
/src/Badge.js:
--------------------------------------------------------------------------------
1 | import classNames from 'classnames';
2 | import React from 'react';
3 | import PropTypes from 'prop-types';
4 |
5 | import { bsClass, getClassSet, splitBsProps } from './utils/bootstrapUtils';
6 |
7 | // TODO: `pullRight` doesn't belong here. There's no special handling here.
8 |
9 | const propTypes = {
10 | pullRight: PropTypes.bool,
11 | };
12 |
13 | const defaultProps = {
14 | pullRight: false,
15 | };
16 |
17 | class Badge extends React.Component {
18 | hasContent(children) {
19 | let result = false;
20 |
21 | React.Children.forEach(children, child => {
22 | if (result) {
23 | return;
24 | }
25 |
26 | if (child || child === 0) {
27 | result = true;
28 | }
29 | });
30 |
31 | return result;
32 | }
33 |
34 | render() {
35 | const { pullRight, className, children, ...props } = this.props;
36 | const [bsProps, elementProps] = splitBsProps(props);
37 |
38 | const classes = {
39 | ...getClassSet(bsProps),
40 | 'pull-right': pullRight,
41 |
42 | // Hack for collapsing on IE8.
43 | hidden: !this.hasContent(children),
44 | };
45 |
46 | return (
47 |
51 | {children}
52 |
53 | );
54 | }
55 | }
56 |
57 | Badge.propTypes = propTypes;
58 | Badge.defaultProps = defaultProps;
59 |
60 | export default bsClass('badge', Badge);
61 |
--------------------------------------------------------------------------------
/docs/src/sections/TooltipSection.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import Anchor from '../Anchor';
4 | import PropTable from '../PropTable';
5 | import ReactPlayground from '../ReactPlayground';
6 | import Samples from '../Samples';
7 |
8 | export default function TooltipSection() {
9 | return (
10 |
11 |
12 |
14 |
15 |
21 |
25 |
29 |
30 |
31 |
34 |
36 | );
37 | }
38 |
--------------------------------------------------------------------------------
/docs/examples/PopoverTriggerBehaviors.js:
--------------------------------------------------------------------------------
1 | const popoverClick = (
2 |
12 | Tooltips Tooltip
13 |
14 |
15 |
16 | Tooltip component for a more stylish alternative to that anchor tag title attribute.
17 |
With OverlayTrigger
21 | Attach and position tooltips with OverlayTrigger.
In text copy
25 | Positioned tooltip in text copy.
26 |Props
29 |
30 | OverlayTrigger
31 | Tooltip
34 |
11 |
12 |
14 |
15 |
16 |
20 |
24 |
25 |
26 |
29 |
32 |
34 | );
35 | }
36 |
--------------------------------------------------------------------------------
/src/ToggleButton.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import Button from './Button';
4 |
5 | const propTypes = {
6 | /**
7 | * The `` `type`
8 | * @type {[type]}
9 | */
10 | type: React.PropTypes.oneOf(['checkbox', 'radio']),
11 |
12 | /**
13 | * The HTML input name, used to group like checkboxes or radio buttons together
14 | * semantically
15 | */
16 | name: React.PropTypes.string,
17 |
18 | /**
19 | * The checked state of the input, managed by `
12 | Carousels Carousel, Carousel.Item, Carousel.Caption
13 |
14 |
15 | Uncontrolled
16 | Allow the component to control its own state.
17 |Controlled
20 | Pass down the active state on render via props.
21 |Props
24 |
25 | Carousel
26 | Carousel.Item
29 | Carousel.Caption
32 |
22 |
29 |
30 |
36 |
37 | Contained Modal
38 |
39 |
40 | Elit est explicabo ipsum eaque dolorem blanditiis doloribus sed id ipsam, beatae, rem fuga id earum? Inventore et facilis obcaecati.
41 |
42 |
43 |
44 |
45 |
46 |
47 | );
48 | }
49 | });
50 |
51 | ReactDOM.render(
18 | Tight pants next level keffiyeh
11 |
12 |
14 |
15 |
31 |
33 | );
34 | }
35 |
--------------------------------------------------------------------------------
/src/ModalDialog.js:
--------------------------------------------------------------------------------
1 | import classNames from 'classnames';
2 | import React from 'react';
3 | import PropTypes from 'prop-types';
4 |
5 | import { bsClass, bsSizes, getClassSet, prefix, splitBsProps }
6 | from './utils/bootstrapUtils';
7 | import { Size } from './utils/StyleConfig';
8 |
9 | const propTypes = {
10 | /**
11 | * A css class to apply to the Modal dialog DOM node.
12 | */
13 | dialogClassName: PropTypes.string,
14 | };
15 |
16 | class ModalDialog extends React.Component {
17 | render() {
18 | const { dialogClassName, className, style, children, ...props } =
19 | this.props;
20 | const [bsProps, elementProps] = splitBsProps(props);
21 |
22 | const bsClassName = prefix(bsProps);
23 |
24 | const modalStyle = { display: 'block', ...style };
25 |
26 | const dialogClasses = {
27 | ...getClassSet(bsProps),
28 | [bsClassName]: false,
29 | [prefix(bsProps, 'dialog')]: true,
30 | };
31 |
32 | return (
33 |
12 | Menu items MenuItem
13 |
14 |
15 | This component represents a menu item in a dropdown.
16 |It supports the basic anchor properties href, target, title.
18 | It also supports different properties of the normal Bootstrap MenuItem. 19 |
20 |-
21 |
header: To add a header label to sections
22 | divider: Adds an horizontal divider between sections
23 | disabled: shows the item as disabled, and preventsonSelectfrom firing
24 | eventKey: passed to the callback
25 | onSelect: a callback that is called when the user clicks the item.
26 |
The callback is called with the following arguments: event and eventKey
Props
31 |
40 |
46 | );
47 | }
48 | }
49 |
50 | ModalDialog.propTypes = propTypes;
51 |
52 | export default bsClass('modal',
53 | bsSizes([Size.LARGE, Size.SMALL], ModalDialog)
54 | );
55 |
--------------------------------------------------------------------------------
/test/GridSpec.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactTestUtils from 'react-addons-test-utils';
3 | import ReactDOM from 'react-dom';
4 |
5 | import Grid from '../src/Grid';
6 |
7 | describe('
41 |
45 |
42 | {children}
43 |
44 |
11 |
12 |
14 |
15 |
16 |
20 |
24 |
25 |
26 |
28 | );
29 | }
30 |
--------------------------------------------------------------------------------
/docs/src/sections/GridSection.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import Anchor from '../Anchor';
4 | import PropTable from '../PropTable';
5 | import ReactPlayground from '../ReactPlayground';
6 | import Samples from '../Samples';
7 |
8 | export default function GridSection() {
9 | return (
10 |
12 | Form layout Form
13 |
14 |
15 | Inline forms
16 | Use {' instead of {'. 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.
Horizontal forms
20 | Use {' instead of {', then use {'s to align labels and controls. Do not use {' here, as {' will already serve as a grid row in a horizontal form.
Props
24 |
25 | Form (only needed for horizontal or inline forms)
26 |
11 |
12 |
14 |
15 |
16 |
19 |
20 |
27 |
28 |
29 |
32 |
35 |
38 |
40 | );
41 | }
42 |
--------------------------------------------------------------------------------
/docs/src/sections/NavSection.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import Anchor from '../Anchor';
4 | import PropTable from '../PropTable';
5 | import ReactPlayground from '../ReactPlayground';
6 | import Samples from '../Samples';
7 |
8 | export default function NavSection() {
9 | return (
10 |
12 | Grid system Grid, Row, Col, Clearfix
13 |
14 |
15 | Basic Grid
16 | Clearfix
19 |
20 | Below, the columns won't clear correctly in viewport sm (768px ≤ width < 992px).
Introduce Clearfix, set to visible for the viewports with issue, so that columns clear correctly.
Props
27 |
28 | Grid
29 | Row
32 | Col
35 | Clearfix
38 |
11 |
12 |
14 |
15 |
19 |
23 |
27 |
31 |
32 |
33 |
36 |
38 | );
39 | }
40 |
--------------------------------------------------------------------------------
/src/ControlLabel.js:
--------------------------------------------------------------------------------
1 | import classNames from 'classnames';
2 | import React from 'react';
3 | import PropTypes from 'prop-types';
4 | import warning from 'warning';
5 |
6 | import { bsClass, getClassSet, splitBsProps } from './utils/bootstrapUtils';
7 |
8 | const propTypes = {
9 | /**
10 | * Uses `controlId` from `
12 | Navs Nav, NavItem
13 |
14 |
15 | Navs come in two styles, pills and tabs. Disable a tab by adding disabled.
Dropdown
19 | Add dropdowns using the NavDropdown component.
Stacked
23 | They can also be stacked vertically.
Justified
27 | They can be justified to take the full width of their parent.