Attempting to align the navigation bar links in Bootstrap 4 to the center

I am struggling to align my links directly under the h1 header, but everything I try seems to fail. Here is my current code, any assistance or guidance would be greatly appreciated! This is the h1 tag:

<div class="container-fluid p-5 bg-success header-body text-center">
  <h1 id="high-credit-top-text">
    <a class="text-white" style="font-family: 'Lexend Deca', sans-serif;" href="hogkostnadkredit.php">Playaround.se</a>
  </h1>


<nav class="navbar navbar-expand-lg navbar-light bg-success">
  <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">
      <div class="container justify-content-center">
        <ul class="navbar-nav">
          <li class="nav-item active">
            <a class="nav-link text-white" href="playaround.php"><i class="fas fa-home"></i></a>
          </li>
          <li class="nav-item">
            <a class="nav-link text-white" href="nyheter.php">Nyheter</a>
          </li>
          <li class="nav-item">
            <a class="nav-link text-white" href="information.php">Infomartion</a>
          </li>
        </ul>
      </div>
    </div>
</nav>
htmlcssbootstrap-4

Answer №1

If you want to center the horizontal alignment of the .nav-item links, simply include the bootstrap class justify-content-center within the ul tag that has the class navbar-nav

<ul class="navbar-nav justify-content-center">
  <li class="nav-item active">
    <a class="nav-link text-white" href="playaround.php"><i class="fas fa-home"></i></a>
  </li>
  <li class="nav-item">
    <a class="nav-link text-white" href="nyheter.php">Nyheter</a>
  </li>
  <li class="nav-item">
    <a class="nav-link text-white"         href="information.php">Infomartion</a>
  </li>
</ul>

For Example

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="container-fluid p-5 bg-success header-body text-center">
  <h1 id="high-credit-top-text">
    <a class="text-white" style="font-family: 'Lexend Deca', sans-serif;" href="hogkostnadskredit.php">Playaround.se</a>
  </h1>
</div>

<nav class="navbar navbar-expand-lg navbar-light bg-success">
  <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">
    <div class="container justify-content-center">
      <ul class="navbar-nav justify-content-center">
        <li class="nav-item active">
          <a class="nav-link text-white" href="playaround.php"><i class="fas fa-home"></i></a>
        </li>
        <li class="nav-item">
          <a class="nav-link text-white" href="nyheter.php">Nyheter</a>
        </li>
        <li class="nav-item">
          <a class="nav-link text-white" href="information.php">Infomartion</a>
        </li>
      </ul>
    </div>
  </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

Missing icons and images from the Assets folder when the "/" or "'" is removed from the URL

While working on an admin web project with Codeigniter, I faced a peculiar issue that seems to only arise when I either remove "/" after hiding index.php or add "/" without hiding index.php. In this scenario, the icons go missing and even profile pictures ...

phpcodeigniterbootstrap-4

Hidden input field when inactive

Whenever I start typing in my input form, the text disappears after a moment. The only way to prevent this is by continuously pressing on a letter key on my keyboard. This issue began after I added a resizeInput attribute that adjusts the size of the inpu ...

jqueryhtmlcss

Ensuring complete height and width with no scrollbar in a Material UI React application

I'm attempting to create a page that fills the entire height of the screen without adding an undesirable scrollbar. When I say 100% height, I mean it should just fit the size of the screen. Here is a demonstration of the issue. The yellow highlighted ...

htmlcssreactjsmaterial-ui

Create a personalized keyboard layout for entering passwords with numbers using jQuery Mobile

As we work on creating a mobile application using jquery mobile and phonegap, we have a current requirement to display a password keyboard with numbers. We are wondering if it is possible to develop an Android-based password keyboard with a number keyboard ...

htmlcssjquery-mobile

Upgrade background image for high-resolution screens for optimal viewing

After encountering an issue with my background image appearing cloudy and stretched on retina-ready devices, I am seeking the best approach to replace it with a high-resolution version on such devices. Should I utilize media queries, incorporate JavaScri ...

cssmacosmedia-queriesretina-display

Exploring the concepts of Html5 semantic elements

After spending years programming websites with HTML 4, I finally decided it was time to upgrade my skills and transition to HTML5. Unfortunately, older browsers don't support HTML5, but I discovered a JavaScript file called "html5shiv" that can help b ...

html

Ways to style CSS for inactive checkboxes?

How can I easily change the CSS for disabled checkboxes in a grid to make them more visible for users? Technologies I prefer to use, ranked from most preferred to least: CSS JavaScript jQuery Other ...

htmlcsscheckbox

"Combining JSON, JavaScript, and HTML for dynamic web development

I am a junior computer programmer facing challenges with our JSON project. The objective is to store an object in local storage, but my HTML and JS code are not working as intended. It seems like nothing happens at all. Any suggestions or feedback would ...

javascripthtmljson

Attempting to understand how to effectively implement overflow: hidden

Here is a link to a demonstration showing how the text slides in and out from the left side of the container. I am currently working on resolving this issue. Do you think removing the display:table; property from the #right div would help??? <div clas ...

jquerycss

What is the best way to save newly added elements on a webpage that were submitted by the

I am looking for a way to save the changes made by users on my webpage so that they can navigate to different pages and come back without losing any added elements. These changes should be retained even when the user goes back to edit the webpage, but I pr ...

javascriptjqueryhtmllocal-storage

When using the Column width property in React Material UI, it may not automatically expand

I've been playing around with React Material UI Tables and I'm having trouble making the columns auto-expand without wrapping. I tried setting the 'width: auto' property in the <Table size="small" style={{ width: auto}}> ...

cssreactjsmaterial-uimaterial-design

CSS - Implementing responsive design to ensure optimal viewing experience on all devices

Card Matching Game Project Codepen Check out my CSS here, and find the rest of the code on Codepen since it's quite lengthy. const cards = document.querySelectorAll('.memory-card'); let hasFlippedCard = false; let lockBoard = false; let ...

htmlcss

Prevent form submission by using jQuery's replaceWith method when the input type is a submit button and the onClick event is triggered

Below is the HTML code snippet I am working with: <input class="button" name="save" onclick="$(this).replaceWith('<img src=http://www.example.com/images/ajax-loader.gif />');" type="submit" value="SUBMIT"> After clicking on the butt ...

javascriptjqueryhtmlformssubmit

Implementing icon display upon click in a Meteor application

Currently, I am in the process of developing an application using meteor and within one of the templates, I have the following code snippet. <h3> <b> <a class="viewed" href="/jobdetails/{{_id}}">{{title}}</a> </b> ...

javascriptjqueryhtmlcssmeteor

Is IE8 compatible with HTML5 and CSS3?

My client has requested their website to be developed using HTML5 and CSS3. However, it has come to my attention that IE6 and IE7 do not have full support for HTML5 and CSS3. The client claims that IE8 does support these technologies, but I need more inf ...

htmlcss

Django failing to detect empty URL configuration

Hey there! I'm new to this, and I was trying out a tutorial on py/django. The web server is up and running, but it's only showing the default page: https://i.sstatic.net/xnCrW.png Even though my urls.py has the default page set. urls.py from dj ...

pythonhtmldjangovisual-studio-code

Grid element content suddenly shifts when opened

I am facing a peculiar issue with my layout. When I specify grid-template-rows: 1fr 1fr and try to open the details element, instead of smoothly expanding downwards, it seems to "jump" into position. This odd behavior disappears when I use grid-template-ro ...

htmlcsscss-grid

Ensure that the horizontal navigation items are equally spaced apart

I've managed to align my longer navigation bar items horizontally instead of vertically, but I'm struggling to evenly space them alongside the shorter items within the container. Despite trying various solutions found through research, I have not ...

csswordpressmenunavigation

Issues with Monospace Google Fonts on JSFiddle are preventing them from displaying correctly

It's strange how monospace fonts from Google Fonts don't display properly on JSFiddle. Only sans-serif and serif fonts seem to be functioning correctly. ...

cssjsfiddlegoogle-font-api

Moving responsive table cell to a new line

Currently, I am faced with the challenge of embedding third-party content via dynamic means without any knowledge of Ajax or jQuery. My question is whether it's feasible to move a table cell onto a new line, essentially creating a new row. The embedd ...

htmlcsshtml-tablecss-tables