Align Bootstrap Navigation to Center

Center content in responsive bootstrap navbar

I think this is what you are looking for. You need to remove the float: left from the inner nav to center it and make it a inline-block.

.navbar .navbar-nav {
  display: inline-block;
  float: none;
  vertical-align: top;
}

.navbar .navbar-collapse {
  text-align: center;
}

http://jsfiddle.net/bdd9U/2/

Edit: if you only want this effect to happen when the nav isn't collapsed surround it in the appropriate media query.

@media (min-width: 768px) {
    .navbar .navbar-nav {
        display: inline-block;
        float: none;
        vertical-align: top;
    }

    .navbar .navbar-collapse {
        text-align: center;
    }
}

http://jsfiddle.net/bdd9U/3/

Align Bootstrap Navigation to Center

Thank you all for your help, I added this code and it seems it fixed the issue:

.navbar .navbar-nav {
    display: inline-block;
    float: none;
}

.navbar .navbar-collapse {
    text-align: center;
}

Source

Center content in responsive bootstrap navbar

How to center nav-items in Bootstrap?

Use the flexbox and margin utils responsively...

Bootstrap 4 alpha 6
http://codeply.com/go/YvzHvQQRAs (center brand & links)

<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="d-md-flex d-block flex-row mx-md-auto mx-0">
        <a class="navbar-brand" href="#">Navbar</a>
        <div class="collapse navbar-collapse mr-auto" id="navbarNavAltMarkup">
            <div class="navbar-nav">
                <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
                <a class="nav-item nav-link" href="#">Features</a>
                <a class="nav-item nav-link" href="#">Pricing</a>
                <a class="nav-item nav-link disabled" href="#">Disabled</a>
            </div>
        </div>
    </div>
</nav>

Bootstrap 4.1
https://www.codeply.com/go/sTJUthyswN (center brand, align left on mobile)

EDIT..

The answer is still basically the same. Use mx-auto to center.

http://codeply.com/go/mycC5z8lpJ (center links, brand left)

<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" 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="navbarNavAltMarkup">
        <div class="navbar-nav mx-auto">
            <a class="nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
            <a class="nav-link" href="#">Features</a>
            <a class="nav-link" href="#">Pricing</a>
            <a class="nav-link disabled" href="#">Disabled</a>
        </div>
    </div>
</nav>

If you want the links exactly centered in the viewport, see the 2nd example here: http://www.codeply.com/go/RCBftzZCD8

Other Bootstrap 4 Navbar alignment examples

Also see...

Center an element in Bootstrap 4 Navbar

Center Navbar links without brand pushing it to the right in Bootstrap 4?

How to center navbar in Bootstrap 4 using Flexbox

How to position navbar contents in Bootstrap 4

Bootstrap 4 Navbar align logo center and toggle icon on the left

How to align center navbar with only bootstrap 4.5.3?

You should wrap the children of the nav tag in a div with classes: mx-auto and d-flex to achieve a fully centred navbar.

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <div class="mx-auto d-flex">
      <a class="navbar-brand" href="#">Navbar</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav">
          <li class="nav-item active">
            <a class="nav-link" href="#">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">About Us</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Shopping</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">News</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Help</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Contact Us</a>
          </li>
        </ul>
      </div>
      </div>
    </nav>
  </div>

Center an element in Bootstrap Navbar

In Bootstrap 4, there is a new utility known as .mx-auto. You just need to specify the width of the centered element.

Ref: http://v4-alpha.getbootstrap.com/utilities/spacing/#horizontal-centering

Diffferent from Bass Jobsen's answer, which is a relative center to the elements on both ends, the following example is absolute centered.

Here's the HTML:

<nav class="navbar bg-faded">
  <div class="container">
    <ul class="nav navbar-nav pull-sm-left">
      <li class="nav-item">
        <a class="nav-link" href="#">Link 1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link 2</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link 3</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link 4</a>
      </li>
    </ul>
    <ul class="nav navbar-nav navbar-logo mx-auto">
      <li class="nav-item">
        <a class="nav-link" href="#">Brand</a>
      </li>
    </ul>
    <ul class="nav navbar-nav pull-sm-right">
      <li class="nav-item">
        <a class="nav-link" href="#">Link 5</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link 6</a>
      </li>
    </ul>
  </div>
</nav>

And CSS:

.navbar-logo {
  width: 90px;
}

Bootstrap Nav Bar Center Align

Just use the below mentioned css and you can achieve it.
Add class=navbar-center to the <ul> containing links which needs to be middle align

Working example

@media (min-width: 768px) {

  .navbar-nav.navbar-center {

    position: absolute;

    left: 50%;

    transform: translatex(-50%);

  }

}

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

      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>

      <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<nav class="navbar navbar-default" role="navigation">

      <div class="container-fluid">

        <div class="navbar-header">

            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#a-navbar-collapse" aria-expanded="false">

                <span class="sr-only">Toggle navigation</span>

                <span class="icon-bar"></span>

                <span class="icon-bar"></span>

                <span class="icon-bar"></span>

              </button>

          <a class="navbar-brand" href="#">

            Brand

          </a>

        </div>

       <div class="navbar-collapse collapse"  id="a-navbar-collapse">  

           <ul class="nav navbar-nav navbar-center">

                     <li><a href="#">Link 1</a></li>

                     <li><a href="#">Link 2</a></li> 

                     <li><a href="#">Link 3</a></li>

                     <li><a href="#">Link 4</a></li> 

                     <li><a href="#">Link 5</a></li> 

           </ul>

              <ul class="nav navbar-nav navbar-right">

                 <li><a href="#">Link 6</a></li>

                 <li><a href="#">Link 7</a></li>

              </ul>

        </div> 

       </div>

    </nav>

In Bootstrap 4, is it possible to center the navbar brand and align some text to the left of brand?

In Bootstrap 4 navbar is using flexbox. It helps in centering the barnd name or any name that you need to get centered. so the it can be centered using mx-auto. Then left right menus will not need floats.

 <nav class="navbar navbar-expand-md navbar-fixed-top navbar-dark bg-dark main-nav">
    <div class="container">
        <ul class="nav navbar-nav">
            <li class="nav-item active">
                <a class="nav-link" href="#">Home</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">products</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Hair products</a>
            </li>
        </ul>
        <ul class="nav navbar-nav mx-auto">
            <li class="nav-item"><a class="nav-link" href="#">VIRTUAL BEAUTY</a></li>
        </ul>
        <ul class="nav navbar-nav">
            <li class="nav-item">
                <a class="nav-link" href="#">Services</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Blog</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Contact Us</a>
            </li>
        </ul>
    </div> </nav>

This will give you a nav bar like the image below.

Reference image from: Center an element in Bootstrap 4 Navbar

Here you can see the actual viewport center is different from the center that brand name is located at. Thats because it takes center in respective to the left and right ends of navigation bar.

The following code can be used to overcome this issue. BY using position absolute.

.abs-center-x {
    position: absolute;
    left: 50%;
    transform: translateX(-50%); }

Hope this helps.

Follow this link It much clearly illustrates the way to do your work.
mx-auto to center navbar- https://www.codeply.com/go/J9rL11Tf7h
Navbar center and absolute position- https://www.codeply.com/go/BC2gFdZ9fb

Center align nav items in Bootstrap nav

You can use the CSS to align the text to center.

.navbar-nav>li>a {
    text-align: center;
}

Demo

To center the navigation tabs you can use ..

.navbar-header {
    display: inline-block;
    float: none;
    vertical-align: middle;
}
.navbar-default {
  text-align: center;
}

Demo 2

Solution for align bootstrap navigation(links) to the center

use center-block class

<div class="row">
  <ul class="nav nav-pills center-block ">
      <li><a href="">Page 1</a></li>
      <li><a href="">Page 2</a></li>
      <li><a href="">Page 3</a></li>
  </ul>
</div>

or else try using text-center am not expert but try this :)

---

Related Topics