html - Bootstrap: Navbar: How can I justify-content-end a collapsible menu?

In Bootstrap, in a Navbar, how can I justify-content-end the content of a collapsible menu?

In the minimum working example below, the line:

<div class="collapse navbar-collapse text-end" data-bs-parent="#navbarParent" id="navbarAuth">

contains text-end which capably right justifies everything, but I'm attempting to left justify everything, but push everything as far right as possible while remaining left justified.

justify-content-end and ms-auto do not work because they require d-flex, which prevents the object from collapsing.

<!DOCTYPE html>

<html lang="en" data-bs-theme="dark">

    <head>

        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1, width=device-width">

        <link href="/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
        <script src="/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>

    </head>

    <body>

    <body>

        <nav class="navbar bg-body-tertiary">
            <div class="container-fluid" id="navbarParent">

                <button class="navbar-toggler d-flex align-items-center justify-content-center" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                        <span class="navbar-toggler-icon"></span>
                        <img  class="d-inline-block align-text-center mx-1" width="24" height="24" src="{{ url_for('static', filename='brand.png') }}" alt="Logo" >
                        <span class="navbar-brand">brand</span>
                </button>

                <button class="navbar-toggler align-items-center justify-content-center" type="button" data-bs-toggle="collapse" data-bs-target="#navbarAuth">
                        [email protected]
                </button>

                <div class="collapse navbar-collapse" data-bs-parent="#navbarParent" id="navbarNav">
                    <ul class="navbar-nav navbar-nav-scroll my-2 my-lg-2" style="--bs-scroll-height: 60vh;">
                        <li class="nav-item"><a class="nav-link" href="/elec/list"    >List</a></li>
                        <li class="nav-item"><a class="nav-link" href="/elec/create"  >Create</a></li>
                        <li class="nav-item"><a class="nav-link" href="/elec/join"    >Join</a></li>
                    </ul>
                </div>

                <div class="collapse navbar-collapse text-end" data-bs-parent="#navbarParent" id="navbarAuth">
                    <ul class="navbar-nav navbar-nav-scroll my-2 my-lg-2" style="--bs-scroll-height: 60vh;">
                        <li class="nav-item"><a class="nav-link" href="/auth/account" >Account</a></li>
                        <li class="nav-item"><a class="nav-link" href="/auth/logout"  >Logout</a></li>
                        <li class="nav-item"><a class="nav-link" href="/about"        >About</a></li>
                    </ul>
                </div>

            </div>

        </nav>

    </body>

</html>

In Bootstrap, in a Navbar, how can I justify-content-end the content of a collapsible menu?

In the minimum working example below, the line:

<div class="collapse navbar-collapse text-end" data-bs-parent="#navbarParent" id="navbarAuth">

contains text-end which capably right justifies everything, but I'm attempting to left justify everything, but push everything as far right as possible while remaining left justified.

justify-content-end and ms-auto do not work because they require d-flex, which prevents the object from collapsing.

<!DOCTYPE html>

<html lang="en" data-bs-theme="dark">

    <head>

        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1, width=device-width">

        <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>

    </head>

    <body>

    <body>

        <nav class="navbar bg-body-tertiary">
            <div class="container-fluid" id="navbarParent">

                <button class="navbar-toggler d-flex align-items-center justify-content-center" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                        <span class="navbar-toggler-icon"></span>
                        <img  class="d-inline-block align-text-center mx-1" width="24" height="24" src="{{ url_for('static', filename='brand.png') }}" alt="Logo" >
                        <span class="navbar-brand">brand</span>
                </button>

                <button class="navbar-toggler align-items-center justify-content-center" type="button" data-bs-toggle="collapse" data-bs-target="#navbarAuth">
                        [email protected]
                </button>

                <div class="collapse navbar-collapse" data-bs-parent="#navbarParent" id="navbarNav">
                    <ul class="navbar-nav navbar-nav-scroll my-2 my-lg-2" style="--bs-scroll-height: 60vh;">
                        <li class="nav-item"><a class="nav-link" href="/elec/list"    >List</a></li>
                        <li class="nav-item"><a class="nav-link" href="/elec/create"  >Create</a></li>
                        <li class="nav-item"><a class="nav-link" href="/elec/join"    >Join</a></li>
                    </ul>
                </div>

                <div class="collapse navbar-collapse text-end" data-bs-parent="#navbarParent" id="navbarAuth">
                    <ul class="navbar-nav navbar-nav-scroll my-2 my-lg-2" style="--bs-scroll-height: 60vh;">
                        <li class="nav-item"><a class="nav-link" href="/auth/account" >Account</a></li>
                        <li class="nav-item"><a class="nav-link" href="/auth/logout"  >Logout</a></li>
                        <li class="nav-item"><a class="nav-link" href="/about"        >About</a></li>
                    </ul>
                </div>

            </div>

        </nav>

    </body>

</html>

Share Improve this question edited 2 days ago asked Feb 7 at 22:20 kando 6051 gold badge7 silver badges19 bronze badges

Can you draw some kind of diagram to show us exactly what you want to achieve? From your description it is not quite clear what the layout should look like. – Kostas Minaidis Commented Feb 7 at 23:48
** push everything as far right as possible while remaining left justified, rather than right justify everything. I had a typo – kando Commented 2 days ago

Add a comment |

2 Answers 2

Sorted by: Reset to default 1

Not sure whether the result will be exactly what you are looking for, but one way of achieving something like you describe, is to apply text-align: left and display: inline-block to the <ul> element, using the appropriate BS5 classes like this:

<ul class="navbar-nav navbar-nav-scroll my-2 my-lg-2 text-start d-inline-block" style="--bs-scroll-height: 60vh;">

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>

<html lang="en" data-bs-theme="dark">

    <head>

        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1, width=device-width">

        <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>

    </head>

    <body>

    <body>

        <nav class="navbar bg-body-tertiary">
            <div class="container-fluid" id="navbarParent">

                <button class="navbar-toggler d-flex align-items-center justify-content-center" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                        <span class="navbar-toggler-icon"></span>
                        <img  class="d-inline-block align-text-center mx-1" width="24" height="24" src="{{ url_for('static', filename='brand.png') }}" alt="Logo" >
                        <span class="navbar-brand">brand</span>
                </button>

                <button class="navbar-toggler align-items-center justify-content-center" type="button" data-bs-toggle="collapse" data-bs-target="#navbarAuth">
                        [email protected]
                </button>

                <div class="collapse navbar-collapse" data-bs-parent="#navbarParent" id="navbarNav">
                    <ul class="navbar-nav navbar-nav-scroll my-2 my-lg-2" style="--bs-scroll-height: 60vh;">
                        <li class="nav-item"><a class="nav-link" href="/elec/list"    >List</a></li>
                        <li class="nav-item"><a class="nav-link" href="/elec/create"  >Create</a></li>
                        <li class="nav-item"><a class="nav-link" href="/elec/join"    >Join</a></li>
                    </ul>
                </div>

                <div class="collapse navbar-collapse text-end" data-bs-parent="#navbarParent" id="navbarAuth">
                    <ul class="navbar-nav navbar-nav-scroll my-2 my-lg-2 text-start d-inline-block" style="--bs-scroll-height: 60vh;">
                        <li class="nav-item"><a class="nav-link" href="/auth/account" >Account</a></li>
                        <li class="nav-item"><a class="nav-link" href="/auth/logout"  >Logout</a></li>
                        <li class="nav-item"><a class="nav-link" href="/about"        >About</a></li>
                    </ul>
                </div>

            </div>

        </nav>

    </body>

</html>

Try changing this:

<div class="collapse navbar-collapse text-end" data-bs-parent="#navbarParent" id="navbarAuth">

To this:

<div class="collapse navbar-collapse w-100" data-bs-parent="#navbarParent" id="navbarAuth">

Hope it helps!

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

html - Bootstrap: Navbar: How can I justify-content-end a collapsible menu? - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)