Center a bootstrap 4 navbar (including brand and links)

Question

I'm a bit struggling to center the navbar of my website (including the brand and the links) since I'm more of a backend than front.

Code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand" href="#">Navbar</a>

  <div class="collapse navbar-collapse" id="navbarTogglerDemo03">
    <ul class="navbar-nav mt-2 mt-lg-0">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
  </div>
</nav>

What I want

I know that I can center the links using m-auto but the brand (which has an image as a logo) would stay to the left and I can't seem to figure out how to center it with the links (in a good/clean way).

Thank you.

None of the links referenced as duplicate helps me. I need the brand logo AND the links in the center, the links ZimSystem gave only do one without the other.

score 0 · Answer 1 · answered Jul 15 '18 at 15:02

.brand-wrapper{
   width:100%;
}


.navbar-toggler{
float:left;
}



@media(max-width: 767px){

.navbar-brand{
 left:50%;
 position:absolute;
 transform: translate(-50%);
}

 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  

    <div class="brand-wrapper">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
    <a class="navbar-brand" href="#">Brand</a>
    </div>

  <div class="collapse navbar-collapse" id="navbarTogglerDemo03">
    <ul class="navbar-nav mt-2 mt-lg-0">
      <li class="nav-item active">
        <a class="nav-link text-center" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link text-center" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link text-center disabled" href="#">Disabled</a>
      </li>
    </ul>
  </div>
</nav>

Doesn't this only center it in mobile? I was talking about the normal view (desktops etc) :/ — Haytam, Jul 15 '18 at 15:17

score -1 · Answer 2 · answered Jul 15 '18 at 14:43

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet"/>
<head>
<style>
li{
text-align:center;
border:2px solid white;
}
li:hover{
background-color:silver;
box-shadow:inset 0px 3px 5px 0px grey;
color:white;
font-weight:bold;
}
.navbar-brand{
float:left !important;
}
</style>
</head>
<body>

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  
  <a class="navbar-brand" href="#">Your Brand</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarTogglerDemo03">
    <ul class="navbar-nav mt-2 mt-lg-0">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
  </div>
</nav>

</body>
</html>

plz try

i thing this is proper way to operate nav for mobile device middle having proble if brand name is big if you want you can just remove css brand-nav{ float:left;} — MANGESH SUPE, Jul 15 '18 at 14:48

Center a bootstrap 4 navbar (including brand and links)

2 Answers2