Customizing Nav Bar Color in Bootstrap

Is there a way I can change the font color of the Nav Bar to white? I'm having trouble figuring out which CSS class to use for 'Contact', 'Portfolio', and 'About' as 'Navbar' is already white due to Bootstraps' CSS.

HTML

    <nav class="navbar navbar-dark bg-primary">
<a class="navbar-brand" href="#">Navbar</a>
<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">
  <ul class="navbar-nav">
    <li class="nav-item active">
      <a class="nav-link" href="#"> Contact <span class="sr-only">(current)</span></a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Portfolio</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">About</a>
    </li>
    <li class="nav-item">
      <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
    </li>
</ul>

CSS

    .nav-item{
        color:white
    }
htmlcsstwitter-bootstrapbootstrap-4navbar

Answer №1

Utilize:

<nav class="navbar navbar-light bg-primary">

then include 

text-white

Answer №2

If you're using the "nav class" as your main navigation, make sure to select the "bg-primary" class to apply the appropriate styling.

Answer №3

When customizing the text color for a navbar, you have the option of using either the navbar-dark or navbar-light classes.

The navbar-dark class sets the base color to white, whereas the navbar-light class sets the base color to black with a 90% opacity.

For navbar links, the opacity is reduced to avoid the text being entirely black or white.

If you want to make all link colors white, you can target the .nav-link rule like so:

.navbar-dark .navbar-nav .nav-link {
  color: white;
}

Here's a practical example:

<!-- Navbar with white link text -->
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="723829323936418d99a5ad9cdd909f90d468676a69676d29">[email protected]</a>/dist/umd/popper.min.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />

<style>
  .navbar-dark .navbar-nav .nav-link {
    color: white;
  }
</style>

<nav class="navbar navbar-dark bg-primary">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler mr-5" 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">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#"> Contact <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Portfolio</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">About</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>
  </div>

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

Use a CSS rule only if the element is not nested by using the :not selector

Could use some assistance with this coding issue: .element { border: 1px solid red; display: block; } I want to exclude this rule when .element is a descendant of .no-border using the :not pseudo-selector. For example: <div class="element">I ...

htmlcss

Is it possible to place Angular Material components using code?

Currently, I'm in the process of creating a responsive Angular application. Is there any way to adjust the height and position of the <mat-sidenav-content></mat-sidenav-content> component in Angular Material programmatically without relyi ...

javascriptcssangulartypescript

What is the best way to apply the active class just once?

I am having an issue with my v-for loop in Vue.js where the bootstrap 4 .active class is repeating. I only want the bootstrap 4 active class to repeat once. Can anyone suggest a solution to this problem? var app = new Vue ({ el: '#app', d ...

vue.jsvuejs2bootstrap-4

Utilizing Ant Design Icons without an Internet Connection

In my current project, a reactJS application utilizing ant design for the UI was recently deployed to production on locked down computers. These computers lack internet access, causing ant design icons on modals to appear as empty boxes. Upon investigation ...

cssreactjsantdoffline-mode

What could be causing my footer to be stuck in the center of my webpage?

Despite trying various methods, my footer remains stuck in the middle of the page. I even attempted to set the body height to 100% or 100vh without success. footer placement issue (https://i.stack.imgur.com/qzp2i.png) css: body { display: flex; flex-direct ...

htmlcss

Displaying a specific item in react js with the help of bootstrap version 5.0

I am currently working with Bootstrap v5.0 and facing an issue with displaying the selected item from a drop-down menu. Ideally, when I click on "Action," it should show "Action" instead of the default "Dropdown Link" text. Can anyone provide guidance on ...

javascripthtmlreactjsbootstrap-5

Having trouble getting the PHP code to properly integrate with the Bootstrap datatable

I've been attempting to utilize a data table to sort and search within the database using bootstrap 4, but for some reason, it's not sorting, paginating, or searching the data. I've checked my code multiple times, but I can't figure out ...

phpbootstrap-4

Processing PHP forms with dynamic form inputs

Have a form with the capability to add multiple input fields for ordering pictures by picture number. A customer could potentially order anywhere from 1 to 100 pictures. How should I handle this in PHP? Creating up to 100 $_POST[] variables for each poss ...

phphtmlformswebforms

Automatically focus on new page when button is clicked (in a separate HTML file)

I successfully added auto-focus functionality to a button that opens a modal using the code below: Created with AngularJS: app.directive('autoFocus', function($timeout) { return { restrict: 'AC', link: function(_sc ...

htmlangularjsautofocus

When attempting to render HTML containing multiple CSS classes within a JSON request parameter, the styles are not being applied as expected

In my API, I'm dealing with a JSON request parameter that includes an HTML string. This HTML string references CSS styles from a separate .css file. However, when an HTML element has two CSS classes assigned to it, neither of the classes' styles ...

ioscssjsonswifthtml-email

Unable to toggle Bootstrap 5 tabs in a Nunjucks template - the issue persists

I have been following the bootstrap documentation for tabs which can be found at this link After referencing the documentation, I replicated the sample implementation in my code as shown below: --- title: Portfolio description: Portfolio --- {% exten ...

javascripthtmlcssbootstrap-5nunjucks

Adjusting the height of the v-footer

I'm having trouble adjusting the height of the v-footer component. According to the documentation, I should be able to use the height prop, but when I try height="100px" or height="50%", the footer doesn't change. What could be causing this issue ...

cssvue.jsvuetify.jsfooter

Save and showcase SQL, PHP, HTML, and JS code exactly as it is preserved in MYSQL database

Is there a way to store and display complete JS, PHP, and HTML code in MySQL without altering the format? The stored PHP code should appear as: <?php echo "something"; ?> And not just: something For JavaScript: <script> document.write(&ap ...

javascriptphphtmlmysqlsql

Issue with Tooltipster plugin causing jQuery function not to trigger upon clicking the link within the tooltip

Recently, I've been experimenting with a jquery plugin called Tooltipster by inserting some HTML into the tip with an href link. The problem arises when I try to add a class to the href and fire a jquery function upon clicking it. No matter how much I ...

javascriptjqueryhtmlclicktooltipster

Showcasing Items Within JSON Object in Angular

I am dealing with a JSON database that contains nested Objects: { "characters2": [ { "campaign":"Menagerie Coast", "index": 1, "name": "Mark Whithershmitz", "portrait": "assets/pics/markW.jpg", "affiliation": "Kryn Dynast ...

htmljsonangularobservable

Discover the power of catching Custom DOM Events in Angular

When working with an Angular library, I encountered a situation where a component within the library dispatches CustomEvents using code like the following: const domEvent = new CustomEvent('unselect', { bubbles: true }); this.elementRef.nati ...

javascripthtmlangulartypescript

Script modifies div dimensions independently of CSS styling

Recently, I received assistance from this community in creating a script that displays random images from an array within 4 divs. Each image changes upon refresh or with a timer. HTML: <section> <div id="square_1" class='box'> ...

jqueryhtmlcss

Guide on embedding a map inside a popover using Bootstrap

I am trying to create a popover that displays a map inside it. I attempted this simple example: <!DOCTYPE html> <html> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" c ...

javascriptjquerybootstrap-4leaflet

Discovering if a div element has children using Selenium IDE

As I begin to automate testing for our website with Selenium IDE, I must admit that I am still learning the ins and outs of it. We utilize highcharts to exhibit data on our site. The challenge arises from the fact that there are 3 div elements handling th ...

htmlcssseleniumhighchartsselenium-ide

Issues arise when attempting to resubmit a PHP+JQuery+AJAX form with new values

I'm having trouble understanding why my form isn't refreshing after changing the values. Let me explain further, I have a password recovery form where users enter their email address. The form is processed in PHP using AJAX and displays a valida ...

phpjqueryhtmlajaxforms