What is causing the nav-link items to not change to white in this dark Bootstrap 4 Nav?

Why are the nav-link colors not turning white in this dark Bootstrap 4 Nav code snippet? They should behave like Navbars, shouldn't they?

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="aac8c5c5ded9ded8cbdaea9e849c849b">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">

<main role="main">
  <div class="row navbar-dark bg-dark">
    <ul class="nav">
      <a class="nav-link" href="#">Growing</a>
      <a class="nav-link" href="#">Know</a>
      <a class="nav-link" href="#">What's New</a>
    </ul>
  </div>
</main>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="75171a1a01060107140535415b435b44">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>

EDIT: I've included a third item to clarify the horizontal layout.

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

Your knowledge of Bootstrap semantics could use some improvement.

  • Make sure to enclose your nav within <nav> tags.
  • Wrap your anchor tags in <li> elements.
  • Ensure you are using the correct classes with the <ul> tag.

It's important to note that there are non-responsive and responsive layouts in Bootstrap. The non-responsive layout keeps items horizontal, while the responsive layout shifts to a vertical orientation on smaller screens.

Here is an example of proper Bootstrap nav semantics for a non-responsive layout:

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c4a6ababb0b7b0b6a5b484f0eaf4eaf4">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>

<main role="main">
  <nav class="navbar navbar-expand navbar-dark bg-dark">
    <ul class="navbar-nav me-auto">
      <li class="nav-item">
        <a class="nav-link" href="#">Growing</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Know</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">What's New</a>
      </li>
    </ul>
  </nav>
</main>

And here's an example of proper Bootstrap nav semantics for a responsive layout:

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3f5d50504b4c4b4d5e4f7f0b110f110f">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>

<main role="main">
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <ul class="navbar-nav me-auto mb-2 mb-lg-0">
      <li class="nav-item">
        <a class="nav-link" href="#">Growing</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Know</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">What's New</a>
      </li>
    </ul>
  </nav>
</main>

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

Obtain image data from a websocket server built in C# or VB.NET

Just starting out in the world of websockets, I've got a handle on the client-side code (JavaScript makes it easy) But diving into the websocket server side, particularly in c#, is a whole different ballgame. I'm in need of websocket server code ...

c#javascripthtmlwebsocket

JavaScript file does not execute onload function

Whenever I try to execute the window.onload function from my .js file, it seems to not be firing as expected. <script type="text/javascript" src="{% static 'jsfile.js' %}"></script> window.onload = function() { alert(' ...

javascripthtmldjangoonload

Mismatched Container Alignment in HTML and CSS

I am struggling to position the timeline next to the paragraph in the resume section, but it keeps appearing in the next section or below where it's supposed to be. I want the timeline to be on the right side and the heading/paragraph to be on the lef ...

htmlcsstwitter-bootstrapbootstrap-4

Showing both labels and input fields side by side with CSS developments

I'm having trouble getting the label and input elements to display on the same line for this form. I've tried using CSS properties like display, float, and clear, but the result is not what I intended. Here is how the form should look: form & ...

htmlcssformsuser-interface

The media query was running smoothly until it unexpectedly stopped functioning

I've encountered an issue where something that used to work perfectly fine suddenly stopped working :( @media only screen and (max-width: 768px) { form, button, input { width: 80vw !important; } } <meta name="viewport" content="width=de ...

htmlcssmedia-queries

Setting the z-index of inner links to be greater than the parent container's z-index

I'm curious if something like this could work: <div class="arrow-left" style="z-index:2; position: fixed; height: 100%; width: 100%;"></div> <div class="meta" style="z-index:1; position: relative;"> <div class="description"&g ...

htmlcssz-index

Make sure to load the HTML content before requesting any input from the user through the prompt function

Could you please help me with a question? I'm looking to load HTML content before prompting the user for input using JavaScript's prompt() function. However, currently the HTML is only loaded after exiting the prompt. Below is the code that I hav ...

javascripthtml

PHP function that allows toggling only the first item in an accordion

In my function.php file in WordPress, I have the following code that is called using a shortcode on certain pages. It loops through and displays FAQs stored with each post. However, I am facing an issue where only the first accordion item can be toggled, ...

phphtmlcsswordpress

What is the best way to dynamically convert a lodash object (specifically a filter object) into jQuery's listview component?

After referencing the answer to this topic as my first step, which can be found here, my next goal is to utilize a filter function to retrieve all matching entries from a JSON file based on a search term. The objective is to loop through each match and con ...

javascriptjquerycssjsonsearch

Tips for inserting a DIV and SCRIPT from a single HTML template into a webpage

I'm working with an HTML template that contains a DIV with a button and a script with a function to call when the button is clicked: <div id="CLC_Form"> various text and checkbox inputs go here... <br> <input type="button" ...

javascriptjqueryhtml

Tips for including a decimal point in an angular reactive form control when the initial value is 1 or higher

I am trying to input a decimal number with 1 and one zero like 1.0 <input type="number" formControlName="global_velocity_weight" /> this.form = this.fb.group({ global_velocity_weight: new FormControl(1.0, { validators: [Valida ...

javascripthtmlangulartypescriptangular-reactive-forms

Implementing Material-UI’s FlatButton and Dialog in ReactJS for dynamic TableRow functionality

I am working with Material-UI and have implemented a <Table> component. Each dynamically rendered <TableRow> in the <TableBody> needs to include a button (<FlatButton>) within one of the columns. When this button is clicked, a <D ...

javascripthtmlreactjsmaterial-ui

Assistance needed in keeping an image with absolute positioning CSS fixed to the top left corner of the browser

Looking for some CSS help as a beginner here! I've been trying to position a transparent PNG image over a centered table, but it seems stuck in the upper left corner of the browser. Absolute positioning should give me freedom to move it around, right? ...

csshtmlabsolute

Unable to replicate the exact Bootstrap template found on their website

Attempting to replicate a template from bootstrap.com, but encountering issues with the copied version. The navigation bar is turning white instead of remaining black, and I'm unable to change the color. Additionally, facing problems with the toggle ...

javascriptjqueryhtmlbootstrap-4

Rendering React.js components as children of DOM elements

Trying my hand at creating a custom Map component includes the task of designing a unique Map Annotation. Here's an example of how a MapAnnotation component appears in the render function: <MapAnnotation title='Annotation' latitude={ 12.3 ...

javascripthtmlcssreactjs

Vue: A guide to fetching and displaying response data in a select dropdown using the vue-search-select component and axios

Hi there, I am new to this platform. I am facing an issue while trying to display response data from axios on the select option using vue-search-select. Despite several attempts, I have been unsuccessful in getting the desired results. I managed to loop th ...

vue.jsbootstrap-4axiosvue-cli

Is it possible to set a minimum width for browser resizing?

https://i.sstatic.net/0qhjT.png Looking at the image provided, I'm doing a comparison of the minimum resizable widths between my website and GitHub's. Is there a way to enforce a minimum width limit on my website similar to GitHub's? I&apo ...

javascripthtmlcssbootstrap-4

The border-radius style will not be effective on the top part of the div

I'm currently developing a landing page for my personal use, but I've encountered an issue. There is a div with a border-radius named .popOut. The border-radius is applied to the bottom of the div but not the header part. Why is this happening? H ...

htmlcss

What could be causing the background image on my element to not update?

I'm attempting to utilize a single background image that is 3 pixels wide and 89 pixels tall. Each vertical stripe of 1 pixel will serve as the background for a different div. I had presumed that adjusting the background-position by -1px 0 and specif ...

javascriptjqueryhtmlcss

The checkbox label should be centered directly beneath the checkbox

I'm feeling a bit lost. I came across this code snippet on jsfiddle: https://jsfiddle.net/rx90f38u/1/ There seems to be some styling included, but I can't figure out why the "remember" me text is showing below the checkbox. The checkbox and it ...

htmlcssformscheckbox