Div in div in a tab-CodePudding

I want to use a nav bar in my page. But when I put some div in the div tab content I want them to be side by side, but they put themself below. Exemple I want them to be like this " TEST TEST TEST " Instead they are like this "
TEST
TEST
TEST "

Where is my fault ?

<div >
  <div >
    <div >
      <div >
        <div >
          <h2 style="text-align: center;">Réservations</h2>
        </div>
      </div>
      <div  style="text-align: center;"></div>
      <div  style="text-align: center;">
        <ul  style="text-align: center;">
          <li ><a  data-toggle="pill" href="#resPas">Réservations passées</a></li>
          <li ><a  data-toggle="pill" href="#resAct">Réservations actives</a></li>
        </ul>
      </div>
      <div  style="text-align: center;"></div>
      <div >
        <div >
          <div id="resPas" >
            <div >Test</div>
            <div >Test</div>
            <div >Test</div>
          </div>
        </div>
      </div>
    </div>
  </div>

Thank you for the help guys !

CodePudding user response：

Set the following style in your CSS file:

.col-md-4 { display: inline-block;}

div#resPas { display: flex; }

You can add margins or padding to the tabs to address spacing.

CodePudding user response：

<style>
.table-side{
display:flex;
flex-direction:row;
justify-content:space-around;

}
</style>
<div >
  <div >
    <div >
      <div >
        <div >
          <h2 style="text-align: center;">Réservations</h2>
        </div>
      </div>
      <div  style="text-align: center;"></div>
      <div  style="text-align: center;">
        <ul  style="text-align: center;">
          <li ><a  data-toggle="pill" href="#resPas">Réservations passées</a></li>
          <li ><a  data-toggle="pill" href="#resAct">Réservations actives</a></li>
        </ul>
      </div>
      <div  style="text-align: center;"></div>
      <div >
        <div >
          <div id="resPas" >
            <div >Test</div>
            <div >Test</div>
            <div >Test</div>
          </div>
        </div>
      </div>
    </div>
  </div>

I created a seperate class table-side and add some flex properties which made div to come side by side