Bootstrap tabs

Bootstrap tabs are components which separate content placed in the same wrapper, but in the separate pane. Only one pane can be displayed at the time. Tabs available in MDB share general markup and styles, as well as the .naved element managing the active and disabled states.

MDB Tabs are compatible with ReactRouter, meaning that <NavLink> components inside can be used both for one-page tabs as well as general routing solution for main navigation. Make sure to include the wrapping <BrowserRouter> (in the examples aliased as <Router>).

If you are using navs to provide a navigation bar, be sure to add a role="navigation" to <Nav> component, as well as approptiate role attributes to the <NavLinks> (role="tab").


Basic examples MDB Pro component


Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.


Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.


Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.

import React from 'react';
import { BrowserRouter as Router } from 'react-router-dom';
import { TabPane, TabContent, Nav, NavItem, NavLink, Row, Col, Containet } from 'mdbreact';
import classnames from 'classnames';

class TabsPage extends React.Component {

  constructor(props) {
    super(props);
    this.toggle = this.toggle.bind(this);
    this.state = {
      activeItem: '1'
    };
  }
  toggle(tab) {
    if (this.state.activeItem !== tab) {
      this.setState({
        activeItem: tab
      });
    }
  }
  render() {
    return (
      <Router>
        <Container>
          <Nav tabs className="nav-justified">
            <NavItem>
              <NavLink
                className={classnames({ active: this.state.activeItem === '1' })}
                onClick={() => { this.toggle('1'); }}
              >
              Profile
              </NavLink>
            </NavItem>
            <NavItem>
              <NavLink
                className={classnames({ active: this.state.activeItem === '2' })}
                onClick={() => { this.toggle('2'); }}
              >
                Follow
              </NavLink>
            </NavItem>
            <NavItem>
              <NavLink
                className={classnames({ active: this.state.activeItem === '3' })}
                onClick={() => { this.toggle('3'); }}
              >
                Contact
              </NavLink>
            </NavItem>
          </Nav>
          <TabContent activeItem={this.state.activeItem}>
            <TabPane tabId="1">
              <Row>
                <Col sm="12">
                <br />
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus
                      reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione
                      porro voluptate odit minima.</p>
                </Col>
              </Row>
            </TabPane>
            <TabPane tabId="2">
              <Row>
                <Col sm="12">
                  <br />
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus
                      reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione
                      porro voluptate odit minima.</p>
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus
                      reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione
                      porro voluptate odit minima.</p>
                </Col>
              </Row>
            </TabPane>
            <TabPane tabId="3">
              <Row>
                <Col sm="12">
                  <br />
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus
                      reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione
                      porro voluptate odit minima.</p>
                </Col>
              </Row>
            </TabPane>
          </TabContent>
        </Container>
      </Router>
    );
  }
}

export default TabsPage;

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.


Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.


Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.

import React from 'react';
import { BrowserRouter as Router } from 'react-router-dom';
import { TabPane, TabContent, Nav, NavItem, NavLink, Fa, Row, Col, Container } from 'mdbreact';
import classnames from 'classnames';
class TabsPage extends React.Component {

  constructor(props) {
    super(props);
    this.toggle = this.toggle.bind(this);
    this.state = {
      activeItem: '1'
    };
  }
  toggle(tab) {
    if (this.state.activeItem !== tab) {
      this.setState({
        activeItem: tab
      });
    }
  }
  render() {
    return (
      <Router>
        <Container>
          <Nav tabs color="indigo" className="nav-justified">
            <NavItem>
              <NavLink
                className={classnames({ active: this.state.activeItem === '1' })}
                onClick={() => { this.toggle('1'); }}
              >
              <Fa icon="user"/> Profile
              </NavLink>
            </NavItem>
            <NavItem>
              <NavLink
                className={classnames({ active: this.state.activeItem === '2' })}
                onClick={() => { this.toggle('2'); }}
              >
                <Fa icon="heart"/> Follow
              </NavLink>
            </NavItem>
            <NavItem>
              <NavLink
                className={classnames({ active: this.state.activeItem === '3' })}
                onClick={() => { this.toggle('3'); }}
              >
                <Fa icon="envelope"/> Contact
              </NavLink>
            </NavItem>
          </Nav>
          <TabContent activeItem={this.state.activeItem}>
            <TabPane tabId="1">
              <Row>
                <Col sm="12">
                <br />
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus
                      reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione
                      porro voluptate odit minima.</p>
                </Col>
              </Row>
            </TabPane>
            <TabPane tabId="2">
              <Row>
                <Col sm="12">
                  <br />
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus
                        reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione
                        porro voluptate odit minima.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus
                        reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione
                        porro voluptate odit minima.</p>
                </Col>
              </Row>
            </TabPane>
            <TabPane tabId="3">
              <Row>
                <Col sm="12">
                  <br />
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus
                        reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione
                        porro voluptate odit minima.</p>
                </Col>
              </Row>
            </TabPane>
          </TabContent>
        </Container>
      </Router>
    );
  }
}

export default TabsPage;

Note: Please note, that for each tab navigation necessitates a state object property to store data about active panes (here this.state.activeItem) and a method to manage changes in this state (this.toggle(tab) in the example above). They both can me named however you like it, yet the naming needs to stay consistent.


Pills MDB Pro component


Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.


Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.


Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.


Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.

import React from 'react';
import { BrowserRouter as Router } from 'react-router-dom';
import { Container, Row, Col, TabPane, TabContent, Nav, NavItem, NavLink, Fa } from 'mdbreact';
import classnames from 'classnames';


class TabsPage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      activeItemPills: '1',
    };
    this.togglePills = this.togglePills.bind(this);
  }

  togglePills(tab) {
    if (this.state.activePills !== tab) {
      this.setState({
        activeItemPills: tab
      });
    }
  }

  render() {
    return (
      <Router>
        <Container className="mt-4">
          <Nav pills color="secondary" className="nav-justified ">
            <NavItem>
              <NavLink to="#" className={classnames({ active: this.state.activeItemPills === '1' })} onClick={() => { this.togglePills('1'); }}>
                Active
              </NavLink>
            </NavItem>
            <NavItem>
              <NavLink to="#" className={classnames({ active: this.state.activeItemPills === '2' })} onClick={() => { this.togglePills('2'); }}>
                Link
              </NavLink>
            </NavItem>
            <NavItem>
              <NavLink to="#" className={classnames({ active: this.state.activeItemPills === '3' })} onClick={() => { this.togglePills('3'); }}>
                Link
              </NavLink>
            </NavItem>
            <NavItem>
              <NavLink to="#" className={classnames({ active: this.state.activeItemPills === '4' })} onClick={() => { this.togglePills('4'); }}>
                Help
              </NavLink>
            </NavItem>
          </Nav>
          <TabContent activeItem={this.state.activeItemPills}>
            <TabPane tabId="1">
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
            </TabPane>
            <TabPane tabId="2">
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
            </TabPane>
            <TabPane tabId="3">
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
            </TabPane>
            <TabPane tabId="4">
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
            </TabPane>
          </TabContent>
        </Container>
      </Router>
    );
  }
}

export default TabsPage;

Vertical pills

import React from 'react';
import { BrowserRouter as Router } from 'react-router-dom';
import { Container, Row, Col, TabPane, TabContent, Nav, NavItem, NavLink, Fa } from 'mdbreact';
import classnames from 'classnames';


class TabsPage extends React.Component {
  constructor(props) {
    super(props);

    this.toggleVerticalPills = this.toggleVerticalPills.bind(this);
    this.state = {
      activeItemVerticalPills: '1',
    };
  }

  toggleVerticalPills(tab) {
    if (this.state.activeItem3 !== tab) {
      this.setState({
        activeItemVerticalPills: tab
      });
    }
  }

  render() {
    return (
      <Router>
        <Container className="mt-4">
          <Row>
            <Col md="12">
              <h2 className="mt-5">Vertical Pills</h2>
              <Row>
                <Col md="3">
                  <Nav pills color="primary" className="flex-column">
                  <NavItem>
                    <NavLink to="#" className={classnames({ active: this.state.activeItemVerticalPills === '1' })} onClick={() => { this.toggleVerticalPills('1'); }}>Downloads <Fa icon="download" className="ml-2"/></NavLink>
                  </NavItem>
                  <NavItem>
                    <NavLink to="#" className={classnames({ active: this.state.activeItemVerticalPills === '2' })} onClick={() => { this.toggleVerticalPills('2'); }}>Orders & invoices<Fa icon="file-text" className="ml-2"/></NavLink>
                  </NavItem>
                  <NavItem>
                    <NavLink to="#" className={classnames({ active: this.state.activeItemVerticalPills === '3' })} onClick={() => { this.toggleVerticalPills('3'); }}>Billing Details<Fa icon="address-card" className="ml-2"/></NavLink>
                  </NavItem>
                  </Nav>
                </Col>
                <Col md="9">
                  <TabContent activeItem={this.state.activeItemVerticalPills}>
                    <TabPane tabId="1">
                      <h5 className="my-2 h5">Panel 1</h5>
                    </TabPane>
                    <TabPane tabId="2">
                      <h5 className="my-2 h5">Panel 2</h5>
                    </TabPane>
                    <TabPane tabId="3">
                      <h5 className="my-2 h5">Panel 3</h5>
                    </TabPane>
                  </TabContent>
                </Col>
              </Row>
            </Col>
          </Row>
        </Container>
      </Router>
    );
  }
}

export default TabsPage;

Pills within the tabs


Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.

import React from 'react';
import { BrowserRouter as Router } from 'react-router-dom';
import { Container, Row, Col, Button, CardBody, CardTitle, CardText, TabPane, TabContent, Nav, NavItem, NavLink, Fa } from 'mdbreact';
import classnames from 'classnames';


class TabsPage extends React.Component {
  constructor(props) {
    super(props);

    this.toggleOuterTabs = this.toggleOuterTabs.bind(this);
    this.toggleInnerPills = this.toggleInnerPills.bind(this);
    this.state = {
      activeItemOuterTabs: '1',
      activeItemInnerPills: '1',
    };
  }
  toggleOuterTabs(tab) {
    if (this.state.activeItemOuterTabs2 !== tab) {
      this.setState({
        activeItemOuterTabs: tab
      });
    }
  }
  toggleInnerPills(tab) {
    if (this.state.activeItemInnerPills !== tab) {
      this.setState({
        activeItemInnerPills: tab
      });
    }
  }
  render() {
    return (
      <Router>
        <Container className="mt-4">
          <Row>
            <Col md="12">
            <h2 className="mt-5">Pills within the tabs</h2>
            <Nav tabs className="nav-justified" color="indigo">
                <NavItem>
                  <NavLink to="#" className={classnames({ active: this.state.activeItemOuterTabs === '1' })} onClick={() => { this.toggleOuterTabs('1'); }} role="tab">
                  <Fa icon="user"/> Profile
                  </NavLink>
                </NavItem>
                <NavItem>
                  <NavLink to="#" className={classnames({ active: this.state.activeItemOuterTabs === '2' })} onClick={() => { this.toggleOuterTabs('2'); }} role="tab">
                  <Fa icon="heart"/> Follow
                  </NavLink>
                </NavItem>
              </Nav>
              <TabContent className="card" activeItem={this.state.activeItemOuterTabs}>
                <TabPane tabId="1" role="tabpanel">
                  <Row>
                  <Col md="3">
                    <Nav pills color="primary" className="flex-column">
                    <NavItem>
                      <NavLink to="#" className={classnames({ active: this.state.activeItemInnerPills === '1' })} onClick={() => { this.toggleInnerPills('1'); }}>Downloads <Fa icon="download" className="ml-2"/></NavLink>
                    </NavItem>
                    <NavItem>
                      <NavLink to="#" className={classnames({ active: this.state.activeItemInnerPills === '2' })} onClick={() => { this.toggleInnerPills('2'); }}>Orders & invoices<Fa icon="file-text" className="ml-2"/></NavLink>
                    </NavItem>
                    <NavItem>
                      <NavLink to="#" className={classnames({ active: this.state.activeItemInnerPills === '3' })} onClick={() => { this.toggleInnerPills('3'); }}>Billing Details<Fa icon="address-card" className="ml-2"/></NavLink>
                    </NavItem>
                    </Nav>
                  </Col>
                  <Col md="9">
                    <TabContent activeItem={this.state.activeItemInnerPills}>
                      <TabPane tabId="1">
                        <CardBody>
                          <CardTitle>Downloads</CardTitle>
                          <CardText>Completely legal</CardText>
                        </CardBody>
                      </TabPane>
                      <TabPane tabId="2">
                        <CardBody>
                          <CardTitle>Orders & Invoices</CardTitle>
                          <CardText>"Hello? Is it me you're looking for?"</CardText>
                        </CardBody>
                      </TabPane>
                      <TabPane tabId="3">
                        <CardBody>
                          <CardTitle>Billing Details</CardTitle>
                          <CardText>Time to pay <Button className="ml-3" color="secondary">pay</Button></CardText>
                        </CardBody>
                      </TabPane>
                    </TabContent>
                  </Col>
                </Row>
                </TabPane>
                <TabPane tabId="2" role="tabpanel">
                  <Row>
                    <Col md="6">
                      <CardBody>
                        <CardTitle>Special Title Treatment</CardTitle>
                        <CardText>With supporting text below as a natural lead-in to additional content.</CardText>
                        <Button>Go somewhere</Button>
                      </CardBody>
                    </Col>
                    <Col md="6">
                      <CardBody>
                        <CardTitle>Special Title Treatment</CardTitle>
                        <CardText>With supporting text below as a natural lead-in to additional content.</CardText>
                        <Button>Go somewhere</Button>
                      </CardBody>
                    </Col>
                  </Row>
                </TabPane>
              </TabContent>
            </Col>
          </Row>
        </Container>
      </Router>
    );
  }
}

export default TabsPage;

Classic tabs MDB Pro component

We created a fresh new, all-React version of tabs for those, who missed the classic Material Design variant of tabs.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.

import React from 'react';
import { BrowserRouter as Router } from 'react-router-dom';
import { Container, Row, Col, TabPane, TabContent, Nav, NavItem, NavLink } from 'mdbreact';
import classnames from 'classnames';

class TabsPage extends React.Component {
  constructor(props) {
    super(props);

    this.toggleClassicTabs1 = this.toggleClassicTabs1.bind(this);
    this.state = {
      activeItemClassicTabs1: '1',
    };
  }

  toggleClassicTabs1(tab) {
    if (this.state.activeItemClassicTabs1 !== tab) {
      this.setState({
        activeItemClassicTabs1: tab
      });
    }
  }


  render() {
    return (
      <Router>
        <Container className="mt-4">
          <Row>
            <Col md="12">
              <h2 className="mt-5">Classic tabs</h2>
              <Nav classicTabs color="cyan">
                <NavItem>
                  <NavLink to="#" className={classnames({ active: this.state.activeItemClassicTabs1 === '1' })} onClick={() => { this.toggleClassicTabs1('1'); }}>
                    Profile
                  </NavLink>
                </NavItem>
                <NavItem>
                  <NavLink to="#" className={classnames({ active: this.state.activeItemClassicTabs1 === '2' })} onClick={() => { this.toggleClassicTabs1('2'); }}>
                  Follow
                  </NavLink>
                </NavItem>
                <NavItem>
                  <NavLink to="#" className={classnames({ active: this.state.activeItemClassicTabs1 === '3' })} onClick={() => { this.toggleClassicTabs1('3'); }}>
                        Contact
                  </NavLink>
                </NavItem>
                <NavItem>
                  <NavLink to="#" className={classnames({ active: this.state.activeItemClassicTabs1 === '4' })} onClick={() => { this.toggleClassicTabs1('4'); }}>
                    Be Awesome
                  </NavLink>
                </NavItem>
              </Nav>
              <TabContent className="card" activeItem={this.state.activeItemClassicTabs1}>
                <TabPane tabId="1">
                  <p>Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias.</p>
                </TabPane>
                <TabPane tabId="2">
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
                </TabPane>
                <TabPane tabId="3">
                  <p>Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias.</p>
                </TabPane>
                <TabPane tabId="4">
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
                </TabPane>
              </TabContent>
            </Col>
          </Row>
        </Container>
      </Router>
    );
  }
}

export default TabsPage;

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.

import React from 'react';
import { BrowserRouter as Router } from 'react-router-dom';
import { Container, Row, Col, TabPane, TabContent, Nav, NavItem, NavLink, Fa } from 'mdbreact';
import classnames from 'classnames';

class TabsPage extends React.Component {
  constructor(props) {
    super(props);

    this.toggleClassicTabs2 = this.toggleClassicTabs2.bind(this);
    this.state = {
      activeItemClassicTabs2: '1'
    };
  }

  toggleClassicTabs2(tab) {
    if (this.state.activeItemClassicTabs2 !== tab) {
      this.setState({
        activeItemClassicTabs2: tab
      });
    }
  }

  render() {
    return (
      <Router>
        <Container className="mt-4">
          <Row>
            <Col md="12">
              <h2 className="mt-5">Classic tabs</h2>
              <Nav classicTabs color="orange" className="mt-5">
                <NavItem>
                  <NavLink to="#" className={classnames({ active: this.state.activeItemClassicTabs2 === '1' })} onClick={() => { this.toggleClassicTabs2('1'); }}>
                  <Fa icon="user" size="2x"/><br/>
                    Profile
                  </NavLink>
                </NavItem>
                <NavItem>
                  <NavLink to="#" className={classnames({ active: this.state.activeItemClassicTabs2 === '2' })} onClick={() => { this.toggleClassicTabs2('2'); }}>
                  <Fa icon="heart" size="2x"/><br/>
                  Follow
                  </NavLink>
                </NavItem>
                <NavItem>
                  <NavLink to="#" className={classnames({ active: this.state.activeItemClassicTabs2 === '3' })} onClick={() => { this.toggleClassicTabs2('3'); }}>
                  <Fa icon="envelope" size="2x"/><br/>
                        Contact
                  </NavLink>
                </NavItem>
                <NavItem>
                  <NavLink to="#" className={classnames({ active: this.state.activeItemClassicTabs2 === '4' })} onClick={() => { this.toggleClassicTabs2('4'); }}>
                  <Fa icon="star" size="2x"/><br/>
                    Be Awesome
                  </NavLink>
                </NavItem>
              </Nav>
              <TabContent className="card mb-5" activeItem={this.state.activeItemClassicTabs2}>
                <TabPane tabId="1">
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
                </TabPane>
                <TabPane tabId="2">
                  <p>Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias.</p>
                </TabPane>
                <TabPane tabId="3">
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
                </TabPane>
                <TabPane tabId="4">
                  <p>Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias.</p>
                </TabPane>
              </TabContent>
            </Col>
          </Row>
      </Container>
    </Router>
    );
  }
}

export default TabsPage;