How to modify hyperlink text color in Bootstrap 4 navbar

Below is the code snippet that controls the navigation bar on the website:

<div class="collapse navbar-collapse" id="navbarSupportedContent">
  <ul class="navbar-nav mr-auto">
    <li class="nav-item">
      <a class="nav-link" href="#">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Contact</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">About</a>
    </li>
</div>

I attempted to style the 'a' element with a class and set the color to "white," but unfortunately it did not work as expected.

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

Utilize the bootstrap text class.

Experiment with adding class text-white to the anchor tag, like this: 

<a class="nav-link text-white" href="#">About</a>

Your code didn't have the desired effect because the Bootstrap class takes precedence due to its use of !important

Bootstrap class

.text-white {
    color: #fff!important;
}

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

Open up the index.html page whenever the page is refreshed

Currently, I am utilizing the fullPage.js plugin to enable page-by-page scrolling. This plugin utilizes hash URLs for navigation. However, upon refreshing the page, it always loads at the last visited hash URL. Is there a way to ensure the document loads a ...

javascriptjqueryhtmlfullpage.js

Tips for adjusting the font size according to the varying number of characters entered

I am currently facing a challenge with adjusting the font size based on the dynamic number of characters. For example, I have a set of characters with a font-size of 40px, and as more characters are added, the font size should decrease to fit within the av ...

javascriptjqueryhtmlcssfonts

Tips for displaying a div element alongside a button within a reactJS table

How can I position a div element next to a button in a ReactJS table? I have a table component where I want to display some options in a small window that closes when clicked outside. Options : https://i.sstatic.net/sT8Oi.png Action button in the table ...

javascripthtmlreactjstypescript

Saving user input as a local variable to be utilized on a different web page

I am attempting to capture a user input from a form and then utilize that variable on a separate page. This process should be straightforward, but I am not receiving any results and I am unsure of the reason why. Here is the code on the first page: <di ...

javascriptformsbootstrap-4

Tips for designing a CSS Grid that features a maximum width for the main content and a minimum width for the sidebar

I'm attempting to design a two-column CSS grid with a main content area that has a maximum width of 800px and a sidebar that has a minimum width of 200px: https://codepen.io/dash/pen/gOmXqGr The grid needs to be responsive: The yellow sidebar should ...

htmlcsscss-grid

Stop the context menu from popping up when the element is right-clicked

Is there a way to create a custom right-click interaction for an element on my website, <div class="myElement"></div>? I want to avoid the default context menu from popping up when the user right-clicks on this element in order to enhance the u ...

javascripthtmlcss

Struggling to minimize the dimensions of the Image div in React Js with Tailwind CSS

I am currently working on replicating the functionality of the Book My show Application. Specifically, I am developing a Cast and Crew slider. Despite my efforts to decrease the size of the images, the spacing between them remains unchanged. Here is my Ja ...

javascripthtmlcssreactjstailwind-css

Capturing and saving location data without internet connection, and then displaying markers once connectivity is restored

I am currently developing a web application that will monitor the user's location. I want to ensure its reliability, so even if the user loses internet connection, the application will continue tracking their location (since GPS does not rely on inter ...

javascripthtmlgoogle-mapsgoogle-maps-api-3

"Place the content at the center of the row using display block in Bootstrap version

Having modified the bootstrap.min.css file in my Bootstrap v4.3.1, I replaced all instances of display:flex; with display:block;. However, after making this change, I noticed that the rows were no longer centered, even when using justify-content-center. T ...

htmlcssbootstrap-4

What is the best way to prevent handleSubmit from triggering a re-render when moved to a different

Just started experimenting with React and ran into an issue that I can't seem to find a solution for anywhere. I have a basic search form that interacts with an API. If an invalid value is returned, it displays an H3 element with an error message lik ...

javascripthtmlreactjsforms

Incantation within ng-include | src involving a series of characters

Is there a way to create a URL in ng-include|src by combining an expression and a constant string? I've attempted the code below, but it doesn't seem to be working. <aside ng-include src="{{staticPath}} + 'assets/tpl/products-feed-histor ...

htmlangularjs

The Bootstrap 4 tooltip is failing to display correctly and is only functional for anchor tags

Utilizing bootstrap 4, I aim to display tooltips on both buttons and anchor tags. However, the tooltips only appear on anchor tags and not on buttons. Furthermore, even when the tooltip does display, it lacks proper styling and appears white without adheri ...

javascriptbootstrap-4tooltipejstwitter-bootstrap-tooltip

Creating a border and transparent space within a CSS triangular design

I am looking to create a unique design element for my website using CSS. The pattern I want to achieve involves a triangular cutout separating two sections of the page: https://i.sstatic.net/08BL0.jpg After exploring the skewX() technique detailed in thi ...

cssbordercss-shapesskew

CSS - Customizing the appearance of consecutive child divs

I'm struggling with adjusting the margin between two child divs when they follow each other. The current margin is set at 3rem, but I want it to be 1rem if both child containers have the class "narrow": Is there a way to achieve this without changing ...

jquerycsssassdrupalcss-selectors

What can you do with a 2D array and getElementsByTagName?

My current challenge involves trying to utilize JavaScript to access table cells by using the getElementsByTagName method. The end goal is to compare each cell in the array to a specific value and then change the background color of that cell based on the ...

javascripthtmlgetelementsbytagname

jQuery functions smoothly on Firefox, but encountering issues on Chrome

While it may seem like a repetitive inquiry, I have thoroughly researched similar questions and have not found a suitable solution. The server is returning the following response through a standard ajax call: <form id="ctl00" name="ctl00" method="post ...

javascriptjqueryhtmlgoogle-chrome

Disabling the ng-click event in a confirmation popup button: a step-by-step guide

Is there a way to prevent ng-click event from triggering in a confirmation popup button? 1[Screen-Shot] ...

htmlasp.netangularjsasp.net-mvc-4

What are the steps to shift columns to the left within a table?

I need to adjust the alignment of the columns and also create a fixed size space between them. Currently, it appears like this: https://i.sstatic.net/F7Rqk.png My desired outcome is something similar to: https://i.sstatic.net/ALKa9.png CSS Code: .tabl ...

htmlcss

Is it possible to conceal or disregard text elements from the web browser search function by using CTRL+F?

I have a complex web application interface with a dedicated area for content display. Is there a way to ensure that when users utilize the browser's text search function (CTRL+F), the UI elements are ignored and only the actual content is searched? ...

javascripthtmlcss

Switching the chosen option in the <select> element repeatedly

I have successfully set the selected value, but now I am wondering how to keep changing it continuously. Initially, my approach was to remove the "selected" attribute from all options and then add it back to the desired option. Surprisingly, this method w ...

javascriptjqueryhtml