Align the items in the center of a Bootstrap navigation bar

I am looking to center the navigation menu items on my navbar. Currently, my navbar layout appears like this:

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

Specifically, I want "Users", "Admin", and "Records" to be centered within the navbar. Additionally, I would like to adjust the alignment of the logo to be more centered rather than at the bottom edge of the nav bar.

Here is the code for my navbar:

  <nav class="navbar navbar-expand-lg py-5 navbar-dark shadow-sm" style="background-color: #264653;width:100%;" >
  <div class="container">

      <div class="nameLogo">
              <span class="navbar-brand" style="display:flex;">
        
                    <img src="~/Images/InfoOrange.png" alt="ACR" width="70" height="70" class="d-inline-block align-middle mr-2" runat="server" />
      
               <span style="font-size:25px;color:white;"><span style="color:#e9c46a">City of Test</span><br />COMPANY OF TEST</span>

            </span>
        </div>
    <button type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler"><span class="navbar-toggler-icon"></span></button>

    <div id="navbarSupportedContent" class="collapse navbar-collapse justify-content-center">
      <div>
      <ul class="navbar-nav ml-auto">
       <%-- <li class="nav-item active"><a href="#" class="nav-link">Home <span class="sr-only">(current)</span></a></li>--%>
        <li class="nav-item dropdown nav-item active">
        <a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Users
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Details</a>
          <a class="dropdown-item" href="Depatment.aspx">Department</a>
     
         <%-- <a class="dropdown-item" href="#">Sections</a>--%>
        </div>
      </li>
          <li>&nbsp;</li>

              <li class="nav-item dropdown nav-item active">
        <a class="nav-link dropdown-toggle" href="#" id="admindropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Admin
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="NewBoxFolder.aspx">Box/Folder</a>
          <a class="dropdown-item" href="#">Configuration</a>

        </div>
      </li>
           <li>&nbsp;</li>
               <li class="nav-item dropdown nav-item active">
        <a class="nav-link dropdown-toggle" href="#" id="recordsDropDown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Records
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="FileUpload.aspx">BlockChain Upload</a>
          <a class="dropdown-item" href="#">Verify</a>
          <a class="dropdown-item" href="DocReport.aspx">Report</a>
            <a class="dropdown-item" href="BucketList.aspx">S3 List</a>
        </div>
      </li>
    </ul>
          </div>
                </div>
 
      <div class="sign text-right">
          <ul>
                 
        <li class="nav-item" style="margin-right:5px" >
            <a class="nav-link px-5" href="<%= ResolveUrl("~/Pages/SignOut.aspx") %>">Sign Out</a>
        </li>
 
          </ul>
      </div>

          <div class="welcome text-right">
          <ul>
                 
        <li class="nav-item" style="margin-right:5px" >
         Welcome  <%=userName %>
        </li>
 
          </ul>
      </div>
  </div>
</nav>

I attempted to use Bootstrap's Justify-center feature without success.

Any assistance with achieving this layout will be highly appreciated.

cssbootstrap-4flexbox

Answer №1

When designing a grid layout, think of it as assembling building blocks that act as "wrappers". To begin, consider the different components that will make up the menu.

In this scenario, there are four main wrapper sections:

  1. The navigation bar itself.

  2. The logo.

  3. The menu items (User, Admin, Records).

  4. The actions, like Sign Out.

Keeping these elements in mind, we can proceed with constructing our grid. Using Flex-box provides useful properties such as justify-content and align-items.

Here is an example following the suggested structure:

.row {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    display: flex;
    flex: 0 0 100%;
    flex-wrap: wrap;
    max-width: 100%;
    margin-top: calc(var(--bs-gutter-y) * -1);
    margin-right: calc(var(--bs-gutter-x) * -.5);
    margin-left: calc(var(--bs-gutter-x) * -.5);
}

.row > * {
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    padding-right: calc(var(--bs-gutter-x) * .5);
    padding-left: calc(var(--bs-gutter-x) * .5);
    margin-top: var(--bs-gutter-y);
}

.col-1 {
    flex: 0 0 auto;
    width: 8.33333333%;
}

.col-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
}

.col-8 {
    flex: 0 0 auto;
    width: 66.66666667%;
}

.no-gutters {
    --bs-gutter-y: 0;
    --bs-gutter-x: 0;
}

.navbar {
    padding-left: 15px;
    padding-right: 15px;
    background-color: #324c3b;
    color: #fff;
}

.nav-container {
    max-height: 100%;
    justify-content: space-between;
    align-items: center;
}

.nav-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    max-height: 100%;
    overflow: hidden;
}

.nav-logo > img {
    display: flex;
    height: auto;
    max-height: 100%;
    width: 100%;
    object-fit: contain;
}

.text-center {
    text-align: center;
}
<nav class="navbar row">
    <div class="nav-container row">
        <div class="nav-logo col-1">
            <img src="https://picsum.photos/150/100" alt="Logo" />
        </div>
        <div class="menu-container col-8">
            <div class="row no-gutters">
                <div class="menu-item col-4 text-center">
                    User
                </div>
                <div class="menu-item col-4 text-center">
                    Admin
                </div>
                <div class="menu-item col-4 text-center">
                    Records
                </div>
            </div>
        </div>
        <div class="actions-container col-1 text-center">
            <a href="#">Sign Out</a>
        </div>
    </div>
</nav>

Codepen link for reference: here.

Answer №2

  1. To center your items, simply add the class justify-content-center to the div with id navbarSupportedContent.
  2. I noticed that when I copied your code, the logo-text aligns perfectly with the other items on the same line.

Check out the JSFiddle example here!

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

CSS for a navigation menu with underlined links

I am attempting to create an underline effect when hovering over a link. However, I am facing an issue where the underline does not align perfectly with the line below it. Can someone please guide me on how to modify this CSS so that when the link is hov ...

htmlcss

Choose the initial p tag that includes an image, based on the content of another div

I am trying to figure out how to manipulate the code on my website: <div class="the-post-thumbnail"> <img src="" alt="" width="" height="" /> </div> <div class="post-body"> <p><img src="" alt="" width="" height="" ...

javascriptjqueryhtmlcss

Animation doesn't apply to child components, but is successful when applied to the parent component

I am working on animating the width of a child component's div. Here is my simple code: export const OuterComponent = () => { const sidebarCtx = useContext(SidebarContext); const style = "w-[100px] h-[60px] transit ...

cssreactjscss-transitionstailwind-css

Update the CAPTCHA, while also refreshing the entire registration form

JavaScript Snippet <script language="javascript" type="text/javascript"> function updateCaptcha() { $("#captchaimage").attr('src','new_captcha_image.php'); } </script> New Image Code <img src="new_ ...

javascriptphphtmlcss

The CSS counter fails to increment

In this unique example: h3 { font-size: .9em; counter-reset: section; } h4 { font-size: .7em; counter-reset: subsection; } h3:before { counter-increment: section; content: counter(section)" "; } h4:before { counter-increment: subsection 2; ...

csscss-counter

Continuous Div Carousel with Looping in jQuery

I have developed a basic carousel to cycle through a series of divs, but I am facing some issues. I want the carousel to loop continuously so that after reaching "slide 07," it goes back to "slide 01." Unlike using a carousel plugin, I prefer having an ove ...

javascriptjqueryhtmlcss

Angular CSS: ng-style applied to only one side, the other remains unaffected

I am working on an Angular application that requires a split screen with two halves, each displaying the same array values. The width and height values are set using a service and accessed by a controller. The style is applied using ng-style in the DOM. Ho ...

javascripthtmlcssangularjsng-style

How can you combine accessibility with absolute positioning?

Have you seen our unique hamburger design? https://i.stack.imgur.com/AmT6P.png A simple click will reveal a neat popup (the class "open" is added to a div). https://i.stack.imgur.com/yPydJ.png This cool effect is achieved using fixed positioning, but i ...

htmlcssaccessibilitywcagwcag2.0

How should white space be managed in Bootstrap 4 cards when incorporating responsive column classes - wrap elements inside divs or apply classes directly?

In Bootstrap 4, when applying a responsive column class like "col-sm-8" directly to a "div" with the class "card", whitespace is added between the card border and content. This can be seen in the highlighted yellow area in the image below. https://i.sstat ...

javascripthtmlcsstwitter-bootstrapbootstrap-4

What is causing the section to cover the navbar?

My content is overlapping the navbar on certain screen sizes, and I'm not sure why. Any ideas on how to fix this issue? Would wrapping everything in a container help? Currently using bootstrap v5.3.0-alpha1. Additionally, when I have a collapsed nav ...

htmlcsstwitter-bootstrapbootstrap-5

"Creating a 2-column layout for an unordered list using CSS Flex

After spending far too much time at work today pondering this issue, I've decided to turn to the collective wisdom of the internet. My dilemma involves a standard <ul> containing multiple <li> elements (currently 12, but this number could ...

htmlcssflexboxcss-grid

Footer displaying page numbering

I recently installed dompdf 0.83 and have been able to generate documents successfully. However, I am struggling to create a footer that displays the page number out of the total number of pages. Both css and script methods have not been effective for me s ...

cssdompdf

Troubleshooting a problem with the Bootstrap dropdown menu

Can anyone assist with an issue regarding Bootstrap 4.4.1? I am facing a problem where two consecutive dropdown links+menus are not displaying correctly. The second dropdown menu is showing the content of the previous link instead of its own, even though t ...

cssbootstrap-4

AngularJs - Customizable dynamic tabs that automatically adapt

Below is the HTML code snippet: <div> <ul data-ng-repeat ="tab in tabs"> <li data-ng-class="{active: tab.selected == 'true'}" message-key="Tab"> </li> </ul> </div> As shown ...

javascripthtmlcssangularjstwitter-bootstrap

Accelerate website loading

After testing the speed of my site's loading, I discovered that the reason for its slow speed is... Some proxy caching servers do not cache resources with a "?" in the URL. To address this issue, it is recommended to remove the query string and enc ...

htmlcssweb-development-server

What is the reason for ngbDatepicker converting numbers into dates upon input?

This specific HTML snippet has a unique feature: when the input number is set to "2", it automatically changes to 04.01.2001: <div class="input-group"> <input [ngClass]="{'invalid-input': editFor ...

angularbootstrap-4datepickerngb-datepicker

creating styles for css elements using equations

I am curious about defining CSS element dimensions before they are rendered without using offset and jQuery. Is it possible to echo PHP into the width/height or position values? For example: <?php $width = 290px; $altwidth = 290; ?> <style> ...

javascriptphpjquerycssposition

Tips for enabling autoplay for videos in Owl Carousel

I am facing an issue with implementing autoplay functionality for videos in an owl carousel. Despite trying different solutions found online, including this Owl Carousel VIDEO Autoplay doesn’t work, I haven't been able to make it work. Additionally, ...

javascriptjquerycssowl-carousel

Roundabout Navigation Styles with CSS and jQuery

My goal is to implement a corner circle menu, similar to the one shown in the image below: https://i.stack.imgur.com/zma5U.png This is what I have accomplished so far: $(".menu").click(function(){ $(".menu-items").fadeToggle(); }); html,body{ colo ...

javascriptjqueryhtmlcssmenu

The autocomplete feature is not displaying the data in the Bootstrap modal, only the list is visible

Having trouble with autocomplete in the bootstrap modal. The search for a book only shows black dots. Any solutions to this issue? As shown in the image, I've attempted to use CSS z-index but the problem persists. https://i.sstatic.net/e1ga9.png publi ...

javascriptjquerycodeigniterjquery-uibootstrap-4