2

I'm looking to center my navbar from the "Cover" Bootstrap 4 template. Current code below.

<div class="cover-container d-flex h-100 p-3 mx-auto flex-column">
  <header class="masthead mb-auto">
    <div class="inner">
      <nav class="nav nav-masthead justify-content-center">
        <a class="nav-link active" href="#">Home</a>
        <a class="nav-link" href="#">Features</a>
        <a class="nav-link" href="#">Contact</a>
      </nav>

    </div>

  </header>

Preview

Link to site - https://wojakbot-64140.firebaseapp.com/

Spencer
  • 27
  • 4

2 Answers2

1

Add mr-auto, ml-auto to .masthead

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
  
<div class="cover-container d-flex h-100 p-3 mx-auto flex-column">
  <header class="masthead mb-auto mr-auto ml-auto">
    <div class="inner">
      <nav class="nav nav-masthead justify-content-center">
        <a class="nav-link active" href="#">Home</a>
        <a class="nav-link" href="#">Features</a>
        <a class="nav-link" href="#">Contact</a>
      </nav>

    </div>

  </header>
</div>
לבני מלכה
  • 15,925
  • 2
  • 23
  • 47
0

remove float for .nav-masthead 

.nav-masthead {
    /*float: right;*/
}

OR remove the class on HTML 

<header class="masthead mb-auto"> 
    <div class="inner">
      <nav class="nav justify-content-center"> <!-- remove class "nav-masthead" -->
        <a class="nav-link active" href="#">Home</a>
        <a class="nav-link" href="#">Features</a>
        <a class="nav-link" href="#">Contact</a>
      </nav>

    </div>

  </header>
Lalji Tadhani
  • 14,041
  • 3
  • 23
  • 40
  • Thanks! It worked perfectly, for some reason I had to clear my cache before it updated. I tried removing the float earlier, so I tried clearing the cache and it worked! – Spencer Dec 27 '18 at 10:30