Bootstrap 4 how should I center my navigation properly?

Question

After reading into some methods regarding the matter of the title of this question, I found out that I could use the .mx-auto class to center the navigation in Bootstrap 4. This solution works perfectly except that it has one drawback, namely the brand size in front of the navigation.

In this given example I show you what I mean by using the .mx-auto class by changing it from .mr-auto on the <ul> tag of the navigation in Bootstrap and the drawback I refered to earlier.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

    <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
      <a class="navbar-brand" href="#">Navbar</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse" id="navbarsExampleDefault">
      <!--Applying mx-auto here, makes the navigation go somewhat to the middle: -->
        <!--<ul class="navbar-nav mr-auto"> to-->
        <ul class="navbar-nav mx-auto">
          <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="#">About</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Contact</a>
          </li>
          
        </ul>
        
      </div>
    </nav>

    <main role="main">

      <!-- Main jumbotron for a primary marketing message or call to action -->
      <div class="jumbotron">
        <div class="container">
          <h1 class="display-3">Hello, world!</h1>
          <p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
          <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more &raquo;</a></p>
        </div>
      </div>

      <div class="container">
        <!-- Example row of columns -->
        <div class="row">
          <div class="col-md-4">
            <h2>Heading</h2>
            <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
            <p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
          </div>
          <div class="col-md-4">
            <h2>Heading</h2>
            <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
            <p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
          </div>
          <div class="col-md-4">
            <h2>Heading</h2>
            <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
            <p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
          </div>
        </div>

        <hr>

      </div> <!-- /container -->

    </main>

    <footer class="container">
      <p>&copy; Company 2017-2018</p>
    </footer>

    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script>window.jQuery || document.write('<script src="../../../../assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
    <script src="../../../../assets/js/vendor/popper.min.js"></script>
    <script src="../../../../dist/js/bootstrap.min.js"></script>

https://jsfiddle.net/8j7c0ac5/

(Make sure to view the result in a full page view due to Bootstrap's responsiveness to small windows, disabling the navigation bar version I am refering to).

As you might see the navigation appears to be correctly centered, however if a brand would be larger or if you would be inspecting the DOM, you will notice how the navigation <ul> element is actually not really centered in the middle of the page, but moved a bit to the right because of the brand space required to the left of the navigation.

What is the best way to approach a solution for this? How could I center my navigation exactly in the middle without regard of brand size and without touching the way the navigation would look like on a mobile screen?

Edit:

If I want the page to look exactly like the example, except I want the navigation to be exactly centered, would I need to require the use of position and/or media queries to prevent mobile screen size being changed? The given examples on some of the other answers do add elements to the DOM and I just don't want mobile view to change the way it is.

So: [brand][navigation]

Or: [brand][navigation][nothing]

Achieving this requires the following code according to ZimSystem's answer:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark justify-content-center">
  <a href="/" class="navbar-brand d-flex w-50 mr-auto">Brand</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse w-100" id="navbarsExampleDefault">
    <ul class="navbar-nav w-100 justify-content-center">
      <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="#">About</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Contact</a>
      </li>
    </ul>
    <ul class="nav navbar-nav ml-auto w-100 justify-content-end">
    </ul>
  </div>
</nav>

<main role="main">

  <!-- Main jumbotron for a primary marketing message or call to action -->
  <div class="jumbotron">
    <div class="container">
      <h1 class="display-3">Hello, world!</h1>
      <p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
      <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more &raquo;</a></p>
    </div>
  </div>

  <div class="container">
    <!-- Example row of columns -->
    <div class="row">
      <div class="col-md-4">
        <h2>Heading</h2>
        <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
        <p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
      </div>
      <div class="col-md-4">
        <h2>Heading</h2>
        <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
        <p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
      </div>
      <div class="col-md-4">
        <h2>Heading</h2>
        <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
        <p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
      </div>
    </div>

    <hr>

  </div> <!-- /container -->

</main>

<footer class="container">
  <p>&copy; Company 2017-2018</p>
</footer>

<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="../../../../assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
<script src="../../../../assets/js/vendor/popper.min.js"></script>
<script src="../../../../dist/js/bootstrap.min.js"></script>

https://jsfiddle.net/jxtg3j44/

Try to apply this to .collapse on your large screen media query `position: absolute; left: 0; right: 0;` so it will not affect smaller devices — Jeremiah Cabigting, Mar 26 '18 at 23:44
@JeremiahCabigting Seems like a quite handy solution. I was hoping Bootstrap would support the centering of navigation element but my guess is that it does not and I am required to style it myself (not implying that I want to be lazy, I just would like to know the full features of Bootstrap). — Barrosy, Mar 26 '18 at 23:50
The question of relative centering has already been addressed in the dup questions. For example: https://www.codeply.com/go/4XNoJE4T3j ... and, no, absolute positioning isn't needed. — Carol Skelly, Mar 27 '18 at 00:01
@Barrosy -- for left brand, and center links it would work like this: https://codeply.com/go/Z5klFmvHbW — Carol Skelly, Mar 27 '18 at 01:49
@ZimSystem I found the solution to my question by looking at your code, it leaves me with an empty `
` but I will leave it there, it might come of use in the future. I added the result to my question under the edit part. — Barrosy, Mar 27 '18 at 01:54
Ok, did you see the comment above? You need 3 nested `d-flex` elements, and the last/right one as an empty spacer. That's the only way to keep the links centered w/o relative to left/right. — Carol Skelly, Mar 27 '18 at 01:57
@ZimSystem I did see it, problem is that the position of the toggle button on the mobile view will be changed using the example you gave in the comment, but like I said in the previous content, I added the solution for that in my question based on what I saw in one of your examples on another question. — Barrosy, Mar 30 '18 at 15:19

score 1 · Answer 1 · answered Mar 26 '18 at 23:51

1

Try to apply this to .collapse on your large screen media query position: absolute; left: 0; right: 0; so it will not affect smaller devices

answered Mar 26 '18 at 23:51

Jeremiah Cabigting

149
1
7

Bootstrap 4 how should I center my navigation properly?

1 Answers1