Aligning the navigation bar items in Bootstrap 4 (version alpha 5)

I have been exploring ways to center the navbar content in Bootstrap 4, alpha 5. After some research, I came across a suggestion involving the use of d-block and mx-auto.

However, I am struggling to figure out how to center the navigation links so that they are perfectly aligned at the center, rather than just enclosing them within a container.

Here is the sample navbar code I have been experimenting 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>

Feel free to check out the JSFiddle version as well

csstwitter-bootstrapbootstrap-4twitter-bootstrap-4

Answer №1

Aligning the items in the Navbar is made easier with Bootstrap 4, eliminating the need for extra 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 want to center specific elements like the Brand or Links only, take a look at this answer

Answer №2

A simple way to center your content horizontally is by using Bootstrap's "mx-auto" class. This eliminates the need for custom CSS styling. Just add it to your ul element:

For more information on horizontal centering with Bootstrap, check out their documentation here: https://getbootstrap.com/docs/4.4/utilities/spacing/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilizing SASS, JavaScript, and HTML for seamless development with Browser Sync for live syncing and

I've been on a quest to find a solution that covers the following requirements: Convert SASS to CSS Post-process CSS Minify CSS Move it to a different location Bundle all Javascript into one file Create compatibility for older browsers Tre ...

javascripthtmlcssnpmrollout

What causes the odd gaps at the bottom of boxes in a Pure CSS Masonry layout?

Issue with implementing Pure CSS Masonry layout. Using position: relative for the boxes and position: absolute for the content inside each box is causing gaps below each box. Struggling to find a solution, view the code on this codepen: http://codepen.io/k ...

htmlcss

When hovering, the CSS animation will rotate an additional 45 degrees

Currently, I have an element set to rotate 45 degrees when the website is displayed, and this functionality is working as expected. However, I am now looking to enhance it further by making the element rotate an additional 45 degrees every time it is hover ...

htmlcssanimationrotation

In my Ionic/Angular project, I'm attempting to showcase two columns side by side in a row. However, the layout seems to be stacking them on top of each other with the

I am having some trouble arranging two columns in a row for my Ionic/Angular project. It seems like the content is stacking on top of each other instead of side by side. Here's the CSS I'm using: <ion-grid class="rewards-container&q ...

htmlcssangularionic-frameworkgrid

The behavior of CSS position: sticky varies depending on whether the user is scrolling up or scrolling down

I am experiencing an issue in my Vue CLI app where a component with the position: sticky CSS property is being partially hidden under the top of the browser when scrolling down, but works correctly when scrolling up. This behavior is also observed on my Ga ...

javascriptcssvue.jscss-positionvuex

What is the best way to horizontally center an image with a transparent background using CSS?

A search button triggers a processing gif image to appear in the center with a transparent background. The content of this function is described below. Thank you for all responses. .img-loader{ text-align: center; width: 50px; display: block; ma ...

htmlcss

Is there a way to add a disappearing large space that vanishes when a line break occurs?

I am currently working on a website where I aim to have the name and airport code displayed in a centered title above an image of the airport. https://i.sstatic.net/Vwi2V.png The name and code will be separated by an em space: div.terminal-silhouette- ...

htmlcss

Retrieving a page using jQuery

Below is the JavaScript code that I am using: $.ajax({ url: "test.html", error: function(){ //handle error }, success: function(){ //perform actions here with the received data } }); After retrieving test.html, I am wo ...

javascriptjqueryhtmlcssajax

Building a dynamic mega menu using Bootstrap

Looking to enhance our ERP application with a mega menu feature. Does anyone have a link to a free Bootstrap mega menu template? I've searched on Google but haven't been able to locate the right one. ...

cssbootstrap-4blazor

Ways to resolve flickering caused by css keyframe animation

I'm currently working on creating a staggered opacity effect for three boxes using an infinite keyframe animation and the animation-delay property. However, I've encountered an unexpected issue where the third box seems to fade away and then rea ...

htmlcsssasscss-animationskeyframe

sidebar that appears upon the initial page load

I'm currently working on implementing a sidebar navigation panel for my website using JavaScript, HTML, and CSS. However, I am facing an issue where the sidebar automatically opens when the page is first loaded, even before clicking on the icon to ope ...

javascripthtmlcssnavigationsidebar

Unable to click on element in Firefox browser

Encountering an issue with the following error message: Element is not clickable at point (791, 394). Other element would receive the click: Command duration or timeout: 66 milliseconds Any ideas on what's causing this? Using selenium web driver ve ...

htmlcssseleniumselenium-webdriverselenium-firefoxdriver

Javascript enables the magnetization of cursor movements

Can a web page be designed so that when users open it and hover their mouse over a specific area outside of an image, the mouse is attracted to the image as if by a magnet? Is this idea feasible? Any suggestions would be appreciated. ...

javascriptjqueryhtmlcss

Incorporating fresh data from a node.js backend to refresh a webpage section

I'm currently working on creating an app that can retrieve the song a user is currently listening to using a web scraper. While I've managed to direct users to the page and display the current song title, they must manually refresh the entire pag ...

htmlcssnode.jsexpressejs

What's the deal with toggleClass() not functioning properly?

I am facing an issue with a simple class toggle in jQuery. Despite my best efforts, it is not working as intended. The expected behavior is to toggle the class of the <p> when clicking anywhere on the label. It does work correctly if the checkbox is ...

jquerycsstoggleclass

The minified version of Bootstrap's CSS will only be loaded when I explicitly import it in my index

I used to rely on BootstrapCDN for my styles, but now I want to download the files and use them locally. However, when I try to load the styles without an internet connection, they don't seem to work properly, especially the grid layout. My current s ...

htmlcssreactjsbootstrap-4

Make the bootstrap button group adjust its size to fit the container dimensions

My goal is to create a display for multiple images with descriptions using a button cycling system. However, I am facing an issue where the buttons overflow the container instead of fitting within it when I wrap the cycler in a container with a fixed width ...

htmlcssbootstrap-5

Changing iOS status bar background color with Bootstrap

Is there a way to achieve a background color in the status bar of a PWA on an iOS device after the app is added to the homescreen? Currently, I have set the apple-mobile-web-app-status-bar-style meta tag to "black-translucent" instead of the other availab ...

iostwitter-bootstrapsafariios7-statusbar

The quantity of columns available in Bootstrap 4 is determined by the letter "

In the process of developing an online store, I am looking to display 3 items per row with some additional space. My initial idea was to create a column grid of 9 total columns, divided into 3 child columns each. This layout would leave me with 3 extra col ...

twitter-bootstrapbootstrap-4

Choosing containers as found in the Firefox debugging tool

I'm currently working on developing a container selector similar to the one found in Firefox's debug tools (press ctrlshift+C). The main goal is to retrieve a list of selected elements for further manipulation. Here is my current progress: http ...

javascriptjquerycssjquery-events