在 Bootstrap4 的导航栏中居中文本的问题

Question

I created a navbar in Bootstrap, and I would like to center the content in it.

<nav class="navbar navbar-light bg-light">
  <div class="container"> 
    <span class="navbar-brand mb-0 h1">
      <i class="bi bi-list-check"></i>
      Nav Text
    </span> 
  </div>
</nav>

In a CSS file, I tried several things, but nothing works. For example flex:

.navbar { 
  display: flex;
  justify-content: center;
}

It just seems that nothing influences the navbar. I have no idea why.

Answer 1

Your "Nav Text" text is inside a div element that has the class .container . This div is inside another nav element that has the class navbar that is a flexbox container. The default styles (boostrap you are using) justifies content to the start of the flexbox ( justify-content:flex-start ). You have to override this default styling using the value center for justify-content . Also, you have to use !important to override the default style. Please see this screenshot.

https://prnt.sc/1xfrtcp

And example code below.

 .navbar > .container { justify-content:center!important; }

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <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> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <nav class="navbar navbar-light bg-light"> <div class="container"> <span class="navbar-brand mb-0 h1"> <i class="bi bi-list-check"></i> Centered Nav Text </span> </div> </nav>