What is the best way to center a Bootstrap 4 navigation menu horizontally?

The alignment of the navigation is causing a bit of confusion. I've attempted to set the links to navbar-brand, but while this centers them, it also causes other elements to shift slightly downward. Additionally, it's puzzling why the select option is horizontally aligned with the navbar-brand while the links are not.

<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
    <a class="navbar-brand" href="/">Payload Examples</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarsExampleDefault">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a class="nav-link" href="/">Home <span class="sr-only">(current)</span></a>
        </li>

        {% if session['name'] %}
            <li class="nav-item active">
                <a class="nav-link" style="cursor: default;" href="#" >Oauth Type: {{ session['auth_type'] }} </a>
              </li>
              <li>
                <a class="nav-link" href="{{ url_for('logout') }}" id="logout"
                   data-busy="href">Logout <span class="sr-only">(current)</span></a>
              </li>
  		  {% else %}
              <li>
                <label for='submit-form' class="nav-link" >Login</label> <span class="sr-only">(current)</span>
              </li>
            </ul>
            <div class="navbar-collapse collapse w-100 order-3 dual-collapse2">
              <ul class="navbar-nav ml-auto">
                    <li class="nav-item active"> <a class="navbar-brand" style="cursor: default;" href="#">Choose OAuth Scheme:</a></li>
                    <form action="{{ url_for('login') }}" method="POST"><select class="form-control" id="authType" name="authType">
                    <option>Auth</option>
                    <option>Grant</option>
                    <option disabled>Code</option>
                    </select>
                    <input type="submit" id="submit-form" class="hidden" />
                  </form>
                <li>
                    <a class="nav-link mr-auto" target=_BLANK href="https://example.com/help">❔</a>
                </li>
              </ul>
            </ul>
            </div>
            {% endif %}
          </ul>
          {% if session['name'] %}
            <span class="navbar-text">
              Welcome {{ session['name'] }}
            </span>
          {% endif %}
        </div>
      </nav>
  

https://i.stack.imgur.com/3thFV.png

Answer №1

I have made adjustments to your code snippet by removing some elements and centering it horizontally. To achieve this, I utilized the align-items-center tag for horizontal alignment and the flexbox feature for dropdown decoration. If you wish to increase the width of the select tag, you can do so by adjusting the width property.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
    <a class="navbar-brand" href="/">Payload Examples</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarsExampleDefault">
        <ul class="navbar-nav align-items-center mr-auto">
            <li class="nav-item active">
                <a class="nav-link" href="/">Home <span class="sr-only">(current)</span></a>
            </li>

            <li class="nav-item active">
                <a class="nav-link" style="cursor: default;" href="#" >Hii</a>
            </li>
            <li>
                <a class="nav-link" href="{{ url_for('logout') }}" id="logout"
                data-busy="href">Logout <span class="sr-only">(current)</span></a>
            </li>
            <li>
                <label for='submit-form' class="nav-link m-0" >Login</label> <span class="sr-only">(current)</span>
            </li>
        </ul>
        <form method="POST" class="d-none d-md-flex">
            <a class="navbar-brand" style="cursor: default;" href="#">Choose OAuth Scheme:</a>
            <select class="form-control mx-3" id="authType" name="authType">
                <option>Auth</option>
                <option>Grant</option>
                <option disabled>Code</option>
            </select>
            <input type="submit" id="submit-form" class="btn btn-secondary">
        </form>
    </div>
</nav>

<script src="https://code.jquery.com/jquery-3.4.0.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

If you require any assistance, feel free to reach out to me via the comment section below.

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

Maximizing Bootstrap: Enabling dual dropdown options side by side on a single row

I am attempting to design a login form within a Bootstrap navbar dropdown. My goal is to have the bottom item display two items side by side in the same row (login/register), but I am struggling to achieve this. You can view what it currently looks like h ...

Make a diagonally slanted border for a cell

Is it feasible to create a table with diagonal borders using CSS or jQuery, similar to the one shown below? I would welcome any ideas on how this can be achieved. ...

What is the best way to implement coding for portrait styles specifically on the Kindle Fire device?

Any recommendations on how to specifically code the styles for portrait orientation solely on the Kindle Fire device? ...

Developing a perpetually scrolling container within a webpage

I am attempting to implement a scrollable div on my webpage that can continuously load content. I am currently using the following code snippet for this --> http://jsfiddle.net/cyrus2013/Qq85d/ $(document).ready(function(){ function loadMoreContent() ...

creating a customized grid layout with Bootstrap 5

Is it possible to create a layout similar to the one shown in this image using Bootstrap 5? In addition, I would like to include an image inside every third item. How can I accomplish this with the Bootstrap grid system? ...

Achieving a consistent border-radius effect during hover transitions

I designed a div that initially displays an image, but upon hovering over it, a second div with text and a solid colored background appears to mask the original content. To see what I'm talking about, check out my jsfiddle: 'Mask on Hover' ...

The fixed width setting for the alpha table column is not being recognized

Despite my efforts, the responsive bootstrap 4 table is not adhering to my fixed column width styles. <table class="table table-responsive table-sm table-striped table-hover"> <thead> <tr> <th> <input typ ...

Some font-awesome icons are not appearing on the screen

As a beginner in web design, I am experimenting with using font awesome icons in Angular 9 projects within list items. While some of the icons are displaying properly, others are not. You can see the issue in the attached image. To access the icons, I have ...

How can you use the transform property in CSS to rotate the dropdown arrow by 180 degrees and move it vertically by 2 pixels?

gradeexpanded:false, gradeOnClick: function (event) { this.gradeexpanded = !this.gradeexpanded; }, .dropdown-check-list { margin-left: 35px; displa ...

Text aligned at the center of the Y and X axis

I am looking to center my content along the Y axis instead of only on the X axis. To prevent the page from expanding beyond its current size, I have applied the following CSS: html { overflow-y: hidden; overflow-x: hidden } What I want to achieve is havi ...

Unusual phenomenon of overflow and floating point behavior

HTML and CSS Output Example: <div id="float_left"> DIV1 </div> <div id="without_overflow"> DIV2 </div> CSS Styling: #float_left{ float: left; width:200px; background-color: red; } #wit ...

Design a fresh color palette for the dark-light mode feature in Bootstrap using SASS

I am looking to create a dark mode for a website that uses Bootstrap. To achieve this, I need to add a new root class that includes all Bootstrap colors. Below is my colors.scss: $primary:#065FC6; $secondary:#263C5C; $success:#49C96D; $danger:#FD7972; $war ...

Accessing the current window dimensions using CSS

I'm experimenting with a way to set the background of the entire body element. <html> <head><head/> <body> <div class="wrapper"></div> </body> </html> How can I determine the height and width of the cu ...

Tips for ensuring that hover:after contents do not impact the positioning of the next element

I have created a photo list section on my webpage. <div id="main_post_photo"> <% for(var q=0;q<resolve.length;q++){ if(resolve[q].images.length>=1){%> <a href='/post/<%= resolve[q]._ ...

Tips for incorporating a Python script into a online project

I've been working on a Python code that detects faces and eyes using face recognition. When the code runs in PyCharm, it displays a camera window. Now I'm trying to figure out how to integrate this window into a webpage project written in HTML, C ...

Can you provide instructions on creating a marker like this in an unordered list?

Is there a way to create a bold line like this within a bulleted list easily? https://i.sstatic.net/pw8Zt.png I've tried using the border property, but it's not showing up correctly. Any quick and simple solutions for achieving this effect? Th ...

Is there a way to load and play different sounds on multiple audio players based on the length of an array?

I am attempting to load various sounds (.mp3 audio) on separate audio players that are displayed on a single HTML page. The number of players displayed on the screen is determined by the length of the array. In this specific example, I have 3 elements in t ...

Utilizing CSS float with dynamic height

Is there a way to achieve height:auto; for a parent element even when child elements are using float:left; or float:right? Solution for the Parent Element: #parent { width:100px; height:auto; padding-bottom:10px; background:#0F0; ...

Different div elements are clashing with each other when it comes to hiding and

Having added multiple div elements with different IDs, I am facing an issue where clicking one div displays it while hiding the others. I am looking for a solution to prevent conflicts between the divs. Any suggestions on what might be causing this problem ...

The Bootstrap Carousel is failing to respond as expected

Having some trouble incorporating a carousel on my landing page. I can see the first image, but the carousel isn't sliding to the next one. I copied the template from bootstrap-carousel, but even the data-bs-interval attribute isn't responding. M ...