CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
lukej
lukej

Reputation: 81

Custom CSS Won't Work With Bootstrap

First off I would like to say that I know I am not the most efficient or clean in my HTML.

My problem is that the custom CSS I write does not apply to my webpage at all. Bootstrap seems to be working perfectly fine, but when I try to make any edits or overwrite Bootstrap it just flat out doesn't work. I know that my custom CSS file is linked properly because it's in the same directory as bootstrap.css

Linking:

<head>

<title>Help Menu</title>

<!--
==============================================================================================================

REFERENCES (BOOTSTRAP 3.3.7) (jQuery 3.1.1)

==============================================================================================================
-->

<link href="/bootstrap/css/bootstrap.css" rel="stylesheet">
<link href="/bootstrap/css/custom.css" rel="stylesheet" >
<script src="/bootstrap/js/bootstrap.js"></script>
<script src="/bootstrap/js/npm.js"></script>
<script src="/jquery/jquery.js"></script>

<!--
==============================================================================================================

BOOTSTRAP REFERENCES DISTRO 3.3.7

==============================================================================================================

-->

</head>

For example I am able to change the background color of the panel using the <style> element:

<div class="container">
	<div style="background-color: #4286f4;" class="panel panel-default">
		<div class="panel-heading"><h1>What Do You Need Help With?</h1></div>

			<p>
				<div class="row">
					<div class="col-sm-2"> </div>
						<div class="col-sm-2">
							Frequent Problems
						</div>
				</div>

				<div class="row">
					<div class="col-sm-2"> </div>
						<div class="col-sm-2">
							Printers
						</div>
				</div>

				<div class="row">
					<div class="col-sm-2"> </div>
						<div class="col-sm-2">
							Drivers
						</div>
				</div>
			</p>
	</div>
</div>

But I cant change the color of the panel using external CSS (the following CSS snippet is in custom.css):

.lukedbgcolor {
	background-color: #4286f4;
}
<div class="container">
	<div class="panel panel-default lukedbgcolor">
		<div class="panel-heading"><h1>What Do You Need Help With?</h1></div>

			<p>
				<div class="row">
					<div class="col-sm-2"> </div>
						<div class="col-sm-2">
							Frequent Problems
						</div>
				</div>

				<div class="row">
					<div class="col-sm-2"> </div>
						<div class="col-sm-2">
							Printers
						</div>
				</div>

				<div class="row">
					<div class="col-sm-2"> </div>
						<div class="col-sm-2">
							Drivers
						</div>
				</div>
			</p>
	</div>
</div>

I have tried putting the CSS at the very bottom of the bootstrap.css and I have also tried putting the lukedbgcolor class first like this: <div class="lukedbgcolor panel panel-default">

ALL help / advice / criticism is welcomed, Thanks!

Upvotes: 3

Views: 14558

Answers (5)

lukej
lukej

Reputation: 81

The issue was temporarily fixed by using Bootstrap's CDN instead of hosting it locally. I believe the larger problem had to do with caching which can be fixed by the following, <link href="XXX.css?v=1.0" rel="stylesheet" type="text/css" />

Cache fix courtesy of @mayersdesign

Upvotes: 5

Ken H.
Ken H.

Reputation: 408

I cannot (yet) comment on the original post. How are you loading this page? Are you seeing any errors in the browser console? The advice above to use the browser devtools and examine the element, see if the class is there, and if it is being applied or overridden by other defined styles would be the way to approach it.

You also want to have jquery.js loaded before the bootstrap.js, because bootstrap.js depends on jquery.js being loaded first. The browser console would also tell you this - it's a very useful tool!

Upvotes: 0

Shtut
Shtut

Reputation: 1407

Generally in CSS, the more specific selector is taken into account. Let's say you have the following div:

<div id='myId' class='someClass'></div>

with the following CSS:

.someClass{
  background-color:red;
}
#myId{
  background-color:blue;
}

the div's background-color will be blue because it's more specific.

It's possible that the style of bootstrap provides a more specific selector than yours, and therefore overrides it.

Try adding an id to your div and see if it makes a difference. (since id's are unique they're as specific as can be)

Upvotes: 0

BenShelton
BenShelton

Reputation: 911

This is due to the way that CSS works, it will give certain priorities to styles depending on where they are located. The reason defining in the HTML (also called an inline style) works is because it's given higher priority. Using multiple stylesheets can cause problems and there are various solutions. You can use the keyword !important to give a certain style highest priority. It's generally discouraged because it makes it harder for others using your code to see why a style is being changed but if it's just yourself then go ahead:

.lukedbgcolor {
background-color: #4286f4 !important;
}

Upvotes: 2

Nick
Nick

Reputation: 1570

.panel.lukedbgcolor {
    background-color: #4286f4;
}

Upvotes: 0

Related Questions