CODEWITHSUNDEEP
reactjsbootstrap-4react-bootstrap
Jey-Es
Jey-Es

Reputation: 53

Sidebar using Bootstrap is incorrectly rendered

need your help. How do I render a sidebar using Bootstrap that looks like this? Expected sidebar

Currently, my sidebar looks like this Actual Sidebar

Below is the code that I used:

<div style={{width:'250px'}} className="d-flex flex-column">
    <Tab.Container activeKey={activeKey} onSelect={setActiveKey}>
    <Nav.Item variant="tabs" className="justify-content-center">
        <Nav.Link eventKey={CONVERSATIONS_KEY}>Conversations</Nav.Link>
    </Nav.Item>
    <Nav.Item>
        <Nav.Link eventKey={CONTACTS_KEY}>Contacts</Nav.Link>
    </Nav.Item>
    <Tab.Content className='border-right overflow-auto flex-grow-1'>
        <Tab.Pane eventKey={CONVERSATIONS_KEY}>
            <Conversations />
        </Tab.Pane>
        <Tab.Pane eventKey={CONTACTS_KEY}>
            <Contacts />
        </Tab.Pane>
    </Tab.Content>
    <div className='p-2 border-top border-right small'>
        Your ID: <span className='text-muted'>{id}</span>
    </div>
    </Tab.Container>
</div>

Upvotes: 1

Views: 168

Answers (1)

daniel3380
daniel3380

Reputation: 160

I think it should work

import React, { useState } from 'react';
import Tab from 'react-bootstrap/Tab';
import Tabs from 'react-bootstrap/Tabs';

// I use Sonnet component and I think It might be helpful
import Sonnet from '../../components/Sonnet';

function ControlledTabsExample() {
  const [key, setKey] = useState('home');

  return (
    <Tabs
      id="controlled-tab-example"
      activeKey={key}
      onSelect={(k) => setKey(k)}
      className="mb-3"
    >
      <Tab eventKey="home" title="Home">
        <Sonnet />
      </Tab>
      <Tab eventKey="profile" title="Profile">
        <Sonnet />
      </Tab>
    
    </Tabs>
  );
}

export default ControlledTabsExample;

and finally you can see result image, and you can use this link also Image 1, image 2

and this link.

Upvotes: 4

Related Questions