My custom CSS is being overridden by Bootstrap at the moment

My application relies on Bootstrap for styling, but it seems to be conflicting with my custom CSS. As a result, the navbar's appearance is not as intended. Can anyone point out what I might be doing wrong and suggest a solution? My ultimate goal is to have Bootstrap work seamlessly alongside my CSS.

To provide further clarity, here is an image of the issue:

https://i.sstatic.net/JH8r9.png

The HTML code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Client Server Application Project</title>
    <link rel="stylesheet" href="faq.css" />
    ... (HTML code continues)

The CSS code:

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
nav{
    background: #1b1b1b;
}
... (CSS code continues)

Any assistance would be highly appreciated!

Answer №1

It appears that there is an issue with your Bootstrap link.

The main purpose of Bootstrap is to streamline and reduce the amount of CSS code lines.

To resolve this, you can try following these steps:

Replace your current link with the following one:

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

You can then search for specific Bootstrap elements that you want to incorporate by visiting:

https://getbootstrap.com/docs/5.1/components/navbar/

If you wish to use a Navbar, simply copy and paste the code snippet below into your project:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled">Disabled</a>
        </li>
      </ul>
      <form class="d-flex">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</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

I am having trouble with the Array Reverse function, it's not functioning properly

Take a look at this React JS code snippet: poll() { var self = this; var url = "//" + location.hostname + "/api/v1/eve/history/historical-data/" + this.state.itemId + '/' + this.state.regionId + '/40'; $.get(url, fu ...

When receiving a GET response after a server crash

Question: I am sending a Get request through Ajax every second and waiting for a response from the server. However, if my application crashes and I keep sending requests every second, I only receive a server timeout error (HTTP status code 502) with no oth ...

Column Arrangements in a Table

Is there a method to insert a new column into a table using the jQuery plugin DataTables? ...

utilizing ng-option to present choices in a dropdown menu

I have been implementing a scroll-down menu in my application using options. However, I now want to switch to using ng-option to populate the values from a JavaScript file. I also require assistance with writing AngularJS code for this task. Below is a s ...

Struggling to properly reference an item within an array

Struggling to create an HTML page for a class project that utilizes a drop-down menu to display relevant information from an array? Check out my jsfiddle for the full HTML section. Any assistance would be greatly appreciated. I must admit, I'm not we ...

Testing the Angular/Ionic project through unit tests

I am facing a challenge with my controller code, which appears to be quite simple. Here is a snippet of the controller: timeInOut.controller('timeInOutController', function($scope, $filter, $ionicScrollDelegate){ ... }); However, when at ...

Troubleshooting Node Commands malfunctioning following NodeJS update

I have encountered an issue while trying to update my node version. I deleted the nodejs file from the ProgramFilesx86 folder and then used the Windows installer to install the latest version. However, when I attempt to initialize a node project or use npx ...

Tips for retrieving data from a concealed input within a div that is being looped through in Angular.js

Currently, I have a controller that sends data to the UI and uses the ng-repeat directive to map them. My next goal is to bind this data with a hidden input form and then send it to another function in the controller when a click event occurs. Any tips on ...

Delay in background color for hamburger menu in Bootstrap 4

I recently delved into the world of coding and I am just putting the finishing touches on my basic portfolio site. The one issue that has been bothering me is the hamburger menu background. While I have successfully applied a background color to the menu ...

Stream-Awesome #12: The Return of Duplexer in Nodesville

For days, I've been attempting different methods to solve this exercise. It's frustrating because no matter what I try, I keep encountering a "write after end" error. But here's the thing - I'm using the "end" event and not writing anyt ...

Switch between toggling tasks in Vue does not seem to be functioning as

I'm reaching out again because I'm struggling to figure out what I'm doing wrong. I followed a tutorial step by step but the code isn't working as expected. My goal is to toggle between marking tasks as done and not done. When I test th ...

Is it possible for me to dictate the sequence in which javascript / jQuery events are triggered?

Issue at Hand In my asp.net webform, I have a grid where users can update textboxes. These updates trigger a WebMethod call, updating the rest of the row without saving. To save the changes, users must click a save button. While this system works well in ...

How can we verify if a certain unicode string matches the output of reaction.emoji.name?

In my discord bot using Discord.js, I am attempting to implement a starboard feature. However, when seeking help, I was provided with the reaction.emoji.name property that supposedly returns a Unicode string. Now, I am confused about how to determine if th ...

HELP! Imagemaps are being ruined by overlapping DIVs!

I encountered a minor issue. In summary, I have a container div that displays rotating images and image maps with clickable links within each image setup like a gallery with built-in navigation. Recently, I was tasked with adding simple animations to the i ...

Adjust the color of the font within a div element when hovering over it

I've been attempting to modify the text color and add an underline when a user hovers over it. Despite trying various methods, I haven't been successful. I scoured the internet for a solution but couldn't find one that met my specific requi ...

Dealing with Asynchronous JavaScript code in a while loop: Tips and techniques

While attempting to retrieve information from an API using $.getJSON(), I encountered a challenge. The maximum number of results per call is limited to 50, and the API provides a nextPageToken for accessing additional pages. In the code snippet below, my i ...

What is the best way to sum up multiple checkbox values in JavaScript?

var bookRate = new Array('The Right to differ', 'Issues In Contemporary Documentary', 'Writing, Directing and Producing', 'Lee Kuan Yew My Lifelong Challenge'); var selection = document.rate.checkbox; var sum = 0.00 ...

Iterating over the local storage to locate a specific item

Utilizing local storage extensively has been beneficial for maintaining state by storing the session on the client side. However, a challenge arises when updating the session. Within my code, there are multiple lists of objects that I serialize in JSON fo ...

What purpose does the <noscript> tag serve in React?

Recently delving into the world of React, I've been working on a simple application by following this tutorial: https://reactjs.org/tutorial/tutorial.html. I've started modifying the code to suit my own project. While inspecting my HTML, I notic ...

What other option is there instead of using a span tag?

Take a look at this illustration. <span id="s1">Goodbye</span> <span id="s2">cruel</span> <span id="s3">world</span> <span id="s4">this</span> <span id="s5">is</span> <span id="s6">a</sp ...