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

Here is a unique rewrite:"Adjusting the prop of a Material UI Button component depending on screen size breakpoints can be achieved by utilizing

While using the Material UI Button component, I encountered an issue with conditionally determining the variant of the button based on screen size. Specifically, I want the variant to be 'outlined' on medium and larger screens, and no variant at ...

javascriptcssreactjsmaterial-uimedia-queries

Having Trouble with Click Function: Loading Pages into Div using Jquery/Ajax

Struggling to load content from other pages into a specific div by clicking on a URL link? Despite having previously executed the code successfully, it seems to redirect to the linked page instead of loading in the desired div. Even with an alarm set up as ...

javascriptphpjqueryhtmlajax

Invoke a method in a separate class

I am facing issues with passing variables to another file. I have checked my code multiple times but cannot find a solution. It keeps giving me an error in the function. onclick="limit();javascript:AyudaTipos(2)"/> The function is: function limit ( ...

javascriptphphtmlmysqlajax

Menu Toggle with Bootstrap 3

I have implemented two Bootstrap 3 navigation menus on a single page. One menu works fine when the toggle button is activated for responsiveness, but the other one doesn't work as expected. How can I resolve this issue? Below are the code snippets fo ...

javascriptjqueryhtmlcsstwitter-bootstrap

Rotating SVG graphics with a growth effect

Check out my CSS below: /* -------------------------- Base --------------------------- */ body { padding-top: 60px; background: #0f4e7a; } svg { margin: auto; display: block; width: 28%; } .star{ fill: #FFF; } /* ------------------ ...

csssvg

The quickForm Meteor encountered an exception in the template helper: There was an error stating that Recipes is not within the window

I'm having trouble getting the app to work on Meteor. The quickform is not connecting to my Collection. "Error: Recipes is not in the window scope" Can anyone offer assistance with this issue? Below is my quickform code: <template name="NewRe ...

javascripthtmlmeteormeteor-blazemeteor-autoform

What is the best way to replicate floats using flexbox?

Currently, I am exploring the possibility of using flexbox in a similar manner as floats. My main aim is to have one child element create a column on the right side, while the rest of the children form another column on the left side. The challenge is that ...

cssflexboxcss-float

Using Bootstrap columns within a PHP while loop

Encountering an issue and the code in question is shown below: <div class="col-md-4 text-center animate-box"> <a href="work-single.html" class="work" style="background-image: url(images/portfolio-2.jpg);"> ...

phpcsstwitter-bootstrapbootstrap-4

Output the result of a PHP script inside a JavaScript code

I'm having trouble getting the code below to display the success word. Can anyone spot what's wrong with it? Appreciate any help in advance. <script type="text/javascript"> function verification(){ var s = document.test_form.textfiel ...

javascriptphphtml

The CSS @media query is failing to function properly

I'm currently developing a web application similar to Spotify for my personal use, but I'm running into some issues with the @media query as it doesn't seem to be working correctly. Here is the CSS code: /* Screen Adapting */ @media (height ...

htmlcssweb-applicationsmedia-queries

two divs side by side with adjustable sizes

Is there a way to achieve a typical forum post layout with user info on the left and the post itself using CSS? I tried wrapping two divs around another div and using float, but encountered an issue where the floated div remains on the left instead of next ...

phphtmlcss

Troubleshooting issues with applying styles in Vue framework when configured with webpack

I'm facing an issue with setting up the Vue framework using webpack. Specifically, I'm having trouble with styles not being applied when included in the <style> tag within single file components. Despite following several tutorials on this ...

javascripthtmlvue.jswebpacksass

Exploring the Various Textures within the CANVAS 2D Context

Exploring new techniques for filling the canvas, I am currently trying to add texture to an object similar to the blobs from the blob example (http://www.blobsallad.se/). The challenge is that the current example is utilizing the 2D context without webGL i ...

htmlcanvaswebgl

Create a feature that allows users to dynamically add and remove image fields, with the ability to insert the selected images into a database

I'm currently using the following code and I am able to add attachments, but I'm facing an issue when trying to remove them. Can someone please help me with this problem? I tried adding an alert on the remove button and it seems to be working, h ...

phphtmljquerymysql

What is the method to ensure an element is displayed in Selenium WebDriver?

Looking for assistance on how to choose options from a dropdown when the element is not visible and has a boolean attribute? Here's the HTML code snippet: <select id="visualizationId" style="width: 120px; display: none;" name="visualization"> & ...

javascriptjqueryhtmlcssselenium

Having Trouble Scooting Down the Page on Mobile?

Hello there! I'm having a bit of trouble trying to figure out why the scrolling functionality isn't working on my small web app when it reaches the media breakpoint for mobile devices. If you'd like to take a look, here's the link to ...

htmlcssscroll

The art of uploading images with HTML and CSS

Looking for guidance on how to convert this image bubble so that users can upload their images during account creation. When the user hovers over the image bubble, it should display "Upload profile image" and prompt them to upload an image upon clicking. A ...

htmlcssimage

Using ng-class directive with condition in AngularJS

Here is a unique pop-up that allows users to encode item information. https://i.sstatic.net/sn9QZ.png I need to implement a feature where, if both the Foreign Currency and Conversion Rate fields have values, the Amount should be calculated by multiplying ...

htmlangularjsasp.net-mvc

Adapting iFrame height to accommodate fluctuating content height in real time (details included)

I have an embedded iframe that contains a form with jQuery validation. When errors occur, the content height of the iframe increases dynamically. Below is the script I use to adjust the height of my iframe based on its content: function doIframe(){ o = d ...

javascriptjqueryhtmliframe

Header with Sticky Behavior and Smooth Slide Down Animation

I am trying to achieve a scroll effect on my page where the header will move up when scrolling up, but at position 150 it should smoothly slide down and stay fixed at the top. I have tried various methods but haven't been able to get it right. Can som ...

jquerycsssticky