Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Centering the navbar content in Bootstrap 4 (alpha 5)

I am trying to center the navbar content in Bootstrap 4, alpha 5. I have been googling a bit, and I guess there might be some trick involving d-block and mx-auto.

However I cannot find out how to center the navigation links so that they are total in center, not just adding a container around them.

Sample navbar code I am playing with:.

<nav class="navbar navbar-light bg-faded">
  <ul class="nav navbar-nav">
    <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 dropdown">
      <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Dropdown link
      </a>
      <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
        <a class="dropdown-item" href="#">Action</a>
        <a class="dropdown-item" href="#">Another action</a>
        <a class="dropdown-item" href="#">Something else here</a>
      </div>
    </li>
  </ul>
</nav>

JSFiddle if you like

like image 489
Ole Kristian Losvik Avatar asked Nov 09 '16 21:11

Ole Kristian Losvik


People also ask

How do I center navbar in Bootstrap 4?

By using Bootstrap: This method is a quick tricky that can save you from writing extra CSS. In this, we simply add another div tag above the div tag having class collapse navbar-collapse. This new div tag will also have the same collapse navbar-collapse class.

How do I align navbar content to the right in bootstrap 4?

ml-auto class in Bootstrap can be used to align navbar items to the right. The . ml-auto class automatically aligns elements to the right.

How do I align navbar items to the right in bootstrap 5?

Using flex alignment class The navbar items can be aligned using flex utility. Use . justify-content-end class on collapse menu to justify items to the right.


2 Answers

Centering Navbar items is simpler in Bootstrap 4, and doesn't require additional markup.

<nav class="navbar navbar-expand-md navbar-light bg-faded">
  <ul class="navbar-nav mx-auto">
    <li class="nav-item active text-center">
      <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
    </li>
    <li class="nav-item text-center">
      <a class="nav-link" href="#">Features</a>
    </li>
    <li class="nav-item text-center">
      <a class="nav-link" href="#">Pricing</a>
    </li>
    <li class="nav-item dropdown text-center">
      <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Dropdown link
      </a>
      <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
        <a class="dropdown-item" href="#">Action</a>
        <a class="dropdown-item" href="#">Another action</a>
        <a class="dropdown-item" href="#">Something else here</a>
      </div>
    </li>
  </ul>
</nav>

Bootstrap 4 Center Navbar Demo (updated for v4.0.0)

If you need to center only specific elements, such as the Brand or Links, see this answer

like image 173
Zim Avatar answered Dec 15 '22 00:12

Zim


You shouldn't need to use css to accomplish this, since bootsrap's "mx-auto" class can take care of this for you. You can simply add the following to your ul class:

more info on horizontal centering in boostraps docs: https://getbootstrap.com/docs/4.4/utilities/spacing/

like image 31
AmeetKal Avatar answered Dec 14 '22 23:12

AmeetKal