Guide to centering the navigation bar within a container using Bootstrap 4

I'm looking to center the navbar on my webpage. How can I style it so that it appears in the middle of the page? Currently, it's aligned with the left side of the page.

section class="navbarSection">
      <div class="container-fluid">
          <div class="row">
            <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-xs-12 d-flex justify-content-center">
             <div class="navBar2">
              <nav class="navbar navbar-expand-lg bg-white paddingo">
        
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
                  <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarText">
                  <ul class="navbar-nav mr-auto">
                    <li class="nav-item  ">
                      <a class="nav-link firstLink" href="#">WHO WE ARE <span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item ">
                      <a class="nav-link " href="#">OUR SERVICES</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link " href="#">OUR PROJECTS</a>
                    </li>
                  
                    <li class="nav-item">
                      <a class="nav-link" href="#">CONTACT US</a>
                    </li>
                  
                   <li class="nav-item">
                      <a class="nav-link" href="#">CAREERS</a>
                    </li>
                  </ul>
                </div>
              </nav>
            </div>
    
             </div>
            </div>
      </div>
    </section>
htmlcssbootstrap-4

Answer №1

To center the elements in navbar-nav, simply replace ml-auto with m-auto:

          <ul class="navbar-nav m-auto">
            <li class="nav-item  ">
              <a class="nav-link firstLink" href="#">WHO WE ARE <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item ">
              <a class="nav-link " href="#">OUR SERVICES</a>
            </li>
            <li class="nav-item">
              <a class="nav-link " href="#">OUR PROJECTS</a>
            </li>
          
            <li class="nav-item">
              <a class="nav-link" href="#">CONTACT US</a>
            </li>
          
           <li class="nav-item">
              <a class="nav-link" href="#">CAREERS</a>
            </li>
          </ul>

This will apply auto margin to both left and right sides, effectively centering the content.

Check out this centered bootstrap nav on CodePen for reference.

Answer №2

To easily center elements, simply include the following code snippet:

<div class="d-flex col-xl-12 col-lg-12 col-md-12 col-sm-12 col-xs-12 bg-primary justify-content-center">

This will create a flex box with justify-content-center to help align your items properly:

https://i.stack.imgur.com/DuSQm.png

Answer №3

.navBar2{
display:flex;
justify-content:center;
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8>
    <meta http-equiv="X-UA-Compatible" content="IE=edge>
    <meta name="viewport" content="width=device-width, initial-scale=1.0>
    <title>Document</title>

</head>


<body>
    <section class="navbarSection">
        <div class="container-fluid">
            <div class="row">
                <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-xs-12">
                    <div class="navBar2">
                        <nav class="navbar navbar-expand-lg bg-white paddingo">

                            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
                  <span class="navbar-toggler-icon"></span>
                </button>
                            <div class="collapse navbar-collapse" id="navbarText">
                                <ul class="navbar-nav mr-auto">
                                    <li class="nav-item  ">
                                        <a class="nav-link firstLink" href="#">WHO WE ARE <span class="sr-only">(current)</span></a>
                                    </li>
                                    <li class="nav-item ">
                                        <a class="nav-link " href="#">OUR SERVICES</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link " href="#">OUR PROJECTS</a>
                                    </li>

                                    <li class="nav-item">
                                        <a class="nav-link" href="#">CONTACT US</a>
                                    </li>

                                    <li class="nav-item">
                                        <a class="nav-link" href="#">CAREERS</a>
                                    </li>
                                </ul>
                            </div>
                        </nav>
                    </div>

                </div>
            </div>
        </div>
    </section>
</body>

</html>

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 best way to organize large amounts of data into an array?

I am currently working on developing a unique version of wordle using javascript and html. In order to do this, I require a comprehensive list of all possible wordle words stored in an array format. Although I have the words listed within a document contai ...

javascripthtmlvisual-studio-codewordle-game

Display HTML elements that are specifically <p> nodes

I am currently experimenting with HTMLParser to extract and print only the contents enclosed in "p" tags from an HTML document, excluding any other content within different types of tags. from HTMLParser import HTMLParser class MyHTMLParser(HTMLParser): ...

pythonhtml

Displaying Data in a Table

In my current setup, I have a table that receives data from a form through JavaScript. The code is as follows: <div class="row"> <div class="span*"> <table id="production" class="table table-bordered" style="margin:10px auto;bor ...

javascripthtml

What is the correct way to integrate HTML input elements into JavaScript code without encountering a type error?

I'm having some trouble with this code snippet. It's my first time coding and I can't figure out what's causing the issue. The error message I'm receiving is: "TypeError: Cannot read properties of null (reading 'value&ap ...

javascripthtml

Styling with CSS: How to Show an Absolutely Positioned Element in Google Chrome

I'm currently working on a CSS design that involves positioning an image within a span tag. Here's the CSS code I have: .dc-mega-icon { background-image: url(...); display: inline-block; position: absolute; top: 18px; width: ...

htmlcssimagepositionabsolute

Obtain the identifier of a div within nested HTML components by utilizing jQuery

How do I retrieve the id of the first div with the class: post, which is "367", using jquery in the given HTML code: <div id="own-posts"> <span class="title">Me</span> <div class="posts_container"> <div class="post"& ...

javascriptjqueryhtml

Combining 2 divs harmoniously

I have a set of HTML div elements that are styled using the following CSS: div{ width:250px; height:250px; display:inline-block; border-radius: 10px; margin:10px; background:#2E2922; vertical-align:top; } In my HTML, these div ...

htmlcss

ISO 8 takes a different approach by disregarding the meta viewport tag and autonomously adjusts the website layout to

<meta name="viewport" content="width=device-width,initial-scale=0"> I am facing an issue with my code not running on iPhone 6 and causing a problem with the responsiveness of my site. Any suggestions on what steps I should take? The site is constru ...

cssiphonehtmltwitter-bootstrapiso

Populate the div with the URL parameter only when another span element is empty after a specified time interval using setTimeout

When displaying a person's name on a page, there are two different methods to consider. It can be extracted from the URL or retrieved from an email form in the CMS used. However, these two approaches sometimes conflict with each other. Currently, I h ...

javascriptjqueryhtmlcss

Using Jquery to duplicate a row from one table and insert it into another table

Recently, I've dived into the world of jQuery and JavaScript with the goal of creating a simple app. The main functionality I'm trying to implement is the ability to copy a row from one table to another and then delete the original row when a but ...

javascriptjqueryhtml

The API response was blocked due to the CORS header "Access-control-allow-origin."

I have an index.html file that is used for making HTML and Ajax calls. When I run the file through localhost, the API works perfectly. However, if I directly open the index.html file in Google Chrome or Mozilla Firefox, I encounter a CORS (Cross-Origin Re ...

javascriptphphtmljquerylaravel

Making the switch from lazy-loaded images to `loading="auto"` once the page has finished loading

I'm exploring a new approach to implement lazy loading of images on a CMS (Sitecore) website, and I have some concerns about potential issues that may arise since I haven't come across any examples of this method being used before. The main goal ...

htmlimagelazy-loading

AngularJS has the ability to handle the value of one input based on the value of another input

How can I ensure that if one input has a value, the other must also be filled in AngularJS? I'm looking for the best approach to handle this requirement in an angular way. Any suggestions? Below is my code: <div class="form-group recipe_item" ng ...

htmlangularjsinput

Is there a way to allow an HTML page rendered by node.js to communicate back to its corresponding node.js file?

I am currently in the process of developing a registry system using node.js and HTML. However, I have encountered an issue where my HTML page is rendered by node.js, but when trying to call it back to the node.js file, it appears that the JS file cannot be ...

javascripthtmlnode.jsazure-sql-database

Optimal method for identifying all inputs resembling text

I'm in the process of implementing keyboard shortcuts on a webpage, but I seem to be encountering a persistent bug. It is essential that keyboard shortcuts do not get activated while the user is typing in a text-like input field. The approach for hand ...

javascriptjqueryhtml

Vue.js - Problem with loading image on screen

Although I have experience with React, I am currently facing the challenge of using Vue for a code assessment for the first time. My struggle lies in creating a reusable image component with WAI-ARIA accessibility. Despite my efforts, I cannot get the imag ...

htmlimagevue.js

As soon as I insert an image, the text on the right automatically moves to the bottom

I'm going crazy over this issue. My navigation bar has three div elements, each with text aligned both vertically and horizontally at the center. However, when I insert an image (an SVG icon of a zoom lens) before the "search" text, it shifts the tex ...

htmlcssimageflexboxvertical-alignment

Is there a way to adjust the speed of the transitions between animations?

I've been experimenting with ways to increase the time between animations in my cycle. Adjusting the duration of the keyframes animation hasn't yielded the desired effect. span { animation: rotateWordsFirst 15s linear infinite 0s; ...

cssanimation

What is the best way to display a child div without impacting the position of other elements within the same parent container?

As I work with a div html tag within a login form, encountering an error inside this form has presented a challenging issue. The error div sits at the top of its parent div, and ideally, upon activation, should remain within the form div without disrupting ...

javascripthtmlcss

Strategies for Locating XPath Using Text Content within Table Cells (td / tr)

Need help with searching for specific text within a large HTML table of emails and selecting a button within the element? You can easily find the table body via XPATH by using: //*[@id="reportList"]/tbody Within this table, there are multiple rows (tr). ...

pythonhtmlseleniumselenium-webdriverselenium-chromedriver