align div right of a left nav and not below

I am using this code snippet: https://bbbootstrap.com/snippets/bootstrap-5-sidebar-menu-hover-effect-66945518 and cant figure out how to get content to go to the right of nav. I am sure its something simple I am missing with bootstrap5's changes.

<div  style="width: 250px;"> <a href="/" > <svg  width="40" height="32"> </svg> <span >BBBootstrap</span> </a>
    <hr>
    <ul >
        <li > <a href="#"  aria-current="page"> <i ></i><span >Home</span> </a> </li>
        <li> <a href="#" > <i ></i><span >Dashboard</span> </a> </li>
        <li> <a href="#" > <i ></i><span >My Orders</span> </a> </li>
        <li> <a href="#" > <i ></i><span >Settings</span> </a> </li>
        <li> <a href="#" > <i ></i><span >Bookmarks</span> </a> </li>
    </ul>
    <hr>
    <div > <a href="#"  id="dropdownUser1" data-bs-toggle="dropdown" aria-expanded="false"> <img src="https://github.com/mdo.png" alt="" width="32" height="32" > <strong> John W </strong> </a>
        <ul  aria-labelledby="dropdownUser1">
            <li><a  href="#">New project</a></li>
            <li><a  href="#">Settings</a></li>
            <li><a  href="#">Profile</a></li>
            <li>
                <hr >
            </li>
            <li><a  href="#">Sign out</a></li>
        </ul>
    </div>
</div>

CodePudding user response：

I can suggest to put on your

tags (or even , if you don't want aling the ) the bootstrap class "text-end".

You can find more about the text-alignment in bootstrap using the framework documentation!

<div  style="width: 250px;"> <a href="/" > <svg  width="40" height="32"> </svg> <span >BBBootstrap</span> </a>
    <hr>
    <ul >
        <li > <a href="#"  aria-current="page"> <i ></i><span >Home</span> </a> </li>
        <li > <a href="#" > <i ></i><span >Dashboard</span> </a> </li>
        <li> <a href="#" > <i ></i><span >My Orders</span> </a> </li>
        <li> <a href="#" > <i ></i><span >Settings</span> </a> </li>
        <li> <a href="#" > <i ></i><span >Bookmarks</span> </a> </li>
    </ul>
    <hr>
    <div > <a href="#"  id="dropdownUser1" data-bs-toggle="dropdown" aria-expanded="false"> <img src="https://github.com/mdo.png" alt="" width="32" height="32" > <strong> John W </strong> </a>
        <ul  aria-labelledby="dropdownUser1">
            <li><a  href="#">New project</a></li>
            <li><a  href="#">Settings</a></li>
            <li><a  href="#">Profile</a></li>
            <li>
                <hr >
            </li>
            <li><a  href="#">Sign out</a></li>
        </ul>
    </div>
</div>

CodePudding user response：

So if what you have is the "left nav" and you want to put content to the right, you can use the grid classes and place it inside a .container > .row > .col and then add another sibling .col to hold the content.

Or you can use flexbox, and wrap it in a div.d-flex and add a sibling .flex-grow-1 to hold the content (this will expand to fill remaining space to the right) as is the snippet below.

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<div >
  <div  style="width: 250px;">
    <a href="/" > <svg  width="40" height="32"> </svg> <span >BBBootstrap</span> </a>
    <hr>
    <ul >
      <li >
        <a href="#"  aria-current="page"> <i ></i><span >Home</span> </a>
      </li>
      <li>
        <a href="#" > <i ></i><span >Dashboard</span> </a>
      </li>
      <li>
        <a href="#" > <i ></i><span >My Orders</span> </a>
      </li>
      <li>
        <a href="#" > <i ></i><span >Settings</span> </a>
      </li>
      <li>
        <a href="#" > <i ></i><span >Bookmarks</span> </a>
      </li>
    </ul>
    <hr>
    <div >
      <a href="#"  id="dropdownUser1" data-bs-toggle="dropdown" aria-expanded="false"> <img src="https://github.com/mdo.png" alt="" width="32" height="32" > <strong> John W </strong> </a>
      <ul  aria-labelledby="dropdownUser1">
        <li><a  href="#">New project</a></li>
        <li><a  href="#">Settings</a></li>
        <li><a  href="#">Profile</a></li>
        <li>
          <hr >
        </li>
        <li><a  href="#">Sign out</a></li>
      </ul>
    </div>
  </div>
  <div >
    <div >
      <div >
        <h1>Yup</h1>
        <p>
          Stuff on the right.
        </p>
      </div>
    </div>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p" crossorigin="anonymous"></script>