Position the div to the right of a left navigation bar instead of beneath it using Bootstrap 5

After using the code snippet from , I'm struggling to align content to the right of the navigation bar. It seems like a simple issue related to changes in Bootstrap 5 that I can't seem to figure out.

<div class="d-flex flex-column vh-100 flex-shrink-0 p-3 text-white bg-dark" style="width: 250px;"> <a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-white text-decoration-none"> <svg class="bi me-2" width="40" height="32"> </svg> <span class="fs-4">BBBootstrap</span> </a>
    <hr>
    <ul class="nav nav-pills flex-column mb-auto">
        <li class="nav-item"> <a href="#" class="nav-link active" aria-current="page"> <i class="fa fa-home"></i><span class="ms-2">Home</span> </a> </li>
        <li> <a href="#" class="nav-link text-white"> <i class="fa fa-dashboard"></i><span class="ms-2">Dashboard</span> </a> </li>
        <li> <a href="#" class="nav-link text-white"> <i class="fa fa-first-order"></i><span class="ms-2">My Orders</span> </a> </li>
        <li> <a href="#" class="nav-link text-white"> <i class="fa fa-cog"></i><span class="ms-2">Settings</span> </a> </li>
        <li> <a href="#" class="nav-link text-white"> <i class="fa fa-bookmark"></i><span class="ms-2">Bookmarks</span> </a> </li>
    </ul>
    <hr>
    <div class="dropdown"> <a href="#" class="d-flex align-items-center text-white text-decoration-none dropdown-toggle" id="dropdownUser1" data-bs-toggle="dropdown" aria-expanded="false"> <img src="https://github.com/mdo.png" alt="" width="32" height="32" class="rounded-circle me-2"> <strong> John W </strong> </a>
        <ul class="dropdown-menu dropdown-menu-dark text-small shadow" aria-labelledby="dropdownUser1">
            <li><a class="dropdown-item" href="#">New project</a></li>
            <li><a class="dropdown-item" href="#">Settings</a></li>
            <li><a class="dropdown-item" href="#">Profile</a></li>
            <li>
                <hr class="dropdown-divider">
            </li>
            <li><a class="dropdown-item" href="#">Sign out</a></li>
        </ul>
    </div>
</div>

Answer №1

To align content to the right of a "left nav," you have two options. One is to use Bootstrap's grid classes within a container, row, and columns structure. The other option is to utilize flexbox by wrapping it inside a div with class "d-flex" and adding a sibling with class "flex-grow-1" to occupy the remaining space to the right as shown below.

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="debcb1b1aaadaaacbfae9eebf0eff0ed">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<div class="d-flex">
  <div class="d-flex flex-column vh-100 flex-shrink-0 p-3 text-white bg-dark" style="width: 250px;">
    <a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-white text-decoration-none"> <svg class="bi me-2" width="40" height="32"> </svg> <span class="fs-4">BBBootstrap</span> </a>
    <hr>
    <ul class="nav nav-pills flex-column mb-auto">
      <li class="nav-item">
        <a href="#" class="nav-link active" aria-current="page"> <i class="fa fa-home"></i><span class="ms-2">Home</span> </a>
      </li>
      <li>
        <a href="#" class="nav-link text-white"> <i class="fa fa-dashboard"></i><span class="ms-2">Dashboard</span> </a>
      </li>
      <li>
        <a href="#" class="nav-link text-white"> <i class="fa fa-first-order"></i><span class="ms-2">My Orders</span> </a>
      </li>
      <li>
        <a href="#" class="nav-link text-white"> <i class="fa fa-cog"></i><span class="ms-2">Settings</span> </a>
      </li>
      <li>
        <a href="#" class="nav-link text-white"> <i class="fa fa-bookmark"></i><span class="ms-2">Bookmarks</span> </a>
      </li>
    </ul>
    <hr>
    <div class="dropdown">
      <a href="#" class="d-flex align-items-center text-white text-decoration-none dropdown-toggle" id="dropdownUser1" data-bs-toggle="dropdown" aria-expanded="false"> <img src="https://github.com/mdo.png" alt="" width="32" height="32" class="rounded-circle me-2"> <strong> John W </strong> </a>
      <ul class="dropdown-menu dropdown-menu-dark text-small shadow" aria-labelledby="dropdownUser1">
        <li><a class="dropdown-item" href="#">New project</a></li>
        <li><a class="dropdown-item" href="#">Settings</a></li>
        <li><a class="dropdown-item" href="#">Profile</a></li>
        <li>
          <hr class="dropdown-divider">
        </li>
        <li><a class="dropdown-item" href="#">Sign out</a></li>
      </ul>
    </div>
  </div>
  <div class="flex-grow-1 p-5">
    <div class="row">
      <div class="col">
        <h1>Yup</h1>
        <p>
          Stuff on the right.
        </p>
      </div>
    </div>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9dfff2f2e9eee9effceddda8b3acb3ae">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

Answer №2

If you're looking to align your

  • tags with Bootstrap, you can use the class "text-end".

    To learn more about text alignment in Bootstrap, check out the framework documentation here!

    <div class="d-flex flex-column vh-100 flex-shrink-0 p-3 text-white bg-dark" style="width: 250px;"> <a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-white text-decoration-none"> <svg class="bi me-2" width="40" height="32"> </svg> <span class="fs-4">BBBootstrap</span> </a>
        <hr>
        <ul class="nav nav-pills flex-column mb-auto">
            <li class="nav-item text-end"> <a href="#" class="nav-link active" aria-current="page"> <i class="fa fa-home"></i><span class="ms-2">Home</span> </a> </li>
            <li class="text-end"> <a href="#" class="nav-link text-white"> <i class="fa fa-dashboard"></i><span class="ms-2">Dashboard</span> </a> </li>
            <li> <a href="#" class="nav-link text-white"> <i class="fa fa-first-order"></i><span class="ms-2">My Orders</span> </a> </li>
            <li> <a href="#" class="nav-link text-white"> <i class="fa fa-cog"></i><span class="ms-2">Settings</span> </a> </li>
            <li> <a href="#" class="nav-link text-white"> <i class="fa fa-bookmark"></i><span class="ms-2">Bookmarks</span> </a> </li>
        </ul>
        <hr>
        <div class="dropdown"> <a href="#" class="d-flex align-items-center text-white text-decoration-none dropdown-toggle" id="dropdownUser1" data-bs-toggle="dropdown" aria-expanded="false"> <img src="https://github.com/mdo.png" alt="" width="32" height="32" class="rounded-circle me-2"> <strong> John W </strong> </a>
            <ul class="dropdown-menu dropdown-menu-dark text-small shadow" aria-labelledby="dropdownUser1">
                <li><a class="dropdown-item" href="#">New project</a></li>
                <li><a class="dropdown-item" href="#">Settings</a></li>
                <li><a class="dropdown-item" href="#">Profile</a></li>
                <li>
                    <hr class="dropdown-divider">
                </li>
                <li><a class="dropdown-item" href="#">Sign out</a></li>
            </ul>
        </div>
    

  • Similar questions

    If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

    Keep table header stationary while accommodating varying column widths

    I have come across various solutions for freezing a table header row, such as creating a separate table containing only the header and hiding the header of the main table. However, these solutions are limited to cases where column widths are predetermine ...

    Flipped the dimensions of an image for better responsiveness

    Trying to implement this particular design on a responsive website. Wondering if there's a way to establish an inverse resizing technique using jQuery / Javascript so that as the viewport shrinks, the text size increases. Attempted to use jQuery to a ...

    The alert feature does not seem to be functioning properly when displaying error messages

    // Issue: Alert is not working on error message. I intend to only display up to four issues, after that it should not work. success: function(msg, String, jqXHR) { window.location = 'home.html'; $("#result").html(msg, String, jqX ...

    Are there any libraries available to simplify HTML development in C#, .NET, or ASP.NET?

    I have a vivid memory of stumbling upon a project where an individual utilized json-like strings to generate high-quality HTML in a certain programming language. Is there a similar tool available for use with C# or .NET? radio-box{ AName, [First|Second| ...

    Arranging several lists in a row without any specific order

    I am trying to arrange multiple <ul> elements on the same line to create a shop-like display for products. Currently, I have set up several unordered list tags: ul { display: inline; } li { list-style: none; } <ul> <li>& ...

    Scrolling on an iPhone's Div

    When I tried to access a website () using my iPhone and other gadgets, I encountered an issue with scrolling through the content. Clicking on the "Insight" link at the top-left corner led me to another page. On a computer, I had no trouble scrolling smoo ...

    What is the best practice for incorporating CSS and JavaScript files into a PHP template?

    I've created a basic template for my PHP website, but I'm struggling to find the best way to include my CSS and JavaScript files. Take a look at my index.php file below: <?php include'core/template.php'; $temp=new Template(); $sett ...

    What is the process of extracting attribute values from child elements in XPath for HTML documents?

    Initially, I searched for all the necessary elements, but now I am encountering errors while trying to retrieve attribute values from the child elements - title, URL, and image. What could be the mistake in my approach? function getContent($value) { ...

    Adapting software for use with Panasonic Viera

    We are in the process of transferring our current HTML/JavaScript/CSS application to the Panasonic platform. Our current setup involves using JavaScript for generating HTML and CSS for styling the application. The programming language used in the Panasoni ...

    The Nodejs express static directory is failing to serve certain files

    Hello everyone, I'm currently working on a project using NodeJs, Express, and AngularJS. I've encountered an issue where my page is unable to locate certain JavaScript and CSS files in the public static folder, resulting in a 404 error. Strangely ...

    How can I achieve transparency for an element while it is nested within multiple parent

    Is there a clever method to achieve transparency for an element that allows the background of its parent element to shine through and display the body background, for example? Consider this scenario: <body style="background: url(space.jpg)"> <di ...

    Utilizing Python's Requests Library to Submit a Form without Specifying Input Names

    My task is to perform a POST request using the Python Request module. However, I am facing an issue where the input I need to work with only has an id attribute and no name attribute. Most of the examples I have come across involve using the name attribute ...

    Stop child elements from spilling out of the parent container without using fixed height measurements

    I am in the process of creating an angular component with a header, buttons, a table, more buttons, and a footer. However, I am facing some challenges with the layout. <my-component> <div>Header Section</div> <some-stuff class=&quo ...

    Is there a way to program custom key assignments for my calculator using JavaScript?

    As a beginner in the world of coding and JavaScript, I decided to challenge myself by creating a calculator. It's been going smoothly up until this point: My inquiry is centered around incorporating keys into my calculator functionality. Currently, th ...

    compress a website to display advertisement

    Here is a JSFiddle link I would like to share with you: I am currently working on squeezing the webpage to display an ad on the right side. http://jsfiddle.net/5o6ghf9d/1/ It works well on desktop browsers, but I am facing issues with iPad Safari/Chrome ...

    The NextJS Link component does not seem to be receiving the styles from Tailwindcss

    I am currently working on a nextjs frontend project that has tailwindcss integrated. Below is an example of the code I am using: import Link from 'next/link' return( <div> <Link className="text-sm hover:text-gray-600" ...

    What is the functionality of CSS radio tabs?

    Can anyone provide a breakdown of how the final section of this code operates? Specifically: [type=radio]:checked { } [type=radio]:checked ~ .content { z-index: 1; } I am brand new to CSS and wanted to experiment with creating interactive CSS tabs, whi ...

    Navigation bar experiencing resizing problem, refreshing resolves the issue

    I've been struggling with this problem all day. I'm attempting to create a header that consists of a logo on the left and a list on the right. I want it to resize along with the navigation below the logo. I WAS ABLE TO ACHIEVE THIS but when ...

    How can I apply a blurred effect to the background image of a jumbotron in Bootstrap-vue without affecting the clarity of the text overlay

    I need help figuring out how to blur the background image of my jumbotron without blurring the text on top. <b-container fluid class="text-center"> <div> <b-jumbotron class="jumbotron"> <p style=& ...

    Trouble accessing webpage on Apple devices

    I recently created a website using Django and Bootstrap 5. Everything seems to be working perfectly as intended, except for when it is viewed on older iPhone models such as 6 or 7. The gifs and pictures that are dynamically fetched from the DjangoDB do not ...