Как задать footer в React js Bootsrap?

Хочу сделать компонент реакта, который служил бы footer'ом для веб страницы. В документации по react-bootstrap нашел упоминание о футере только в связке с модальным окном(у этого компонента есть и header и footer). Также нашел вот вот такую штуку, но прикрутить ее не получилось. Подскажите пожалуйста как можно решить данный вопрос, может есть какой-то туториал,на базе которого это можно реализовать? код моего компонента(пункты списков ul удалил для лучшего восприятия кода):

const SearchBar = React.createClass({
    _onChange: function (e) {
        this.props.onChange(e);
    },
    render: function () {
        return (
            <FormGroup>
                <InputGroup>
                    <FormControl type="text"
                                 placeholder="Search..."
                                 name={name}
                                 onChange={this._onChange}
                    />
                    <FormControl.Feedback />
                    <InputGroup.Button>
                        <Button bsStyle="danger"><span className="glyphicon glyphicon-search"> </span></Button>
                    </InputGroup.Button>
                </InputGroup>                  
            </FormGroup>
        );
    }
});
const IconBar = React.createClass({
    render: function () {
        return (
            <div className="row">
                <div className="col-md-2">
                    <a href="" aria-hidden="true">
                        <Image src="/img/icons/facebook.png" responsive/>
                    </a>
                </div>
                <div className="col-md-2">
                    <a href="" aria-hidden="true">
                        <Image src="/img/icons/googleplus.png" responsive/>
                    </a>
                </div>
                <div className="col-md-2">
                    <a href="" aria-hidden="true">
                        <Image src="/img/icons/twitter.png" responsive/>
                    </a>
                </div>
                <div className="col-md-2">
                    <a href="" aria-hidden="true">
                        <Image src="/img/icons/linkedin.png" responsive/>
                    </a>
                </div>
                <div className="col-md-2">
                    <a href="" aria-hidden="true">
                        <Image src="/img/icons/yahoo.png" responsive/>
                    </a>
                </div>
            </div>
        );
    }
});

var Footer = React.createClass({
    render: function () {
        var footerStyle = {
            color: 'white',
            backgroundColor:'#4b4a45'
                };
        return (
            <div className="container-fluid" style={footerStyle}>
                <div className="col-md-4">
                    <div className="row">
                        <div className="col-md-5">
                            <ul>                                                        
                            </ul>
                        </div>
                        <div className="col-md-5">
                            <ul>               
                            </ul>
                        </div>
                    </div>
                </div>
                <div className="col-md-4">
                    <div className="col-md-8 col-md-offset-2">
                        <IconBar/>
                        <SearchBar/>
                    </div>
                </div>
                <div className="col-md-4">
                    <div className="row">
                        <div className="col-md-5">
                            <ul>                    
                            </ul>
                        </div>
                        <div className="col-md-4">
                            <ul>                                
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
});
export default Footer;