Bootstrap 5 Navbar center logo left text

Question

I am trying to get my navigation bar to have a the toggler button on the left with the brand logo in the middle as similar to the image below

I am unsure how to go about doing this. My current code has button on the far left with the logo at the far right.

CODE

<!DOCTYPE html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" />
  <title>Hello, world!</title>
</head>

<body>
  <nav class="navbar navbar-light bg-warning">
    <div class="container-fluid">
      <button class="navbar-toggler">
                <span class="navbar-toggler-icon"></span>
                </button>
      <a class="navbar-brand" href="#">
        <img src="https://getbootstrap.com/docs/5.0/assets/brand/bootstrap-logo.svg" alt="" width="130" height="47" />
      </a>
    </div>
  </nav>
  <!-- Optional JavaScript; choose one of the two! -->
  <!-- Option 1: Bootstrap Bundle with Popper -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
  <!-- Option 2: Separate Popper and Bootstrap JS -->
  <!--
             <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
             <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
             -->
</body>

</html>

louie kim · Answer 1 · 2022-04-14T01:57:41.630

Put a position relative class to the container holding the navbar button and the logo. After that, add position absolute to the navbar button and just add "m-auto" to the nav-bar-brand container.

<!DOCTYPE html>
<html lang="en">
   <head>
      <!-- Required meta tags -->
      <meta charset="utf-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1" />
      <!-- Bootstrap CSS -->
      <link
         href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
         rel="stylesheet"
         integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
         crossorigin="anonymous"
         />
      <title>Hello, world!</title>
   </head>
   <body>
      <nav class="navbar navbar-light bg-warning position-relative">
         <div class="container-fluid">
            <button class="navbar-toggler position-absolute ">
            <span class="navbar-toggler-icon"></span>
            </button>
            <a class="navbar-brand ml-auto m-auto" href="#">
            <img
               src="https://getbootstrap.com/docs/5.0/assets/brand/bootstrap-logo.svg"
               alt=""
               width="130"
               height="47"
               />
            </a>
         </div>
      </nav>
      <!-- Optional JavaScript; choose one of the two! -->
      <!-- Option 1: Bootstrap Bundle with Popper -->
      <script
         src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
         integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
         crossorigin="anonymous"
         ></script>
      <!-- Option 2: Separate Popper and Bootstrap JS -->
      <!--
         <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
         <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
         -->
   </body>
</html>

This questions is titled and labled as `Bootstrap-5`. As such a framework solution should be used over custom CSS. — tacoshy, Apr 12 '22 at 04:24
I got it. I have updated my answer to become more suitable to your question. — louie kim, Apr 14 '22 at 01:58

tacoshy · Answer 2 · 2022-04-12T09:19:30.100

The easiest Bootstrap solution would be the use of the mx-auto-class:

<!DOCTYPE html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" />
  <title>Hello, world!</title>
</head>

<body>
  <nav class="navbar navbar-light bg-warning">
    <div class="container-fluid">
      <button class="navbar-toggler">
                <span class="navbar-toggler-icon"></span>
                </button>
      <a class="navbar-brand mx-auto" href="#">
        <img src="https://getbootstrap.com/docs/5.0/assets/brand/bootstrap-logo.svg" alt="" width="130" height="47" />
      </a>
    </div>
  </nav>
  <!-- Optional JavaScript; choose one of the two! -->
  <!-- Option 1: Bootstrap Bundle with Popper -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
  <!-- Option 2: Separate Popper and Bootstrap JS -->
  <!--
             <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
             <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
             -->
</body>

</html>

Edit: To move the text/logo in the center of the viewport you need custom CSS. You need to move either the text/logo or the menu button out of flow with position: relative/absolute However notice that it can cause a collision issue on smaller screens depending on the width of the text/logo

.navbar-toggler {
  position: absolute;
  left: 1em;
  top: 50%;
  transform: translate(0, -50%);
}

.container-fluid {
  position: relative;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" />
  <title>Hello, world!</title>
</head>

<body>
  <nav class="navbar navbar-light bg-warning">
    <div class="container-fluid">
      <button class="navbar-toggler">
                <span class="navbar-toggler-icon"></span>
                </button>
      <a class="navbar-brand mx-auto" href="#">
        <img src="https://getbootstrap.com/docs/5.0/assets/brand/bootstrap-logo.svg" alt="" width="130" height="47" />
      </a>
    </div>
  </nav>
  <!-- Optional JavaScript; choose one of the two! -->
  <!-- Option 1: Bootstrap Bundle with Popper -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
  <!-- Option 2: Separate Popper and Bootstrap JS -->
  <!--
             <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
             <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
             -->
</body>

</html>

This is nearly there, but is there a way to make the logo perfectly centered? For example in [link](https://www.codeply.com/p/0YTcLxU86G) I made a second nav with the button removed and it centered perfectly on the second navbar. — Curtis_L, Apr 12 '22 at 07:01

score -1 · Answer 3 · answered Apr 12 '22 at 01:59

How about something like this? I have tried this on codepen & it seems to work fine.

img {
    position: absolute;
    margin-top: -25px;
    margin-left: -50px !important;  /* 50% of your logo width */
    left: 50%;
}

<!DOCTYPE html>
<html lang="en">
   <head>
      <!-- Required meta tags -->
      <meta charset="utf-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1" />
      <!-- Bootstrap CSS -->
      <link
         href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
         rel="stylesheet"
         integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
         crossorigin="anonymous"
         />
      <title>Hello, world!</title>
   </head>
   <body>
      <nav class="navbar navbar-light bg-warning">
         <div class="container-fluid">
            <button class="navbar-toggler">
            <span class="navbar-toggler-icon"></span>
            </button>
            <a class="navbar-brand" href="#">
            <img
               src="https://getbootstrap.com/docs/5.0/assets/brand/bootstrap-logo.svg"
               alt=""
               width="130"
               height="47"
                style = "padding: 0px 15px 0px          
                          15px;"/>
            </a>
         </div>
      </nav>
      <!-- Optional JavaScript; choose one of the two! -->
      <!-- Option 1: Bootstrap Bundle with Popper -->
      <script
         src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
         integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
         crossorigin="anonymous"
         ></script>
      <!-- Option 2: Separate Popper and Bootstrap JS -->
      <!--
         <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
         <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
         -->
   </body>
</html>

unresponsive solution that requires a fixed size for the logo. As such it will fail in responsivness on different screen-sizes. Besides that, as it is specifically labled and titled with `Bootstrap-5` it should be solved by using the framework over custom CSS. Last but not least, there are way easier solutions to center an element then moving it out of flow and position it absolute. — tacoshy, Apr 12 '22 at 04:21

Bootstrap 5 Navbar center logo left text

3 Answers3