Bootstrap Center Navbar Items

Bootstrap Center Navbar Items

You will need to modify some CSS rules for Navbar component. So add a class center to nav.navbar and the following rules:

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

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

Working demo (Bootstrap 3.3.7)

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)

Sample Image

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 center navbar links in Bootstrap 4

Place the mx-auto in the ul and it will center the links

<nav class="navbar navbar-expand-lg navbar-dark bg-dark text-center">
  ...
      <ul class="navbar-nav ml-auto mx-auto">
        ...
      </ul>
    </div>
  </div>
</nav>

Here is a codepen with your example

Bootstrap navbar items not getting in center

Please view the snippet in full page mode.

I have only tried to help in what you have asked, there are still some issues which I have not tried to solve as you are trying to learn.

Below are the changes:

1 Added justify-content-md-center in below tag

<div class="collapse navbar-collapse justify-content-md-center" id="navbarTogglerDemo01">

2 Adjusted above tag's children to have two ul only

3 added ml-auto css class in above two ul tags

/* #navbarNav {
  padding-bottom: 36px;
  padding-top: 54px;
} */

.nav-img {
  width: auto;
  max-width: 100%;
  max-height: 69px;
}

.navbar-custom {
  background-color: #000000;
}

.title-div {
  position: absolute;
  z-index: 1;
  top: 461px;
}

.home-heading {
  background-color: rgba(255, 255, 255, 0.5);
  color: black;
}

.main-image {
  /* background-image: url(../img/ill.jpg); */
  width: 100%;
  height: 82%;
  position: relative;
  z-index: -1;
}

.navbar {
  padding: 100px;
  background-color: black;
}

.navbar-brand {
  margin: 0px 0px 0px 30px;
}

.navbar-toggler {
  filter: invert(100%);
}

.navbar-nav li {
  float: left;
}

.nav-item a {
  display: block;
  text-align: center;
}

.instagram {
  filter: invert(100%);
  padding: 6px;
}

.facebook {
  filter: invert(100%);
  padding: 6px;
}

.email {
  filter: invert(100%);
  padding: 6px;
}

.phone-call {
  filter: invert(100%);
}


/* .mid{
   margin: 0px 0px 0px 200px;
   padding: 0px 0px 0px 235px;
   
} */

ul {
  list-style-type: none;
  padding: 0px;
  margin: 0px;
  background-color: #000;
}

li {
  float: left;
  /* border-right: 1px solid #bbb; */
}

li:last-child {
  border-right: none;
}

li a {
  display: block;
  color: white;
  text-align: right;
  padding: 14px 16px;
  text-decoration: none;
}

.logo {
  /* width: 133px;
    height: 69px; */
  width: auto;
  max-width: 100%;
  max-height: 69px;
  margin-top: 9px;
  margin-bottom: 17px;
  margin-left: 16px;
}

.bdy-img {
  width: 45% !important;
  height: auto !important;
  padding-top: 96px;
  padding-left: 75px;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://fonts.googleapis.com/css2?family=Playfair+Display&family=Roboto:wght@300&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital@1&display=swap" rel="stylesheet">

  <link rel="stylesheet" href="css/styles.css">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
  <title>Document</title>
</head>

<body>


  <!-- <nav class="navbar navbar-expand-lg navbar-custom " >
        <img class="navbar-brand nav-img" src="img/logo-nav.jpg" alt="Sample Image">
        <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 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="#">Features</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Pricing</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link disabled" href="#">Disabled</a>
                </li>
            </ul>
        </div>
    </nav> -->


  <nav class="navbar navbar-expand-lg">
    <a class="navbar-brand" href="#">
      <img src="img/logo-nav.jpg" class="logo" alt="Logo Img" loading="lazy" />
    </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>


    <div class="collapse navbar-collapse justify-content-md-center" id="navbarTogglerDemo01">
      <ul class=" navbar-nav ml-auto">
        <li>
          <a class="nav-link" href="">Shop</a>
        </li>
        <li>
          <a class="nav-link" href=""> I Love Lables</a>
        </li>
        <li>
          <a class="nav-link" href=""> About</a>
        </li>
        <li>
          <a class="nav-link" href=""> How It Works</a>
        </li>
        <li>
          <a class="nav-link" href=""> Charities</a>
        </li>
        <li>
          <a class="nav-link" href=""> Sell With Us</a>
        </li>
        <li>
          <a class="nav-link" href=""> News</a>
        </li>
        <li>
          <a class="nav-link" href=""> Designers</a>
        </li>
        <li>
          <a class="nav-link" href=""> Contact</a>
        </li>
      </ul>

      <ul class="navbar-nav ml-auto">
        <li class="nav-item">
          <a class="nav-link" href="">
            <img src="nav-icons/instagram.png" class="instagram" width="50" height="50" alt="Sample Image" loading="lazy" />
          </a>
        </li>

        <li class="nav-item">
          <a class="nav-link" href="">
            <img src="nav-icons/email.png" class="email" width="50" height="50" alt="Sample Image" loading="lazy" />
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="">
            <img src="nav-icons/facebook.png" class="facebook" width="50" height="50" alt="Sample Image" loading="lazy" />
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="">
            <img src="nav-icons/phone-call.png" class="phone-call" width="50" height="50" alt="Sample Image" loading="lazy" />
          </a>
        </li>
      </ul>
    </div>

  </nav>


  <!-- <div class="main-bdy-div  align-items-center" >
    <div class="container-fluid title-div home-heading">
        <h1 class="" style="font-size: calc(3.6vw + 1rem); font-family: 'Playfair Display', serif;" >I love labels</h1>
    </div>
           
    <div class="container-fluid title-div " style="width: 49%;   background-color: rgba(255, 255, 255, 0.5); ">
        <h1 class="" style="text-align: justify; font-size: calc(1.44vw + 1rem); font-family: 'Cormorant Garamond', serif;">New Zealand's
        Premier Boutique for Quality Preloved Designer Fashion</h1>
    </div>
    <img class="main-image" src="img/ill.jpg" alt="Sample Image">
</div> -->


  <div class="main-img">
    <img class="main-image" src="img/ill.jpg" alt="Sample Image">
  </div>

  <div class="container-fluid justify-content-start">
    <div class="container-fluid title-div " style=" text-align: center; width: 28%;   background-color: rgba(255, 255, 255, 0.5); ">
      <h1 class="" style="font-size: calc(3.6vw + 1rem); font-family: 'Playfair Display', serif;">I love labels
      </h1>
    </div>

    <div class="container-fluid title-div justify-content-between " style="width: 49%;   background-color: rgba(255, 255, 255, 0.5); top: 576px; ">
      <h1 class="" style="text-align: justify; font-size: calc(1.44vw + 1rem); font-family: 'Cormorant Garamond', serif;">
        New Zealand's Premier Boutique for Quality Preloved Designer Fashion</h1>
    </div>
  </div>


  <!-- main body section -->

  <div class="container-fluid">
    <div>
      <img class="bdy-img" src="img/IMG_0018.jpg" style=" width: 100%;
  height: auto;" alt="Sample Image">

      <div class="d-flex align-items-start justify-content-end">
        <h1 style="text-align: center;">Our Unique Approach.</h1>
      </div>
    </div>

  </div>











  <!-- bootstrap js -->
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>

</body>

</html>

Spacing and centering bootstrap navbar items

You can use flex-box: 

.navbar-nav {   display: flex;   justify-content: space-between; }
<ul class="navbar-nav">  <li class="nav-item active">    <%= link_to "Diary", "#", class: "nav-link" %>  </li>  <li class="nav-item active">    <%= link_to "Pen", "#", class: "nav-link" %>  </li>  <li class="nav-item active">    <%= link_to "Tape", "#", class: "nav-link" %>  </li></ul>

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;
}

Related Topics

How Does CSS 'Overflow:Hidden' Work to Force an Element (Containing Floated Elements) to Wrap Around Floated Elements

Suggestions for Debugging Print Stylesheets

Firefox Ignores Padding When Using Overflow:Scroll

How to Make CSS A:Active Work After the Click

Continuous CSS Rotation Animation on Hover, Animated Back to 0Deg on Hover Out

Print Background Colours in Chrome

How to Use Safe Center with Flexbox

Less CSS Nesting Classes

How to Make Select Element Be Transparent in Chrome

How to Align Items in a <H:Panelgrid> to the Right

Animated Cursor Support in Web Applications

Webfont Smoothing and Antialiasing in Firefox and Opera

Circle with Two Borders

What Are Allowed Values of the 'Display' Property for a Flex-Item? (Layout of Flex-Item's Children Is Irrelevant)

CSS Rounded Corners in IE8

Icon Fonts Not Loading in Ie11

Div with Cut Out Edges, Border and Transparent Background

What Does @-Moz-Document Url-Prefix() Do


Leave a reply



Submit