Script Blocking Color Changes and Potentially More in Bootstrap Framework

Currently, I am using "Sublime" and employing bootstrap 3.3, just like the author in my course. I attempted to insert the bootstrap as a script instead of a file, but encountered an issue when trying to change the color of the jumbotron class - it simply did not respond.

Interestingly, when I tested my code on codepen without including the bootstrap script (as it was already installed), the color-changing feature worked perfectly fine.

Does anyone know what could be causing this discrepancy?

Feel free to check out my codepen and see a snippet of my code below:

   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="container">
  <div class="jumbotron">

    <h1><span class="glyphicon glyphicon-camera" aria-hidden="true"></span> The Image Gallery</h1> 
    <p>Welcome to this beautiful images gallery</p>
</div>

And here's my css snippet:

body {
    padding-top: 70px;
}

.navbar-inverse {
    color: #2C2E41;
}  

.jumbotron {
    color: #2C2E41;
}  

Answer №1

It appears that the issue you're encountering is related to your inability to modify the design of your website, which can be resolved by ensuring proper linking. Since you are new to this, I recommend keeping the html and css files in the same directory and following these steps:

<link rel="stylesheet" href="maxcdn.bootstrapcdn.com/bootstrap/3.3.7">
<link src="style.css">

By linking these files in this specific order, you should be able to make changes to your styles effectively. If this method doesn't work, you can also try using the following code:

.jumbotron {
background-color: #c3c3c3 !important;
}

However, it is crucial to link the files in the correct sequence for optimal results.

Answer №2

Have you located your css file? It should be included in your html after importing the bootstrap CDN, as stylesheets are 'cascading' - meaning they are applied sequentially.

For example:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" src="{YOUR STYLESHEET HERE}" />

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

The CSS show and hide feature is effective across all browsers except for Safari. What steps can be taken to address this issue

My toggle trigger works perfectly in Chrome, but I'm having trouble getting it to work in Safari. Any suggestions? <a href='#show'class='show'>see more --></a> <a href='#hide'class='hide&apos ...

Creating a fixed footer at the bottom of a div without relying on the position absolute property

Is there a way to keep my .card-footer at the bottom of my div without using position absolute? I'm hoping to find a solution with Bootstrap 4. Here is how it looked before I attempted to solve the issue: https://www.bootply.com/5xw7sfaPLs <div ...

The webpage functions properly when viewed locally, but only displays the background color when accessed online

My friend created a website using Microsoft Publisher a while back, and upon revisiting it recently, discovered that it doesn't load properly on the latest versions of Chrome and Firefox. When viewed locally, everything appears to work fine, but onlin ...

Instructions for passing a single value from a while loop and showing a different value in a text box through PHP

Can one value be displayed while sending another value in an Input text field simultaneously? I have a form that displays details in descending order, but when I update the details from another page, they are being updated in ascending order instead. Cod ...

Creating a navbar dropdown that is clickable on mobile devices and opens on hover on desktop is a simple way to improve

Utilizing Bootstrap 5 for my website creation, I am facing an issue with the navbar dropdown functionality. On mobile devices, the dropdown opens upon clicking but fails to close when clicked again. Meanwhile, on desktops, hovering over the dropdown works ...

I am looking to set an HTML file as the homepage for my Next.js project

Is there a way in next.js to render a normal .html file (index.html) when someone visits my root directory at "https://example.com/"? I have researched and edited my config file as shown below, /** @type {import('next').NextConfig} */ const next ...

There was a problem compiling the template and an error occurred in the mounted hook

I am encountering a slight issue with testing Vuejs and I am unsure how to resolve the error. Error1: "[Vue warn]: Error compiling template: Component template should contain only one root element. If you are using v-if on multiple elements, use v-e ...

Having trouble with the tool tip not showing up correctly in Internet Explorer?

Check out the code snippet below: <table> <tr> <td class="bgimg" valign="middle" width="10%" title="some title" nowrap> <img src="images/SomeLogo.gif"/> </td> </tr> </table ...

Using JavaScript to delete the initial option from a dropdown menu

Below is the code snippet: <select id="List" name="UserType" onChange ="hide"> <option value="0" disabled="disabled" selected="selected">User Type</option> <option value="1" onclick="hide">Administrator</option> ...

Clicking on a checkbox and subsequently removing validation through jquery

Situation : When the 'I am Fresher' checkbox is selected, I want to hide the 'Experience field', but still keep its validation visible so that my form cannot be submitted. My Requirement : When the 'I am fresher' checkbox is ...

Having trouble accurately obtaining the height of a DIV element using jQuery

After trying to troubleshoot on my own, I ran into a roadblock due to my specific requirements not being met by existing solutions. The issue at hand is as follows: I have a sticky DIV element positioned to the left, nested within another DIV Element wit ...

The use of Angular's ngClass directive does not work within the link function

I have a straightforward directive that renders an element, and this is the template: <div class="nav-item"></div> The .nav-item class looks like this: .nav-item { height: 50; } Here's the directive in action: angular.module('m ...

The styling options for PHP table are limited

I have been assigned a task for homework that involves connecting a MySQL database to our PHP files and displaying the data in an HTML table. Although I have successfully connected to the database, I am facing difficulties styling the table. All other elem ...

Achieving the ideal positioning of content within the flex property

I am facing an issue with my containers, specifically .grid.left and .grid.right. The images within each of these grids are dynamic and enclosed within another div called .gallery. The problem arises when I apply margins to the image boxes, causing gaps w ...

Div with fixed positioning experiencing glitching until reaching a specific height

I've been struggling to resolve an issue with a script that is supposed to scroll down with the page and stop at a specific height. However, right before it reaches the desired point, it temporarily disappears and then reappears. For reference, here& ...

Creating an HTML form that communicates with PHP and ASPX

I recently completed a project where I created a contact us page that sends information to our sales team using PHP for email delivery. The next step in this process is to also send the same customer information to our Sales Fusion CRM system. To accompli ...

Javascript code that fires when all elements are loaded

Incorporating two external HTML pages using the following code: <div id="header-div"></div> <div id="footer-div"></div> This is what my JavaScript file consists of: $(function () { $("#header-div").load("/AfekDent/header.ht ...

In Safari, the iPhone navigation bar is covering the buttons

My unique style controls the navigation buttons on the lower part of the screen, but unfortunately, the buttons are overlapping as shown in the screenshot. #navbar_mobile_extra_links { position: fixed; left: 0; right: 0; bottom: 0; back ...

Modifying the appearance of scoped child components in Vue: A step-by-step guide

I am currently using vant ui components in my Vue project, such as buttons. I would like to make some minor style adjustments, like changing the color and border, but I am unsure how to do it. Can anybody please assist me in solving this issue? Thank you i ...

Column CSS can be enhanced by implementing a divider within the design

I need assistance in creating a row with 2 columns accompanied by a divider. Here is an illustration of what I am trying to achieve: https://i.sstatic.net/Bv1c2.png The row should contain a light divider and a white divider that adjusts its size based on ...