What is the best way to align navigation items in the center using Bootstrap?

How can I perfectly center the nav-items (links) on the navbar based on the browser window size in Bootstrap 4? Check out this code snippet:

<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">
            <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>
</nav>

I want to center the "navbar-nav" div exactly in the middle of the screen based on the browser's width. I've tried using mr-auto and ml-auto, but it doesn't center it perfectly. It ends up centering the div relative to the browser window width minus the logo width. How can I achieve perfect center alignment?

Changing the position to absolute has caused layout issues in collapsed mode. Are there any other methods that can help me achieve the desired centered effect?

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

Learn to use flexbox and margin utilities in a responsive manner...

Experience Bootstrap 4 alpha 6 Discover how to center your brand and links here

<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="#">Brand Name</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 Check out how to center the brand and align left on mobile devices here

https://i.sstatic.net/Vg3hq.png

UPDATE..

The approach remains consistent. Utilize mx-auto for centering.

Instructions on centering links with left brand placement can be found here

<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="#">Brand Name</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 precise centering of links within the viewport is desired, refer to the second example provided here

Additional examples of Navbar alignment in Bootstrap 4

Further Reading...

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

Answer №2

.navbar-nav .nav-link,
.navbar-brand {
  text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<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">
      <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>
</nav>

Answer №3

Here is some CSS code that you can use:

#navigationAltMarkup {
  position: fixed;
  text-align: center;
}
#navigationAltMarkup > section {
  display: flex;
  width: 100%;
}
#navigationAltMarkup > section > li {
  display: inline-block;
}

This CSS will make the menu container independent from its parent, give it full width, and center align the elements inside.

View the example on CodePen

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

What is the most effective method to generate a new div that depends on a set number of elements?

Apologies if my question seems unclear, as it's challenging to explain exactly what I'm trying to achieve. I'll do my best to clarify. I have a system for managing inventory where items are received by scanning their serial numbers. As each ...

javascripthtmlreactjs

Guide on validating multiple preselected checkboxes using Angular 8 reactive forms

I have a problem with validating checkboxes in my Angular application. The checkboxes are generated dynamically from an array using ngFor loop, and I want to make sure that at least one checkbox is selected before the form can be submitted. The validatio ...

htmlangulartypescript

Maintain consistent alignment of the backgrounds for each term-description pair within a definition list resembling a table

I am trying to style a definition list in HTML to resemble a table using th and td elements in two separate columns, while also having alternating row backgrounds. I have implemented the following CSS for this purpose: dl { font-family: Verdana, Genev ...

htmlcsscss-tables

Error encountered while loading GitHub Pages resource

Currently, I am facing issues while attempting to host an Angular application with Bootstrap 4 on GitHub Pages using angular-cli-ghpages. The URL I am trying to deploy it at is , but I continuously encounter the following error: Failed to load resource: s ...

angulargithub-pagesbootstrap-4

Tips for positioning buttons in the bottom corner of a webpage while ensuring they are responsive

Currently working on this website as a personal side project, focusing on making it responsive. This is my first attempt at creating a responsive webpage, and I have successfully figured out most aspects except for the positioning of the social media butto ...

htmlcsstwitter-bootstrapbootstrap-4

modify the color of text in a row within a jquery ajax table

Is it possible to change the font color of values in a row based on a condition inside a function? Specifically, if the TotalStudent count exceeds the room capacity, can we add student information to the table with red font color? Below is my attempt using ...

javascriptjquerycssajax

Using Angular, you can easily add a <div> dynamically to all elements that share a class

In order to implement a solution, I am tasked with adding a new div element with the class '.cart-list-value .delete-product', which will contain a background image, to all elements that have the class .cart-list-item. Although I successfully man ...

htmlangulardomangular-renderer2

Align the text vertically within a list item

<ul style="text-align: center;"> <li style="margin: 0; padding-bottom: 23px; font-size: 32px; vertical-align: middle;"> <div style="font-family: 'Arial','sans-serif'; color: black; font-size: 17px;">[%code1%]</ ...

cssinlinevertical-alignmentlistitem

Prevent Page Refresh after Save Operation in Model-View-Controller

Incorporating MVC and Bootstrap into my project, I've set up a Submit button to save data. Utilizing Bootstrap nav tabs for design. However, when I save data, I encounter an issue with tab navigation. Entering data in the first tab ...

javascriptjqueryajaxasp.net-mvcbootstrap-4

How to continuously animate images in HTML using Bootstrap

I want to showcase 7-8 client images in a continuous loop using a <marquee> tag. The issue is that there is a gap between the last and first images. Here is the HTML code I have: <marquee> <ul> <li><a href="#&q ...

javascriptjqueryhtmlcsstwitter-bootstrap

Creating a Div element to occupy an entire row is a simple task that can be achieved

Seeking a solution to automatically generate a DIV when our products do not fill up the entire row, using the MixItUp jQuery filter and sort plugin. Is there a JavaScript code that can detect the empty space in a row and create the necessary div to mainta ...

javascriptjqueryhtmlcss

Select from a variety of backgrounds using the dropdown menu on the site

I seem to be struggling with javascript and php, but I know that in order to make this function properly, I need to utilize both languages. My goal is to set up a "select box" featuring 4 different images. There will be a default image displayed, but user ...

javascriptphpjqueryhtml

Ways to verify when leaving the webpage

After spending an excessive amount of time searching for this information, I finally figured it out. So here you have it, I'm sharing the steps to create a custom "ARE YOU SURE YOU WANT TO LEAVE THIS PAGE?" dialog. ...

javascripthtmldomonbeforeunload

Creating an HTML table that adjusts to the screen height with square-shaped cells

var grid = document.getElementById("grid"); var size = 50; for (var y = 0; y < size; y++) { var currentRow = grid.insertRow(0); for (var x = 0; x < size; x++) { var currentCell = currentRow.insertCell(-1); currentCell.style.height = currentCell.styl ...

javascripthtmlcsshtml-table

Adding Firebase Data to Vue Table

I am currently utilizing Vue Table JS, which can be found at https://github.com/matfish2/vue-tables-2 <script type="text/javascript"> Vue.use(VueTables.ClientTable); new Vue({ el: "#app", data: { columns: ['name', 'code', ...

javascripthtmlvue.js

Enhancing Vue with stylish components

My Vue component is quite basic, with the following structure: <script> export default { props: { source: { type: String, required: true, } }, } </script> <template> <div class="imageItem"> <img class="image" :data-srcse ...

cssvue.jscomponentsstyles

Retrieve the text contained within a specific element's paragraph

Is there a way to extract the text content from a <p> tag that is located within an <li> element? Sample HTML code: <ul> <li onclick="myfunction()"> <span></span> <p>This Text</p> </li> &l ...

javascripthtmlparagraph

Adjust the position of an image to move it closer to the top using CSS

I have a fiddle where I am trying to adjust the position of an image (keyboard) to match a specific design. https://i.sstatic.net/flqCH.png In my fiddle, the keyboard image is slightly lower than the desired position shown in the design. I am looking for ...

javascripthtmlcsstwitter-bootstrap-4

Is it possible to modify the background color of the firefox address bar according to the type of protocol being used?

Is there a way to customize the background color of the address bar in Firefox according to different protocols? For example, using blue for https, orange for mixed content warning, green for ev-certificate, and red for invalid certificates. ...

cssfirefoxfirefox-addon

Minify your Angular code and include background images through URLs specifically for production mode

Trying to create a gradient image background in CSS using Angular 6 with the CLI template. Everything looks great in dev mode, but when I switch to the production version (ng build "--prod"), the CSS code becomes invalid. Here is the SCSS file: .home-con ...

cssangularangular-cli-v6