Bootstrap 5 Navbar

[tobi.wld]

Moin,
ich würde gerne eine Navbar mit Bootstrap5 gestalten. Das Logo soll ganz links sein und der Rest der Navbar mittig zentriert.

Mein jetziger Code:

<div id="navbar" class="p-3 d-flex flex-row justify-content-center bg-dark text-white">
    <div id="navbar-logo">
        <a href="#Startseite"><img class="w-50" src="assets/img/favicon.svg"></a>
    </div>
    <div id="navbar-home" class="ps-3 pe-1 d-flex flex-row justify-content-center align-items-center">
        <i class="fa-solid fa-house"></i>
        <a class="ps-2 text-white text-underline-hover" href="#Startseite">Startseite</a>
    </div>
    <div id="navbar-contact" class="ps-3 pe-1 d-flex flex-row justify-content-center align-items-center">
        <i class="fa-solid fa-address-book"></i>
        <a class="ps-2 text-white text-underline-hover" href="#Kontakt">Kontakt</a>
    </div>
    <div id="navbar-gallery" class="ps-3 pe-1 d-flex flex-row justify-content-center align-items-center">
        <i class="fa-solid fa-image"></i>
        <a class="ps-2 text-white text-underline-hover" href="#Galerie">Galerie</a>
    </div>
    <div id="navbar-about" class="ps-3 pe-1 d-flex flex-row justify-content-center align-items-center">
        <i class="fa-solid fa-user"></i>
        <a class="ps-2 text-white text-underline-hover" href="#Über-mich">Über mich</a>
    </div>
</div>

So sieht es aus:

Dort soll das T-Logo ganz links sein. Der Rest soll so bleiben.

 

[Raijin]

Bei Bootstrap 3 zumindest gibt es die class "navbar-left", in die ich mein Logo gesetzt habe und das ist ganz links. Ansonsten evtl. auch mal "pull-left" ausprobieren.

Simples Beispiel: http://jsfiddle.net/gae804d9/

 

[kim88]

Nutze doch wie in der Dokumentation angegeben die Klasse navbar-brand für das Logo, dann ist es genau so wie du möchtest.

Code und Beispiel gibt es hier: https://getbootstrap.com/docs/5.1/components/navbar/#supported-content

Wenn das Menü mittig sein soll, dann musst du im oben erwähnten Beispiel beim <ul element mit der Klasse "navbar-nav" das "me-auto" durch ein "mx-auto" ersetzen: Mehr dazu gibt es in den Spacing Doku: https://getbootstrap.com/docs/5.1/utilities/spacing/