Content outside the Tab-nav panel – Bootstrap

October 31, 2022

I am trying to create a content inside a panel. Even if it is static, it appears flowing to the left in Bootstrap.
How can I enter it in the corresponding panel? I’m pretty much copying the Bootstra example.
Attached image of the visible result.
This content is generated in React, so "class" is "className". No errors in browser console.

            <div className="container">
                <div className="row">
                    <div className="col-3">
                        Izquierdo
                        <ul>
                        {listTest}
                        </ul>                    
                    </div>
                    <ul className="nav nav-tabs" id="myTab" role="tablist">
                        <li className="nav-item">
                            <a className="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Information</a>
                        </li>
                        <li className="nav-item">
                            <a className="nav-link" id="profile-tab" data-toggle="tab" href="#currentTest" role="tab" aria-controls="profile" aria-selected="false">Current test</a>
                        </li>                        
                    </ul>  
                    <div className="tab-content" id="myTabContent">
                        <div className="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">Main panel</div>
                        <div className="tab-pane fade" id="currentTest" role="tabpanel" aria-labelledby="profile-tab"><PsqMainPanel idtest={idCurrentTest} /></div>

                    </div>                    
                </div>
            </div>

>Solution :

Hope this helps

<div className="container">
    <div className="row">
        <div className="col-3">
            Izquierdo
            <ul>
                {listTest}
            </ul>                    
        </div>
        <!--Column added-->
        <div className="col-9">
            <ul className="nav nav-tabs" id="myTab">
                <li className="nav-item active">
                    <a className="nav-link" id="home-tab" data-toggle="tab" href="#home">Information</a>
                </li>
                <li className="nav-item">
                    <a className="nav-link" id="profile-tab" data-toggle="tab" href="#currentTest">Current test</a>
                </li>                        
            </ul>  
            <div className="tab-content" id="myTabContent">
                <div className="tab-pane active" id="home" role="tabpanel" aria-labelledby="home-tab">
                    Main panel
                </div>
                <div className="tab-pane" id="currentTest" role="tabpanel" aria-labelledby="profile-tab">
                    <PsqMainPanel idtest={idCurrentTest} />
                </div>

            </div>                    
        </div>
    </div>
</div>