Can anyone explain why my navbar text is not aligning in the center?

I am struggling to center the text in one of my two navbars. As a newcomer to both navbars and bootstrap, I am having difficulty figuring out why I can't achieve this. Should I be making changes on the bootstrap side or can it be fixed within the <style> tags? Any help would be greatly appreciated. Thank you.

<nav class="navbar navbar-expand-md navbar-dark" style="background-color: #CBB677">
    <ul class="nav navbar-nav navbar-center">
        <li class="nav-item active">
            <a class="nav-link" href="CoordinatorHomePage.aspx" >COORDINATORS</a>
        </li>
        <li class="nav-item active">
            <a class="nav-link" href="TeacherHomePage.aspx">TEACHERS</a>
        </li>
        <li class="nav-item active">
            <a class="nav-link" href="ParentsHome.aspx">PARENTS</a>
        </li>
        <li class="nav-item active">
            <a class="nav-link" href="StudentHome.aspx">STUDENTS</a>
        </li>
    </ul>
</nav>
htmlcssbootstrap-4

Answer №1

In my opinion, using Bootstrap can be unnecessarily challenging. I prefer working with raw CSS, JS, and HTML, but I'm still happy to assist.

Here is an example that Bootstrap provides on their website:

<ul class="nav justify-content-center">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

This should provide the solution you are seeking.

If you prefer, you can also create a navbar using pure HTML/CSS/JS:

<!--index.html-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" src="index.css">
    <title>Navbar</title>
</head>
<body>
    <navbar>
        <button onclick="window.location.href = '#'" class="active">Something</button>
        <button onclick="window.location.href = '#'">Something else</button>
        <button onclick="window.location.href = '#'">A third thing</button>
    </navbar>
</body>
</html>

/* index.css */
navbar {
    width: 100%;
    height: 10%;
    background-color: #d4d4d4;
    position: fixed;
    top: 0px;
    left: 0px;
    text-align: center;
}

navbar>button {
   color: #00ccff;
}

navbar>button.active {
    color: #00ccff;
}

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

lines stay unbroken in angular

I am encountering an issue when I execute the following code: DetailDisplayer(row) : String { let resultAsString = ""; console.log(row.metadata.questions.length); (row.metadata.questions.length != 0 )?resultAsString += "Questions ...

htmlangulartypescript

Unable to horizontally center ul element within Materialize navigation content

Struggling to center nav-content by using the center option Hoping for it to have this appearance. Unfortunately, applying it directly to the ul attribute doesn't yield desired results. Instead, it ends up looking like this. This is the code snipp ...

htmlcssbootstrap-4materializenav

Creating HTML code that is optimized for mobile devices

My front end design is based on the CSS stylesheet from W3Schools.com, which includes a class property called "w3-rightbar" for adding a thick right border. However, I encountered an issue where I needed to hide this "w3-rightbar" specifically on mobile vi ...

htmlcssw3-css

Setting objects in parallel in HTML involves using the display property along with the value

Creating two sign-up forms using HTML and CSS Bootstrap. Want them to be parallel, tried using the position tag but there is unwanted space created between the forms. View the output How can I prevent this circle of space from being generated? <main cl ...

htmlcsstwitter-bootstrap

Limits in exporting data from an html table to a pdf document

The output on the page only displays 17 out of 60+ rows of data. I've searched online for a javascript function to help with this, but unfortunately, I couldn't find one. Here is a sample code snippet: <script type="text/javascript"> ...

javaphphtmlcss

Using jQuery, how can I add value to every input when the option is changed?

I need help changing the values of all input:text elements based on selections from a select menu. Specifically, I want to change only the matched td.class values from the data-pset attribute inside the <select>. As a beginner in jQuery, I can only ...

javascripthtmljquery

Having trouble making jQuery code disable input field based on checkbox status

Is there a way to automatically disable the price input field once the checkbox is checked and clear any existing text? I seem to be having trouble with my current code.. <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <scr ...

javascriptjqueryhtml

A single background image split into several div elements

I am facing an issue regarding the background image placement in multiple divs. When I set the position to fixed, the image repeats when I resize the screen. However, changing it to absolute causes each div to have its own image. Is there a solution to fi ...

htmlcss

React JS progress circle bar is a simple and effective way to visualize

Currently, I am in the process of developing a progress circle bar that will function as a timer alongside sliders. Each slide is intended to have its own corresponding progress bar. While I have managed to create the bars individually, I am facing challe ...

javascripthtmlcssreactjsslider

Placing a pair of labels onto a bootstrap form while ensuring column alignment

I'm trying to format a form according to my UI/UX specifications, where there is a parent label and two sub-labels. Can this be achieved using Bootstrap? https://i.stack.imgur.com/J8wJZ.png However, I'm struggling to align the columns and rows ...

htmlcsstwitter-bootstrapforms

Cannot Get jQuery .flip() to Work Automatically Every 2 Seconds

There are 3 words that I want to rotate on their x-axis every 2 seconds (repeating). Using jQuery: $(function () { count = 0; wordsArray = ["Innovation", "Creativity", "Success"]; setInterval(function () { count++; $("#words").text(wordsArray[co ...

javascriptjqueryhtml

Creating a Mobile-Friendly Centered Navigation Bar with Scroll Functionality Using Bootstrap 4 Alpha 6

Currently, I am working with the standard Bootstrap navbar that has the class="justify-content-center". My goal is to make this navbar scrollable when the elements do not have enough space. The issue I'm facing is that I can only scroll to the right a ...

csstwitter-bootstrapbootstrap-4twitter-bootstrap-4

Trigger an immediate Primefaces update using a JavaScript function

Having an issue where: upon page load, I attach a 'keypress' event listener to every input field on the page. The goal is to check for special characters in the input and remove them. Below is the function that executes on page load: function ...

javascripthtmlajaxprimefaces

Deciding on the proper character formatting for each individual character within the RICHT TEXT EDITOR

After browsing numerous topics on Stackoverflow, I was able to develop my own compact rich text editor. However, one issue I encountered is that when the mouse cursor hovers over already bold or styled text, it's difficult for me to identify the styl ...

javascriptjquerycsshtmlrich-text-editor

Incorporating Only XSD Files into an HTML Input Tag: A Simple Guide

Is there a way to restrict a file input element to only display XSD files? I attempted the following: <input type="file" accept="text/xsd" > Unfortunately, this method is not working as it still allows all file formats to be disp ...

javascripthtmlangular

Tips for creating responsive elements with a z-index of 1 in CSS

I have implemented the code provided in a codepen tutorial, but I replaced the world map image with a USA map. However, the dots are not responsive due to the z-index=1 specified on them. I experimented with vh, vw, and percentages, yet when I resize my s ...

javascripthtmlcsssass

Aligning images and input fields vertically with relative measurements

I'm looking for a way to vertically position two images, one on the left and one on the right, so that they are centered between labels and input fields within a containing div. Is it achievable using only relative lengths? Check out this jsfiddle fo ...

cssvertical-alignment

Obtaining User's Geolocation without the need for an index.html file

Greetings! I am in the process of developing a web application that needs to track user location upon button click. My choice for this project is the M.E.R.N stack, and based on the tutorials I have watched so far, there seems to be no need for an index.ht ...

node.jsreactjshtmlgoogle-mapsgoogle-geolocation

Confirmation dialog with user-defined button text

When the confirm prompt box is used, it typically displays "ok" and "cancel" buttons. I am looking to customize the label text for the buttons to read as Agree and Not Agree instead. If you have any suggestions on how to achieve this modification, please ...

javascripthtml

Bootstrap allows you to create a responsive grid

I need assistance with making my bootstrap grid responsive for multiple input search filters on mobile devices. Currently, the layout is not showing correctly on mobile phones. On desktop, the output looks fine: https://i.stack.imgur.com/bKPUv.png Howev ...

htmlcssbootstrap-4