CODEWITHSUNDEEP
twitter-bootstrapreactjs
Uday Kumar
Uday Kumar

Reputation: 131

Bootstrap React tabs are not showing title/Tab name, what is the issue?

import React, {Component} from 'react';
import {connect} from 'react-redux';
import {Tab, Tabs, TabList, TabPanel} from 'react-bootstrap-tabs';

const tabsInstance = (
  <Tabs defaultActiveKey={2} id="uncontrolled-tab-example" bsStyle="pils">
    <Tab eventKey={1} title="Tab 1" >
    Tab 1 content
    </Tab>

    <Tab eventKey={2} title="Tab 2">
    Tab 2 content
    </Tab>

    <Tab eventKey={3} title="Tab 3">Tab 3 content</Tab>
  </Tabs>
);

class ProfileTab extends Component {
  constructor(props){
    super(props);

  }
  render(){
    return (
      <section>
         <div className="container-fluid profile_section_container">
            {tabsInstance}
        </div>
      </section>
    );
  }

}

export default ProfileTab;

The tab title is not showing tabs are working fine and clickable but not showing

Bootstrap React tabs are not showing title/Tab name, what is the issue ?

enter image description here

Upvotes: 1

Views: 1657

Answers (3)

Salman Aziz
Salman Aziz

Reputation: 466

As Danny mentioned above using label it will visible.
here is another example.

`<Tabs
                id="portfolio-main-tab"
                activeKey={key}
                onSelect={(k) => setKey(k)}
                className="nav nav-tabs"
            >
                <Tab eventKey="home" title="Home" label="Home">
                    <div>Tab 1</div>
                </Tab>
                <Tab eventKey="profile" title="Profile" label="Profile">
                    <div>Profile</div>
                </Tab>
            </Tabs>`

Upvotes: 0

Danny Jim P. Allado
Danny Jim P. Allado

Reputation: 29

Use label instead.

<Tab eventKey={1} title="Tab 1" label="Tab 1">
Tab 1 content
</Tab>

<Tab eventKey={2} title="Tab 2" Label="Tab 2">
Tab 2 content
</Tab>

<Tab eventKey={3} title="Tab 3" Label="Tab 3">Tab 3 content</Tab>

);

Upvotes: 2

David Good
David Good

Reputation: 576

Make sure you're not putting any custom components in the hierarchy between Tabs and it's Tab children. React Bootstrap is looking for "title" on the direct descendants of Tabs.

Doesn't work:

<Tabs>
    <CustomComponent>
      <Tab title="Your Title">...</Tab>
    </CustomComponent>
</Tab>

Works:

<Tabs>
    <Tab title="Your Title">...</Tab>
</Tab>

See response here: https://github.com/react-bootstrap/react-bootstrap/issues/2246#issuecomment-251266675

Upvotes: 1

Related Questions