Position content to the left, center, and right in a Bootstrap 4 Navbar

In order to achieve the desired layout with the brand logo on the left, menu items centered, and buttons aligned to the right, I attempted to use the flexbox approach. However, I encountered issues with aligning the center items properly, as well as dealing with the wide space around the clickable brand logo.

Link to JS Fiddle

<nav class="navbar navbar-light navbar-expand-md bg-faded justify-content-center">
            <div class="container">
                <a href="/" class="navbar-brand d-flex w-100 mr-auto"><img src="assets/logo/" alt="logo"></a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsingNavbar3">
    <span class="navbar-toggler-icon"></span>
</button>
                <div class="navbar-collapse collapse w-100 ml-auto" id="collapsingNavbar3">
                    <ul class="navbar-nav w-100 justify-content-center">
                        <li class="nav-item active">
                            <a class="nav-link" href="#">How it works</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Become a tutor</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Pricing</a>
                        </li>
                    </ul>
                    <ul class="nav navbar-nav ml-auto w-100 justify-content-end">
                        <li class="nav-item">
                            <a class="btn btn-link" href="#">Sign In</a>
                        </li>
                        <li class="nav-item">
                            <a class="btn btn-primary" href="#">Sign Up</a>
                        </li>
                    </ul>
                </div>
            </div>
</nav>

So after some time has passed, here's how I would now address my own question:

<nav class="navbar navbar-light navbar-expand-md bg-white justify-content-center main--navigation dark-header">
    <a href="#" class="navbar-brand d-flex w-50 mr-auto">
        <img src="assets/images/logo-header.svg" class="navigation__logo" alt="Logo" />
    </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsingNavbar">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="navbar-collapse collapse w-100" id="collapsingNavbar">
        <ul class="navbar-nav w-100 justify-content-center">
            <li class="nav-item active">
                <a class="nav-link" href="#">Browse</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">How it works</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Become a tutor</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Prices</a>
            </li>
        </ul>

        <ul class="nav navbar-nav ml-auto w-100 justify-content-end">
            <li class="nav-item dropdown no-arrow mx-1 nav-link px-0">
                <button id="bookmarksDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" type="button" class="btn btn-outline-secondary btn-outlined" data-original-title="Bookmarks"><img src="assets/icons/bookmark-header-dark.svg"></button>

                <div class="dropdown-list dropdown-menu dropdown-menu-right" aria-labelledby="alertsDropdown">
                    <h6 class="dropdown-header">
                        Bookmarks
                    </h6>
                </div>
...
htmlcsstwitter-bootstrapbootstrap-4

Answer №1

The addition of that container div following the nav section causes the loss of the flexbox attributes. Additionally, setting the logo with the "w-100" class forces it to take up all available width. By removing these elements, I was able to achieve a nicely aligned navbar.

<nav class="navbar navbar-light navbar-expand-md bg-faded justify-content-center align-items-center">
    <a href="/" class="navbar-brand p-0"><img src="assets/logo/" alt="logo"></a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsingNavbar3">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="navbar-collapse collapse w-100 ml-auto" id="collapsingNavbar3">
        <ul class="navbar-nav w-100 justify-content-center">
            <li class="nav-item active">
                <a class="nav-link" href="#">How it works</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Become a tutor</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Pricing</a>
            </li>
        </ul>
        <ul class="nav navbar-nav ml-auto w-100 justify-content-end">
            <li class="nav-item">
                <a class="btn btn-link" href="#">Sign In</a>
            </li>
            <li class="nav-item">
                <a class="btn btn-primary" href="#">Sign Up</a>
            </li>
        </ul>
    </div>
</nav>

Check out this interactive demo for the final result.

Answer №2

Here is a sample of my work that demonstrates the Bootstrap classes for content justification within a single div. Additionally, I have implemented functionality to show/hide elements based on screen resolution using JavaScript; this enhances the user experience by ensuring smooth transitions once the page has fully loaded.

@media only screen and (max-width: 991px) {
  .logo {
    display: flex;
  }
  .collapse .navbar-brand {
    display: none
  }
}

@media only screen and (min-width: 992px) {
  .logo {
    display: none;
  }
  .collapse .navbar-brand {
    display: none;
  }
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<nav class="navbar navbar-expand-lg navbar-light bg-light d-flex ">
  <a class="navbar-brand logo" href="#">Navbar</a>

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

  <div class="collapse navbar-collapse justify-content-between" id="navbarSupportedContent">
    <a class="navbar-brand" href="#">Navbar</a>
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        Dropdown
                    </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>

</nav>

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

The method provided by the FullScreen API is not effective in cancelling the fullscreen mode

After testing my code in Google Chrome, I encountered the following error message: Uncaught TypeError: Object #<HTMLDivElement> has no method 'webkitCancelFullScreen' Interestingly, I also received a similar error while running the code i ...

javascripthtmlfullscreen

Troubleshooting Problems with Uploading Images through a React-Based Web Browser Interface

I'm currently working on allowing users to upload multiple images using React and then saving them to a server. One issue I've encountered is that sometimes when I click choose image, it works fine, but other times it does not. The same inconsis ...

javascriptcssreactjsimage

How can we focus href on a <div> using CMS in PHP?

I am currently in the process of learning PHP and simultaneously tackling a redesign of a custom CMS. The CMS is written in PHP, and I have already revamped the default menu using CSS to incorporate a side slide effect. However, my next challenge is to en ...

phpjqueryhtmlhreftarget

Is there a method in AngularJS to submit form data when the input fields are pre-populated using a GET request?

How do I submit form data in AngularJS? I have a div that populates the input field from a GET request. Now, I want to send this data using a POST method. How can I achieve this? Below is the form div: <div class="row" ng-app="myApp" ng-controller="myC ...

javascriptjqueryhtmlangularjs

Steps to create a div with a z-index of 1 that fills the entire height:

Looking at the image, I have a sidebar that opens over other elements (blue color) using z-index = 1. When the sidebar is open, I want to hide all other elements except for the sidebar. However, towards the end of the sidebar, I can still see other element ...

htmlcss

Addressing the status bar gap issue on the iPhone X with Cordova for iOS 11.0

After receiving helpful feedback on my previous Cordova question regarding status bars, I've encountered a new issue with the iPhone X on iOS 11.0. I came across this thread: Users are reporting a white bar appearing specifically on the iPhone X run ...

ioscssiphonecordova

Having Trouble with Font Awesome Icon Loading in Search Box

Currently, I am working on a website located at . However, I am facing an issue where the font awesome icon is not loading properly and is only displaying a square. I have thoroughly reviewed the CSS and cannot identify any conflicting elements. Any assis ...

htmlcsswordpressfontsicons

Keeping a sidebar's height consistent with a responsive square in Bootstrap 4

I have set up my design as follows: I've created a responsive image box that functions as a square using a pseudo element :after with the CSS property padding-bottom: 100%; The challenge I'm facing: I'm attempting to place a sidebar nex ...

htmlcsstwitter-bootstrapflexboxbootstrap-4

Checkbox: Customize the appearance of the root element

I am trying to modify the root styles of a Checkbox component, but it is not working as expected. Here is my code: <CheckboxItem onChange={()} checked={isChecked} label="Show Checkb ...

csstypescriptcheckboxmaterial-uistyles

Adding multiple checkboxes to a single database field

Looking for a way to insert multiple checkbox values into one database field in a comma delimited format. For example, if the user selects checkbox one and checkbox two, I want the database input to be "tickOne, tickTwo, etc." Does anyone have suggestions ...

javascriptjqueryhtml

Design a row with two columns of the same height - one containing an image, and the other a scrollable

Can anyone provide guidance on creating two responsive Bootstrap 4 columns with equal height, where one column contains an image and the other displays a scrollable list? Check out this fiddle (please note that I want to ensure the list group does not exc ...

jqueryhtmlcsstwitter-bootstrapbootstrap-4

Exploring the semantic-ui dropdown menu feature in Chrome

When I first started learning to code with semantic-ui framework, I noticed a difference in behavior in Chrome compared to other browsers. The pointing menu on the left element (such as the search box) breaks down in Chrome, whereas it displays correctly i ...

htmlcssgoogle-chromemenusemantic-ui

Modifying one array is causing modifications to another array in JavaScript and vice versa

I've implemented a set using different function constructors in the following code: // Set constructor for unique elements function SetJs() { collection = []; this.has = (value) => { return collection.indexOf(value) !== -1; } // Add ...

javascripthtmlset

Issues arise when attempting to resubmit a PHP+JQuery+AJAX form with new values

I'm having trouble understanding why my form isn't refreshing after changing the values. Let me explain further, I have a password recovery form where users enter their email address. The form is processed in PHP using AJAX and displays a valida ...

phpjqueryhtmlajaxforms

Issues arise with the Node EJS module due to the malfunction of the include

Struggling with incorporating HTML snippets into my index.html, even after reviewing the EJS documentation. Directory Structure: project -public --assets ---css ---images ---js --Index ---index.html + index.css and index.js --someOtherPageFolder -views - ...

javascripthtmlnode.jsexpressejs

Thymeleaf Checkbox not appearing correctly

Within my Thymeleaf templates with Bootstrap, I have successfully implemented a checkbox. Below is the code snippet used to incorporate the checkbox into the HTML templates: <td> <input type="checkbox" name="products&qu ...

htmlcssbootstrap-4thymeleaf

I'm curious as to why styled components weren't working before

I'm attempting to utilize the before on styled components in React, but it doesn't seem to be functioning correctly. Prior to adding before, the background image was displayed, but after its inclusion, the image is no longer showing up; import st ...

javascripthtmlcssreactjs

Issues with inline display not being rendered properly in HTML/CSS

I've been attempting to place an image and an h1 element on the same line. After researching online, I attempted using display:inline; for both the parent div element as well as each individual element. This is my current code: <div style="displa ...

htmlcss

Tips on aligning two divs horizontally on the same line

doc.html .column { background-color: orange; width: 75%; vertical-align: top; display: inline-block; height: 200px; } .nav { vertical-align: top; display: inline-block; width: 25%; background-color: lightgreen; height: 200px; } * { ...

htmlcss

Updating a class within an AngularJS directive: A step-by-step guide

Is there a way to change the class (inside directive) upon clicking the directive element? The current code I have updates scope.myattr in the console but not reflected in the template or view: <test order="A">Test</test> .directive("test", ...

javascripthtmlangularjsangularjs-directive