Tips for aligning the navbar logo at the center in Bootstrap 4 when there are navigation links positioned below

I'm having trouble centering the navbar logo with the nav-links below it. I've checked various posts on this issue, but they all seem to be using older versions of bootstrap. I am currently working with bootstrap 4.0.

Specifically, I would like the logo to be on a separate row from the links.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#"><img src="img/h-tech-logo-cropped.png"/></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
  <span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#">Home <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="#">About Us</a>
    </li>
    <li class="nav-item">
      <a class="nav-link disabled" href="#">Gallery</a>
    </li>
    <li class="nav-item">
      <a class="nav-link disabled" href="#">Contact Us</a>
    </li>
  </ul>
</div>

htmlcsstwitter-bootstrapbootstrap-4navbar

Answer №1

To achieve a centered navbar in Bootstrap 4, utilize the power of flexbox and auto-margin utilities. This method has been detailed in numerous "Bootstrap 4 Navbar Center" inquiries.

  • Make use of display:flex on the navbar and apply flex-column to stack content vertically.
  • Center the navbar items horizontally by using mx-auto for auto x-axis margins.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<nav class="navbar navbar-expand navbar-light bg-light flex-column">
    <a class="navbar-brand mx-auto" href="#"><img src="img/h-tech-logo-cropped.png"></a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" href="#">Home <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="#">About Us</a>
            </li>
            <li class="nav-item">
                <a class="nav-link disabled" href="#">Gallery</a>
            </li>
            <li class="nav-item">
                <a class="nav-link disabled" href="#">Contact Us</a>
            </li>
        </ul>
    </div>
</nav>

View a responsive demo on Codeply

Explore more queries related to "Bootstrap 4 Navbar Center":
How to align items left, center, or right in Bootstrap NavBar
Creating a Bootstrap 4 navbar with multiple rows
Techniques to centralize an element within a Bootstrap 4 Navbar
Guidelines for centering nav-items in Bootstrap

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

Setting a background-image using jQuery in Codeigniter can be done by following these steps

Currently, I am developing a project in Codeigniter. In my jQuery file, I have included code to set the background image of the body element: $('body').css('background-image','url(<?php echo base_url("assets/images/bg2.png");?& ...

phpjquerycsscodeigniter

"An error occurs when attempting to clear Rad Grid data with javascript: htmlfile: Invalid argument thrown

Hello, I am currently developing an ASP.NET application. I am facing an issue where I need to clear the data in a Rad grid upon button click using JavaScript. The code snippet that I have attempted for this is as follows: document.getElementById(&a ...

javascriptjqueryhtmlasp.netgridview

Spontaneously fluctuate image transparency

I'm in need of some assistance with an issue I'm facing. I have 5 images positioned using Bootstrap and I want to add a fade animation to them on page load. Below is the code snippet I've been using, which works fine, but I would like the im ...

javascriptjqueryhtmlcsstwitter-bootstrap

Creating an .htaccess configuration for managing case-sensitive file names

Today marked the official launch of my new website, but I've encountered some unexpected issues with the .htaccess file. Despite my best efforts to address them prior to going live, it appears that there are still unresolved problems. You can visit t ...

css.htaccess

Certain images are not being retrieved by Express on Linux, although they are functioning properly on Windows

When using a template to display HTML code, everything works smoothly on Windows. However, when transferring the code to a Linux machine, an issue arises - "Cannot GET /SmallVacImages/1.jpg". It seems that the index.html file can load images from the publi ...

javascripthtmllinuxexpress

What is the best method for creating uniform cards with different amounts of text that won't cause overflow issues?

At the moment, I have a container that acts as a boundary for a group of cards: .cards-container { display: flex; align-items: stretch; justify-content: center; flex-wrap: wrap; margin-top: 20px; border: 5px solid violet; } .card { ...

htmlcssreactjs

Is the target="_blank" attribute malfunctioning in Google Chrome?

Whenever I click on this text, it is supposed to display a base64 source image. However, this feature does not seem to be working in Chrome. The tag opens a new tab, but the href attribute is not present in the URL. Below is my HTML code: <div> & ...

javascripthtmlgoogle-chrome

Make sure to have the list available while choosing an item

I want to design a unique CSS element with the following characteristics: Include a button. When the button is clicked, a list of items (like a dropdown list) should appear. We should be able to select items by clicking on them, and the parent component s ...

cssreactjsdrop-down-menufluent-uifluentui-react

Automate the manipulation of a dynamically-generated table using Selenium and javascript

Is it feasible to use Selenium to select a menu item created primarily with JavaScript? The HTML tags for this table are only visible in the view source. <table id = "table_id"> <tr> <td> <script> *** </script> </ ...

javascripthtmlselenium

Updating pictures on Bootstrap's project showcase template

I attempted to modify the source of an image by clicking on smaller ones using bootstrap’s template found at . Despite my efforts, I have not been able to achieve the desired result. (Any help is greatly appreciated!) I included id="myImage" on the main ...

javascripthtmlcss

Value of an object passed as a parameter in a function

I am trying to use jQuery to change the color of a link, but I keep getting an error when trying to reference the object. Here is my HTML : <a onmouseover="loclink(this);return false;" href="locations.html" title="Locations" class="nav-link align_nav" ...

javascriptjqueryhtmlcss

Showcasing text behind an element with reduced opacity when the element directly above it is selected using rails, CSS, and jQuery

I have a password field on my page where the password is hidden, but I want users to be able to copy and paste the clear text version of the password on another website. In order to achieve this, I followed the instructions in an article titled Mask text, ...

javascriptjqueryhtmlruby-on-rails-3css

Two-column list using XSLT

I am seeking assistance with xsl transformation. The xml generated by SharePoint Server control is as follows: <rows> <row>A</row> <row>B</row> <row>C</row> <row>D</row> <row>E ...

jqueryhtmlcssxmlxslt

What is the best way to access attributes from a div element?

I am currently working on extracting attributes from within a div tag, specifically the custom attributes of the first child element. I am using web scraping techniques with Node.js and Puppeteer. My goal is to retrieve the custom attributes data-ticker, d ...

javascripthtmljquerycssnode.js

What is the necessity for including "overflow" in the code?

http://www.example.com/css/tryit.asp?filename=trycss_dropdown_navbar The link provided above showcases the practice background of a certain website. In the code on the left side, specifically under the style section, there is a "ul" element where the "ove ...

htmlcss

Display a DIV element using jQuery when two input values are identical

I have been trying to display a DIV if two input values are the same, following a similar question on Stack Overflow: How to compare two inputs and show a div. Even though I have copied the code snippet exactly, it doesn't seem to work when I test it ...

htmljquery

The font size of the textarea dynamically adjusts based on the size of the screen

Some strange behavior is occurring in the Android default browser when I set the width and height of a textarea to 100%. The font size of the textarea seems to increase based on the screen size, and even though I attempted to alert the font-size using jQue ...

javascriptjquerycsstextarea

What could be the reason for my post container not functioning properly?

I am facing an issue with my HTML and CSS code. The container is not displaying as expected, specifically the green bar that should appear below the image. I suspect that the container's auto attribute is causing it to overlook the content inside. Can ...

htmlcsspostcontainers

Is there a way to ensure that Jade automatically updates the HTML template when the linked CSS file is modified, using livereload and Grunt?

Currently, I am in the process of setting up Grunt to ensure that whenever a linked .css file undergoes a change, the jade template which is linked to the .css file also automatically reloads. However, I am facing challenges with compiling my jade template ...

cssexpressgruntjspuglivereload

How can EJS variables be utilized within HTML input fields?

I am facing an issue while trying to use a checkbox to redirect selected users to a new page. I am looking for a solution on how this can be achieved, especially when using mongodb to store the information. Below is my current code snippet: Firstly, I ren ...

htmlnode.jsexpress