The color of the Bootstrap font remains unchanged and the responsiveness of the navbar button is not functioning correctly

Just starting out with frontend development and my professor recommended trying Bootstrap for practice. I attempted to code a simple webpage, but ran into some issues.

Here is the code I used:

https://github.com/nguyencuc2586/project1

I encountered a problem with the first issue, which I have included a picture of (apologies for uploading it here due to its size).

In my style.css file, I wrote the following code:

body {
background: #333;
color: #fff;
}

According to my code, all text should be white. However, as shown in the picture, this does not seem to be the case. Any ideas why?

Additionally, my second issue involves the icon at the top right corner in this image:

https://i.sstatic.net/qXAMY.jpg

The icon does not behave responsively when clicked; nothing happens. Can you provide any advice on how to resolve these problems? Thank you in advance.

Answer №1

Make sure to place <code>jQuery before both Popper and Bootstrap JS in your code:

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="86ecf7f3e3f4ffc6b5a8b3a8b7">[email protected]</a>/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5a2a352a2a3f287430291a6b746b6c746b">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ddbfb2b2a9aea9afbcad9de9f3ebf3ef">[email protected]</a>/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>

If you need to override Bootstrap CSS, remember to add !important.

Please let me know if this solution works for you.

Answer №2

If you want to implement your CSS, make sure to save it within the bootstrap link. Moreover, to resolve the issue with the unresponsive menu icon, don't forget to also incorporate the JS bootstrap link along with jQuery and pooper.

<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous" />
<title>Bootstrap Theme</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fd9f9292898e898f9c8dbdc9d3cbd3cf">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous" />
<link rel="stylesheet" href="css/style.css" />

Additionally, include Bootstrap js by adding the following script tags:

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bfd5cecadacdc6ff8c918a918e">[email protected]</a>/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4e3e213e3e2b3c60243d0e7f607f78607f">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0e6c61617a7d7a7c6f7e4e3a2038203c">[email protected]</a>/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>

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

"Implementing a JavaScript function to dynamically add multiple div elements to a

I am just starting to learn JavaScript. The main div with the ID "row_logic" contains two nested divs. I need help figuring out how to dynamically increment this root div in the format shown below using JavaScript. <div class="row-fluid" id="row_log ...

Create a continuous scrolling tool similar to Google Reader for iGoogle

Do you know how to create an infinite scroll widget similar to Google Reader on iGoogle? This widget should be able to dynamically load data as the user scrolls, and replace the traditional scroll bar with a pair of up and down arrows. The HTML structure ...

developing a fluid grid system with flexible ordering

I'm currently working on a section for my app that consists of one row with 3 columns, each column containing 3 divs. JSFIDDLE: demo Here is how it should appear in desktop view: https://i.sstatic.net/ugAXd.png And here is the expected appearance ...

Reduce the line length for better readability

Looking for a way to make a button with flexible width while allowing text to wrap to 2 lines for minimum button size? Check out the examples below: To keep the button width small, even short words should wrap to 2 lines: My Button If there's a ...

How can I prevent katex from overflowing?

Currently, I am facing a challenge in handling katex equations that overflow in a react native webview. I am attempting to dynamically break the equations into multiple lines to prevent scrolling and display them separately. Any assistance on this matter ...

What is the process for assigning a CSS class to a div element that is generated by react's render() function?

In React, I am encountering an issue where the css class I want to set on the div returned from render is being removed. This problem even persists when I try nesting another div inside the first one and setting the class on the enclosed div. Has anyone ...

Unveiling the method to retrieve XML tag based on the attribute of its parent element

This snippet is a segment of XML code: <?xml version="1.0"?> <menu> <pizzas> <pizza number="0"> <title>Tomato &amp; Cheese</title> <small>550</small> <medium></medium> <large> ...

Tips for Promoting Content Using Offcanvas Navigation Menu

I am currently working on an Angular 12 project that incorporates Bootstrap 5 and NGX-Bootstrap. I am interested in developing a side navigation bar that is initially active but can also be collapsed. I wonder if this could be achieved using the Offcanvas ...

Learn how to dynamically insert data retrieved from a database into a PHP database table

After fetching data in a tabular format from the database, I noticed that three columns of the table are retrieved directly while the remaining two consist of drop-down lists and checkboxes. Now, my challenge is to extract data from the retrieved rows and ...

Is it possible to configure mui v5 to display class names without the css-xxx prefix?

Working with mui has truly been a delightful experience. Each developer seems to have their own unique approach when it comes to styling and layout in react. The flexibility provided by mui must present quite the challenge for library developers. In custo ...

Using style binding and ngStyle doesn't appear to be effective for setting a background image within a DIV element in Angular5

After facing difficulties in customizing the spacing of Angular material cards, I decided to create my own cards. However, during this process, I encountered an issue where I needed to set an image as a background inside a div. Despite trying various CSS ...

How can I alter the text color on hover within a Material UI card? My goal is to have the text color change when hovering over the card itself, rather than just the text

When I apply CSS to the card hover effect, it works fine. However, I also want to change the text color along with the card color on hover. card: { maxWidth: 350, height: 300, '&:hover': { backgroundColor: '#373737 !impor ...

showcase every value upon submission in the form with options to edit and delete

Is it possible to display all values submitted in a form with edit and delete buttons? Currently, only one value is being displayed at a time. Whenever a new value is displayed, it replaces the old one. How can this be fixed? You can fin ...

Guide to importing an external JSON file into a JavaScript-based quiz on an HTML webpage

I am currently diving into the world of JavaScript and trying my hand at creating a quiz. Check out my simple quiz here Here are my specific inquiries: Is there a way to save the questions and answers in an external JSON file? Can I use a different fil ...

Unusual div image alignment when dimensions are dynamically adjusted with Javascript animations

I have created a basic webpage using JavaScript that aims to scale an element from the center of the page over time when clicked. It is functioning properly for the SVG element I tested it with. However, when I use an image, it initially appears outside o ...

The list in the navbar is misaligned and not centered vertically within the flex container

I've been working with flex for a while now, but I'm struggling to vertically align the content of my navbar to the center in the code. <nav className="nav navbar"> <h3> Logo </h3> <ul className= &q ...

Add a style to every div except for the final one

I've attempted to add a unique style to all divs with the same class within a parent div, except for the last one. Strangely, my code doesn't seem to work as expected for this particular case. Can anyone spot what I might be overlooking? Right no ...

Opacity transition in CSS does not function properly on a sibling selector when hovering over an element

I have created a responsive menu where the list items after the 4th element are set to display:none; opacity:0 on mobile devices. The 4th element is an icon and when you hover over it, the hidden menu items appear as a block list below using li:nth-child( ...

Creating dynamic text bubble to accommodate wrapped text in React using Material-UI (MUI)

I am currently developing a chat application using ReactJS/MUI, and I have encountered an issue with the sizing of the text bubbles. The bubble itself is implemented as a Typography component: <Typography variant="body1" sx={bubbleStyle}> ...

Python code to locate images within HTML source code

Searching for images in an html source code can be tricky. I prefer using regex over the html.parser method, but I'm open to learning if you can explain it simply like you would to a child. I wish I could use beautifulsoup, but mastering the hard way ...