What could be the reason why the text inside the anchor tag is not showing up?

The text within the anchor tags, such as feature and pricing, is not visible on the webpage. I attempted to add a color attribute to change this but it did not have any effect. The only thing that changed was the cursor when hovering over the links, while the text remained invisible against the white background.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>

<nav class="navbar navbar-expand-lg navbar-dark primary-color">
  <a class="navbar-brand" href="#">Navbar</a>
  <ul class="navbar-nav mr-auto">
    <li class="nav-item active">
      <a class="nav-link" href="#">Home
          <span class="sr-only">(current)</span>
        </a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Feature ::::s</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Pricing</a>
    </li>
  </ul>
</nav>

htmlcssbootstrap-4

Answer №1

Those elements are present, just in white color.

To make them visible, adjust the background color of your navigation bar using bg-dark class.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>

<nav class="navbar navbar-expand-lg bg-dark navbar-dark primary-color">
  <a class="navbar-brand" href="#">Navbar</a>
  <ul class="navbar-nav mr-auto">
    <li class="nav-item active">
      <a class="nav-link" href="#">Home
          <span class="sr-only">(current)</span>
        </a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Feature ::::s</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Pricing</a>
    </li>
  </ul>
</nav>

Answer №2

The navbar has undergone a complete overhaul in bootstrap-4. Now, instead of using .navbar-default, you can use .navbar-light for a lighter version or stick with .navbar-dark for the darker look. Whichever option you choose, make sure to apply one of these classes to your navbar.

  1. If you opt for .navbar-light, pair it with a light background like .bg-light.
  2. For those going with .navbar-dark, complement it with a dark background such as .bg-dark.

Since you've selected .navbar-dark, it's clear that you prefer a dark navigation bar. To make it stand out from the rest of the page content, consider adding .bg-dark to the nav tag. Alternatively, if you want a transparent navbar against the page body, apply .bg-dark to the body tag.

Answer №3

navbar-dark is designed to be used with a dark background, resulting in all its children having a white foreground color. This may cause the text to be invisible.

If you want to use a custom background color, you will need to use !important in the CSS for primary-color.

.primary-color {
    background-color: #234567 !important;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>

<nav class="navbar navbar-expand-lg navbar-dark primary-color">
  <a class="navbar-brand" href="#">Navbar</a>
  <ul class="navbar-nav mr-auto">
    <li class="nav-item active">
      <a class="nav-link" href="#">Home
          <span class="sr-only">(current)</span>
        </a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Feature ::::s</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Pricing</a>
    </li>
  </ul>
</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

Bootstrap modals are refusing to open

I have encountered an issue where the images are not displaying on my modal. I have tried changing both the images and the code itself, but being new to this, I am unsure of what exactly is causing the problem. Could it be a fault in the Javascript code or ...

javascripthtmlcssbootstrap-4

The JS Fiddle code fails to function properly once it has been downloaded to the local computer

I came across a helpful example fiddle webpage: jsfiddle.net/yijiang/6FLsM/2 After following examples from others, I attempted to download (right click and Save As) using the latest Chrome browser with the following links: jsfiddle.net/yijiang/6FLsM/2/s ...

javascripthtmllocaljsfiddle

What is the best way to activate materialise pop-up menus in a React application?

Looking to enhance my React app by adding a NavBar with dropdown functionality. Here's the code snippet: <ul id="dropdown1" className="dropdown-content"> <li><NavLink to="/create">Create lesson ...

cssreactjsexpressmaterializemern

How can I toggle the visibility of a div based on whether a variable is defined or not?

How can I display a specific div on my webpage only when certain variables in PHP pull out a specific result from a database? I attempted to use the code snippet below, but it's not working as expected. Can someone provide guidance on how to achieve ...

javascriptphpjqueryhtml

The process of inserting a CSS file into a CodeIgniter project

Hey there, I'm struggling to load a CSS file in Codeigniter. Can someone please guide me on how to do it? Below is an overview of the Codeigniter sample Directory Structure: views models controllers assets a) stylesheets b) javascript c) images Conf ...

phpcsscodeigniter

Is there a method within the blueprintjs tabs component to showcase the tabs at the bottom of the tab panel?

Currently, I am working with Version 4 of Blueprintjs and experimenting with its tabs component. I've been trying to find a way to display the tabs at the bottom of the panel, similar to how they are often seen in spreadsheets. While there is an optio ...

javascriptcssreactjsblueprintjs

Is the 'name' field empty in PHP contact form emails being sent to the email address?

Sorry, I'm new to filling out this type of form! I managed to create a contact form page that sends me the 'email address' and 'message' from the form fields, but it's not sending the value entered in the name field, it remai ...

phphtmlforms

Difficulties encountered when adjusting the size or reducing the images in a Cycle2 slideshow

Greetings to all fellow coders! Thank you for taking the time to read this post. I am currently facing a challenge in my web development project where I am trying to make my Cycle 2 slideshow images resize and reposition alongside other divs when the wind ...

javascriptjqueryhtmlcss

Utilize jQuery append() to create a grid layout using <td> tags

I need to integrate address information from an object into an HTML table using the append() method. The initial HTML table structure is as follows: <table class="shipping_information" border="1"> </table> To achieve this, I place the addre ...

javascriptjqueryhtml

Issue with menu height persisting while resizing screen

For my responsive design project, I am implementing a menu that switches to a menu button when the width is less than or equal to 768px. Currently, I am using jQuery to dynamically adjust the height of the menu when the menu button is clicked. The jQuery ...

jquerycssresponsive-design

Tips on ensuring a div covers the entire page even when a scrollbar is present

<div id="outer_product_wrapper" style="display: none;"> <div id="outer_inner_product_wrapper"> <div id="inner_product_wrapper"> Test </div> </div> </div> I&apo ...

htmlcss

Incorporating a static background image slideshow in ASP.NET - a step-by-step guide

I am currently working on my asp.net website and I would like to incorporate an image slideshow as the background of my homepage. This idea was inspired by a site I came across, . I have successfully implemented the slideshow, but now I am wondering if it ...

javascriptjqueryhtmlasp.netcss

Tips on ensuring the first column of an HTML table remains fixed in responsive design

I am trying to create a responsive HTML table where the first column remains fixed. I have a select box on my PHP page and I am using AJAX to display data from a database in the HTML table. However, when selecting a value in the select box in a responsiv ...

phphtml

Tips for arranging elements in proper order following a rotation

Having trouble aligning rotated divs? Let's say we rotate .straight by 30deg, and now we want to find the new offset coordinates of its bottom right corner. This way, we can perfectly match up the bottom left corners of .curve with this new coordinate ...

javascriptjquerycssmathrotation

Just obtained a new Bootstrap Template and currently in the process of personalizing it by replacing the default image with my

I'm facing an issue with the image in the masthead of a Bootstrap Template. I tried to change the image URL to my desired picture in the CSS file of the downloaded Bootstrap files, but even after saving it, the image on the page remains the same old o ...

cssbootstrap-4

Editing text on an Android device - Removing formatting pieces

I've encountered an issue where trying to remove spans from an EditText using EditText.getText().clearSpans() results in strange behavior. Line feeds start appearing as boxes and any newly set spans are misplaced. My question is: Is there a way to cl ...

androidandroid-edittextgettexthtmlredraw

Methods for updating the value of a `<select>` element in an AngularJS controller

Within my HTML code, I have a select element with options ranging from 1 to 10: <select id="selVal" ng-model="product.quantity" ng-options="o as o for o in quantityValues" ng-change="updateDelta(product.quantity, {{product.quantity}}, product.selec ...

javascripthtmlangularjsselectng-options

Let's explore a way to make the button text wrap onto multiple lines for smaller screens when using Bootstrap 4.0

I am encountering an issue with the layout of my asp.net mvc core web application + bootstrap 4.0 FAQ section. The problem is that the question description overflows the screen on small screens, while the answer text aligns properly. I need a solution to m ...

csstwitter-bootstrapbootstrap-4asp.net-core-mvcmedia-queries

When the size of a webpage changes, leveraging the vmin/vmax attribute in CSS

Just started using the brand new vmin css property for adjusting font size - and it's working like a charm! div.sample { font-size: 1.5vmin; text-align: center; ... } However, a bit of a snag appears when resizing the page. When the page is made sma ...

htmlcssresizeviewport-units

Tips for positioning dynamic high charts in a bootstrap row

I have implemented HighCharts for displaying charts on my website. Specifically, I am utilizing the chart type solidgauge. The charts are dynamic and I am looking to arrange them horizontally across the page. My goal is to align the charts in a layout sim ...

javascripthtmlcsshighcharts