Having problem with centering text in a Navbar in Bootstrap4-CodePudding

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.

CodePudding user response：

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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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>