Bootstrap 5.1 Navbar with 3 sections (left, center, right)

I'm having problems with getting the layout right for the navbar I'm working with.

I want the navbar to have 3 sections like described in the title, for the first section at the left there's an img and a simulating a button that needs to be in the same row no matter the width.

For the second section at center, just a h1 on top of a h2 with text-center.

And for the third one at the far right, it needs to be sectioned in a 2x3 grid, the first column there's gonna be a button that covers the 2 rows, in the second one two buttons in each row, and the third column needs to be a button with an img inside that covers the 2 rows like the first one but with more space to cover width-wise compared to the other ones (like a 25%, 25%, 50% respectively)

Here's what I have at the moment.

        <nav class="navbar navbar-expand-lg navbar-toggleable navbar-light bg-light border-bottom text-black">
            
            <ul class="navbar-nav mx-auto flex-shrink">
                <li class="nav-item active row">
                    <a class="nav-link col-auto" href="">
                        <img src="~/archivos/logo.jpg" class="rounded" width="90" height="90" />
                    </a>
                    <a class="nav-link collapse navbar-collapse btn-warning border rounded d-flex justify-content-center col-6" asp-area="" asp-controller="Home" asp-action="Index">
                        <i class="fa-solid fa-left-long text-white" style="font-size:3vw;"></i>
                    </a>

                </li>
            </ul>

            <ul class="navbar-nav mx-auto flex-shrink">
                <li class="nav-item text-center justify-content-center">
                    <div>
                        <h4 class="h1">Analysis tools</h4>
                        <small class="h2 text-warning">SPC Tool</small>
                    </div>
                </li>
            </ul>

            <ul class="navbar-nav mx-auto flex-shrink">
                <li class="nav-item">
                    <div class="row">
                        <div class="col-lg-2 col-md-2 col-sm-3 col-xs-2" style="padding:0px">
                            <div class="short-div">
                                <a class="nav-link" asp-area="" asp-controller="Home" asp-action="Logs">
                                    <div class="btn btn-success">
                                        <i class="fa-solid fa-table"></i>
                                    </div>

                                </a>
                            </div>
                            <div class="short-div">
                                <a class="nav-link" asp-area="" asp-controller="Home" asp-action="Login">
                                    <div class="btn btn-dark">
                                        <i class="fa-solid fa-key"></i>
                                    </div>

                                </a>
                            </div>
                        </div>
                        <div class="col-lg-5 col-md-2 col-sm-3 col-xs-2">
                            <a class="navbar-link" href="">
                                <img class="w-100 h-100" src="~/Archivos/pren.png" />
                            </a>
                        </div>
                    </div>
                    
                </li>
            </ul>
            
            
        </nav>

And here's the layout that I'm aiming for. The expected layout

I'm kind of new with asking at the forum so i apologize if I'm ignoring any redacting/formatting rules.

I tried many examples around my searches (the one that I'm using right now for testing comes from a forum), and the ones that bootstrap has in their documentation but can't get it just right, sometimes the navbar leans to the left without me modifying the margin or padding.

And I've tried the solutions from the forums in SO but the size and behavior of the elements inside the navbar items that I require to fit into the navbar layout seems to hold them together incorrectly.

EDIT: Here's the codepen https://codepen.io/Daniel_ISC/pen/ExzQvyK

Solution

Some of your classes (e.g. navbar-toggleable & navbar-light) don’t seem to be valid Bootstrap classes, so I removed them.

Normally, a ul with a navbar-nav class is used for list of links, not for the logo and your center text, and since your group of four buttons appear to be some kind of action, rather than links, you probably don’t need a ul structure.

Bootstrap columns are best used with a container div and not as part of a navbar. The navbar has its own set of styles that make the row/column structure more complicated.

The easiest way to structure your four buttons might be to use a CSS grid (see my example).

Your example did not include a mobile version, but since you used the `navbar-expand-lg’ class for the navbar, I added in a navbar-toggler button so you can see how your navbar might look on a smaller screen.

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" />

<style>
.navbar-brand {
  margin-right: 0;
  flex-basis: 480px;
  /* same as the button group so the center text is centered */
}

.grid-container {
  display: grid;
  grid-gap: 10px;
  grid-template-rows: 42px 42px;
  grid-template-columns: 92px 92px 276px;
}

.btn-storage {
  grid-row: 1 / 3;
  grid-column: 1 / 2;
  background: linear-gradient(0deg, rgba(255, 191, 2, 1) 0%, rgba(255, 228, 36, 1) 84%, rgba(255, 255, 60, 1) 100%);
  border-color: #fbe633;
}

.btn-table {
  grid-row: 1 / 2;
  grid-column: 2 / 3;
  background-color: #198754;
  border-color: #177a4c;
}

.btn-table svg {
  width: 18px;
  height: 28px;
  fill: white;
}

.btn-key {
  grid-row: 2 / 3;
  grid-column: 2 / 3;
  background-color: #212529;
  border-color: #171a1c;
}

.btn-key svg {
  width: 18px;
  height: 18px;
  fill: white;
}

.btn-logo {
  grid-row: 1 / 3;
  grid-column: 3 / 4;
  color: transparent;
  background-image: url('https://fakeimg.pl/300x80/d69f18/fff?text=Product+Engineering');
  background-size: contain;
  /*or cover */
  background-color: #d69f18;
  border-color: #c99517;
}

</style>

<nav class="navbar navbar-expand-lg bg-light border-bottom text-black">
  <div class="container-fluid">
    <a class="navbar-brand d-inline-flex align-items-center" href="#">
      <img src="https://www.onlygfx.com/wp-content/uploads/2015/12/circle-logo-template.jpg" alt="Logo" width="90" height="90" class="d-inline-block align-text-top rounded-circle">
      <!-- Font Awesome https://fontawesome.com/icons/left-long?f=classic&s=solid -->
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="128px" height="128px">
                <!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
                <path d="M177.5 414c-8.8 3.8-19 2-26-4.6l-144-136C2.7 268.9 0 262.6 0 256s2.7-12.9 7.5-17.4l144-136c7-6.6 17.2-8.4 26-4.6s14.5 12.5 14.5 22l0 72 288 0c17.7 0 32 14.3 32 32l0 64c0 17.7-14.3 32-32 32l-288 0 0 72c0 9.6-5.7 18.2-14.5 22z" /></svg>
    </a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggler" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
    <div class="d-none d-lg-block text-center">
      <h4 class="h1">Analysis tools</h4>
      <small class="h2 text-warning">SPC Tool</small>
    </div>

    <div class="collapse navbar-collapse flex-grow-0" id="navbarToggler">
      <div class="navbar-nav ms-auto mb-2 mb-md-0">
        <div class="grid-container">
          <button type="button" class="btn btn-primary btn-storage">
                        <!-- Font Awesome https://fontawesome.com/icons/database?f=classic&s=solid -->
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
                            <!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
                            <path d="M448 80v48c0 44.2-100.3 80-224 80S0 172.2 0 128V80C0 35.8 100.3 0 224 0S448 35.8 448 80zM393.2 214.7c20.8-7.4 39.9-16.9 54.8-28.6V288c0 44.2-100.3 80-224 80S0 332.2 0 288V186.1c14.9 11.8 34 21.2 54.8 28.6C99.7 230.7 159.5 240 224 240s124.3-9.3 169.2-25.3zM0 346.1c14.9 11.8 34 21.2 54.8 28.6C99.7 390.7 159.5 400 224 400s124.3-9.3 169.2-25.3c20.8-7.4 39.9-16.9 54.8-28.6V432c0 44.2-100.3 80-224 80S0 476.2 0 432V346.1z" /></svg>
                    </button>
          <button type="button" class="btn btn-primary btn-table">
                        <!-- Font Awesome https://fontawesome.com/icons/table?f=classic&s=solid -->
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                            <!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
                            <path d="M64 256V160H224v96H64zm0 64H224v96H64V320zm224 96V320H448v96H288zM448 256H288V160H448v96zM64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64z" /></svg>
                    </button>
          <button type="button" class="btn btn-primary btn-key">
                        <!-- Font Awesome https://fontawesome.com/icons/key?f=classic&s=solid -->
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                            <!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
                            <path d="M336 352c97.2 0 176-78.8 176-176S433.2 0 336 0S160 78.8 160 176c0 18.7 2.9 36.8 8.3 53.7L7 391c-4.5 4.5-7 10.6-7 17v80c0 13.3 10.7 24 24 24h80c13.3 0 24-10.7 24-24V448h40c13.3 0 24-10.7 24-24V384h40c6.4 0 12.5-2.5 17-7l33.3-33.3c16.9 5.4 35 8.3 53.7 8.3zM376 96a40 40 0 1 1 0 80 40 40 0 1 1 0-80z" /></svg>
                    </button>
          <button type="button" class="btn btn-primary btn-logo">Primary</button>
        </div>
      </div>
    </div>
  </div>

</nav>
<h1>Hello, world!</h1>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

Your example was setup to use Bootstrap 5.1.3, which was released in October of 2021 and replaced with Bootstrap 5.2.0 in July of 2022 (two years ago). I used Bootstrap 5.3.3 for my example as that’s the current version.

One other note – it’s best to use Bootstrap’s code snippet function rather than linking to a codepen page as sometimes external code examples disappear.