Tabs not showing on smaller screens - react-bootstrap

Question

I am building a React-Bootstrap page and I want a 3 column layout on big screens, but on smaller screens I want to shift it to tabs showing one column at a time based on the selected tab. On larger screens I indeed get the desired results, but on the smaller screens I can only see my tabs and the content column while the other columns stay hidden.
I have tried several attempts at various className modifiers but none of them seem to work properly.
class HomePage extends Component {
render() {
return (
<Container id='homepage_container' fluid='true'>
<ul className='nav nav-tabs d-md-none' role='tablist'>
<li className='nav-item'>
<a className='nav-link active' href='#controls-col' aria-controls='controls-col' data-toggle='tab' role='tab'>Controls</a>
</li>
<li className='nav-item'>
<a className='nav-link' href='#content-col' aria-controls='content-col' data-toggle='tab' role='tab'>Content</a>
</li>
<li className='nav-item'>
<a className='nav-link' href='#related-content-col' aria-controls='related-content-col' data-toggle='tab' role='tab'>Related</a>
</li>
</ul>
<Row id='homepage_main_row' className='tab-content'>
<Col id='controls-col' className='homepage_col tab-pane active' role='tabpanel' md={3}>
<Row float='left'>
<p>This is the controls</p>
</Row>
</Col>
<Col id='content-col' className='homepage_col tab-pane' role='tabpanel' md={6}>
<Row className='justify-content-center'>
<p>This is the Content Panel</p>
</Row>
</Col>
<Col id='related-content-col' className='homepage_col tab-pane' role='tabpanel' md={3}>
<Row className='float-right'>
<p>This is the related Content Panel</p>
</Row>
</Col>
</Row>
</Container>
)
}
}
And the accompanying scss to modify based on screen size:
#media(min-width: 768px) {
.tab-content > .tab-pane {
display: block;
}
}
My expected outcome should be that the smaller screens show the tabs as full width elements based on the tab selected. Yet I still only get the tabs display showing up with the content-col, but cannot switch. When I click the other tabs I can see the href update in the url bar which indicates they are triggering, but for some reason they are not toggling the 'active' class between the tabs properly.

Answer 1

Your problem is, you are writing active for all nav-link,
<ul className='nav nav-tabs d-md-none' role='tablist'>
<li className='nav-item'>
<a className='nav-link active' href='#controls-col' aria-controls='controls-col' data-toggle='tab' role='tab'>Controls</a>
</li>
<li className='nav-item'>
<a className='nav-link active' href='#content-col' aria-controls='content-col' data-toggle='tab' role='tab'>Content</a>
</li>
<li className='nav-item'>
<a className='nav-link active' href='#related-content-col' aria-controls='related-content-col' data-toggle='tab' role='tab'>Related</a>
</li>
</ul>
For initial render you must have only 1 nav-link as active, so remove the active from other nav-link except first one like,
<ul className='nav nav-tabs d-md-none' role='tablist'>
<li className='nav-item'>
<a className='nav-link active' href='#controls-col' aria-controls='controls-col' data-toggle='tab' role='tab'>Controls</a>
</li>
<li className='nav-item'>
<a className='nav-link' href='#content-col' aria-controls='content-col' data-toggle='tab' role='tab'>Content</a>
</li>
<li className='nav-item'>
<a className='nav-link' href='#related-content-col' aria-controls='related-content-col' data-toggle='tab' role='tab'>Related</a>
</li>
</ul>