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

Retrieve CSS height using Jquery, based on the declared value rather than the computed value

In a previous version of jQuery, the default behavior was different. When I use .css("height") and .height(), it gives me the computed height instead of what I actually want. I only need the height value if it is explicitly declared in the CSS for that ele ...

jqueryhtmlcss

Is there a way to turn off _moz_resizing on my browser?

I am currently using the nicEdit editor and have successfully integrated my own custom image resizing script. However, I am facing an issue where the default _moz_resizing feature in Firefox is interfering with my custom script. My goal is to have specifi ...

javascriptcssfirefoxresize

What is the method for executing code in HTML without needing a beginning or ending tag?

I have created a code that creates a shape which alternates between the colors green and blue, along with changing text from 'Hi' to 'Hello' when a button is clicked. Now, I am looking for a way to make this transition happen automatica ...

javascripthtmlcss

What could be causing my CSS div class to cover up the image in the background?

Within my HTML code, I have a <div> that contains a whole partial view: <div class="bkgImg"> /* content goes here */ </div> Inside this main <div>, there are two additional <div> elements - one without a class and one wi ...

htmlcss

What is the best technique to position a div at the bottom of a container that has a height of 100

After many attempts and searching for answers, I'm still struggling to figure out how to make the div float to the bottom with 100% height. I've even considered if it's an issue with Pure or something else entirely. It's definitely frus ...

htmlcssyui-pure-css

issue with using references to manipulate the DOM of a video element in fullscreen mode

My current objective is to detect when my video tag enters fullscreen mode so I can modify attributes of that specific video ID or reference. Despite trying various methods, I have managed to log the element using my current approach. Earlier attempts with ...

javascripthtmlreactjs

The utilization of bootstrap can lead to CSS interruptions

I am trying to create a navigation button that transforms from 3 horizontal lines to an X shape when clicked. var anchor = document.querySelectorAll('button'); [].forEach.call(anchor, function(anchor) { var open = false; an ...

htmlcsstwitter-bootstraptransition

`Considering various factors to alter class pairings`

I have defined a few style classes in my stylesheet as shown below: .left-align{ /* some styles here */ } .right-align{ /* some styles here */ } .validate-error{ /* some styles here */ } Depending on the type of data, I need to align the content ei ...

htmlcssangularjsvalidationng-class

What is the best way to center align two inner divs within a container?

I've been working on achieving the following design: https://i.sstatic.net/ckC3j.png Just to clarify, the dashed line represents a guide indicating that both .inner-a and .inner-b are aligned in the middle horizontally and vertically within the imag ...

csstwitter-bootstrapbootstrap-4

Encountering a CSS syntax error within CodeSandbox when attempting to input code within brackets

Why is it that I don't see syntax errors in VSCode, but always encounter them in CodeSandbox? What could be causing this discrepancy and how can I resolve it? Any advice would be greatly appreciated. Thank you in advance. Here's an example of th ...

javascriptcssvisual-studio-codesyntax-errorcodesandbox

"Troubleshooting Issue: JavaScript and jQuery onClick Event Not Functioning Properly

Whenever I try to click on the "php1" div, nothing happens. The location.reload() function is only a placeholder used for testing if the onClick event is functioning properly. <div class="php-task"> <h1>PHP</h1> ...

javascripthtmljqueryajax

Stylish date picker in CSS

Here is a design mockup along with my current solution. The issue arises when two numbers are adjacent to each other (either horizontally or vertically) as they should merge, illustrated in the mockup below. For example, when selecting numbers 48-49-50, t ...

jquerycss

Separate the iframe sessions

I am working with 6 iframes from the same domain but with different URLs and subdirectories. Each iframe sets a cookie with the same name but a different value using the HTML header "set-cookie". To prevent interference between these cookies, I need to fin ...

javascripthtmliframe

"Incorporate countless Bootstrap 4 carousels into one webpage for an enhanced user

I'm experiencing difficulties with the new Bootstrap 4. Can anyone provide guidance on how to incorporate multiple Bootstrap carousels into a single page? I've researched several websites, but most only offer solutions for Bootstrap 3. Your assi ...

javascripthtmlcssbootstrap-4

Adjust the width of the column to only contain fixed content and not span the entire page

Check out my solution on Plunkr to see the issue I'm facing: Plunkr I'm dealing with a layout that includes a menu on the left and page contents on the right. My goal is to have the menu fixed in place so that it doesn't move when the page ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Click here for a hyperlink with an underline that is the same width

As we work on our website, we want a unique feature where links are underlined when hovered over, with the underline staying the same width regardless of the length of the link text. How can we achieve this using CSS/jQuery/Javascript? ...

jqueryhtmlcss

Tips for creating a unique scroll page arrow button with adjustable thickness?

Seeking guidance on how to adjust the thickness of the arrow used as a scroll button on my website. I am aiming for a similar look to the arrow on this particular website: example of arrow To view my code, please visit: Codepen .next { position:absolut ...

javascripthtmlcss

Issues with button hover causing background transition difficulties

I've been trying to achieve a smooth background image transition upon hovering over my buttons. Despite searching for solutions in various posts, I haven't been successful in applying any of them to my code. I realize that J Query is the way to ...

javascriptjqueryhtmlcss

Optimal practices for localization

Looking to translate our site into multiple languages starting with one language but planning for more in the future. Considering the most effective way to accomplish this. The plan is to use subdirectories to organize the html files, with shared files su ...

phphtml

What is the optimal order for executing JavaScript, jQuery, CSS, and other controls to render an HTML page efficiently?

What are some recommended strategies for optimizing webpage loading speed? What key factors should be taken into consideration? ...

javascriptjqueryhtmlcsshtml-rendering