Vertical Alignment of Navigation Bar in Bootstrap 4

I am trying to align the center of my navigation bar using the "Cover" Bootstrap 4 template. Please find the current code provided below.

<div class="cover-container d-flex h-100 p-3 mx-auto flex-column">
  <header class="masthead mb-auto">
    <div class="inner">
      <nav class="nav nav-masthead justify-content-center">
        <a class="nav-link active" href="#">Home</a>
        <a class="nav-link" href="#">Features</a>
        <a class="nav-link" href="#">Contact</a>
      </nav>

    </div>

  </header>

Preview

Check out the website here -

htmlcssbootstrap-4navbarcenter

Answer №1

Include mr-auto, ml-auto in the .masthead class

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
  
<div class="cover-container d-flex h-100 p-3 mx-auto flex-column">
  <header class="masthead mb-auto mr-auto ml-auto">
    <div class="inner">
      <nav class="nav nav-masthead justify-content-center">
        <a class="nav-link active" href="#">Home</a>
        <a class="nav-link" href="#">Features</a>
        <a class="nav-link" href="#">Contact</a>
      </nav>

    </div>

  </header>
</div>

Answer №2

Eliminate the use of float property for .nav-masthead 

.nav-masthead {
    /*float: right;*/
}

Alternatively, you can remove the class attribute from the HTML element 

<header class="masthead mb-auto"> 
    <div class="inner">
      <nav class="nav justify-content-center"> <!-- remove class "nav-masthead" -->
        <a class="nav-link active" href="#">Home</a>
        <a class="nav-link" href="#">Features</a>
        <a class="nav-link" href="#">Contact</a>
      </nav>

    </div>

  </header>

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

Extracting specific data from a JSON subnode within an HTML document

I have been attempting to retrieve product data (name, price, url), along with information on available sizes and colors, from a website that is formatted in JSON (https://www.bergzeit.de/marken/salewa/). However, I am struggling to locate the 'elemen ...

pythonhtmljsonscrapy

Issue with Next.js: Setting the width to 100vh prevents the height from being responsive on mobile devices

While I understand that using height: 100vh on mobile is generally discouraged for various reasons, I'm curious as to why height: 100vh paired with width: 100vh in Next.js doesn't produce the expected result. Instead of a full-height square, I en ...

cssnext.js

Ways to conceal components of an external widget on my site

I'm attempting to add a chat widget to my website and I'm looking to hide specific elements within the widget. The chat function is provided by Tidio, but I believe this applies to most widgets. My main goal is to conceal a button that minimize ...

javascripthtml

What's the CSS equivalent of Java's window.pack() method?

I'm relatively new to css and I'm attempting to create a border around a <div>. My goal is for the border to be limited to the size of the elements inside the div and adjust dynamically in proportion to any new objects that may appear or di ...

javascripthtmlcss

Incorporating an external script within a Next.js application

I've been having trouble incorporating an external JavaScript source into my Next.js application and I keep encountering the following error: Failed to execute 'write' on 'Document': It isn't possible to write into a documen ...

javascripthtmlreactjsnext.js

Instructions on making a Popup appear after a specified duration of mouse inactivity on a webpage

Hello, I am new to web development and could use some guidance on creating a popup window for users to enter their username and contact number. It should be able to store this information in a database and activate after the user has been idle for about 10 ...

jqueryhtml

Complex UL structure with nested LI items and both column and inline styling

I'm facing a challenge that seems insurmountable - I can't even begin to tackle it, so I don't have a polished solution to present. All I have is the source code and my goal. My task is to create a three-level UL structure. The top level sh ...

htmlcss

Utilizing JavaScript Modules to Improve Decoupling of DOM Elements

Currently, I am tackling portions of a complex JavaScript application that heavily involves DOM elements. My goal is to begin modularizing the code and decoupling it. While I have come across some helpful examples, one particular issue perplexes me: should ...

javascripthtmldom

What is the best way to establish a maximum limit for a counter within an onclick event?

I'm struggling to figure out how to set a maximum limit for a counter in my onclick event. Can someone help me? What is the best way to add a max limit to the counter of an onclick event? Do I need to use an if statement? If yes, how should it be w ...

javascripthtml

Utilizing the GROUP BY clause within an INNER JOIN operation, and presenting the results in an HTML dropdown menu

My database includes the following tables: Workers (id, total_pay, date_of_pay, projects_id) Payments (id, payment, date, projects_id) building_materials(id, pay_of_materials, date, projects_id) additional(id, add_pay, date, projects_id) All tables have p ...

phphtmlmysql

StorageLimit: A new condition implemented to avoid saving repetitive values in the localStorage

Is there a way to store the text of an li element as a localStorage value only once when clicked? If it already exists in localStorage, a second click should have no effect other than triggering an alert. I'm currently using an if statement inside a ...

javascriptjqueryhtmllocal-storage

Guide on making a dynamic table with HTML and CSS featuring square cells

Looking to design an 8x8 table using HTML and CSS, with the first column and row functioning as headers (ideally with header row height equal to header column width), and all table body cells being square. Shown below is the current HTML and CSS code: < ...

htmlcsshtml-table

CSS Element Overlapping Issue in Safari Browser

I am currently developing an audio player for my application that includes a pause/play button, next button, and back button. I have encountered a problem specifically on Safari where the back/pause buttons are overlapping each other. The play/pause button ...

javascripthtmlcssnext.js

"Enhancing Website Styling with Twitter Bootstrap's Border

Recently delving into the realm of Twitter Bootstrap, I find myself pondering on the best approach to incorporate a border around a parent element. Consider this scenario: <div class="main-area span12"> <div class="row"> <div cl ...

csstwitter-bootstrap

Enclose elements in a div using a jQuery each function

I have successfully parsed data from an XML feed to JSON, but now I want to wrap each part of the data within a div. Here is the code snippet I am working with: var newsDiv = $('<div class="news-feed">').appendTo($("body")); $(release ...

javascriptjqueryhtmleach

How to create vertical spacing between <a> elements within the same div using HTML and CSS

Currently, the layout in picture 1 shows how my content is displayed. I am looking to create spacing (bottom margin?) between the images like the example in picture 2. The two side-by-side blocks are separate DIVs, and the images within each line belong to ...

htmlcssimagemargin

Is there a way to incorporate a CSS file into this without explicitly mentioning the color?

I have successfully implemented a PHP solution for changing themes with a cookie that remembers the selected theme color when the user leaves the site. However, I now need to switch this functionality to JavaScript while still utilizing the CSS file. How c ...

javascriptphpcsscookiesthemes

Tips for making search results stand out

Hey there! I've got a search function set up to look for keywords in a database. I'm interested in highlighting those keywords and found a second function that I want to integrate into my search function. This is the current code for the search: ...

phpmysqlhtmlfunctionsyntax-highlighting

What is the best way to display an image right in the middle of the header?

My project consists of three main files - an HTML, a CSS, and a JS file. I have developed the HTML using the Bootstrap 5.1.3 framework. The issue I am facing pertains to the alignment of the clothing brand logo within the header section. Despite multiple ...

javascripthtmlcssbootstrap-5

What is the process for ensuring that an image is set as the submit button in an HTML form on IE 7?

My HTML form is designed with an action on a PHP script, and the submit button displays a custom image instead of the default grey. While this code works perfectly in Chrome, it fails to function properly in Internet Explorer 7. Do you have any suggestions ...

phphtmlimagebuttonsubmit