Custom CSS Won't Work With Bootstrap

Question

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!

If you do an inspect element on the div, is it picking up the class lukedbgcolor at all? My guess would be the bootstrap CSS is more specific than your selectors and thus being applied. — mikeg542
– mikeg542, Commented Feb 24, 2017 at 19:51
Yes, the problem is specifity of the CSS selectors. Also jQuery should be included before bootstrap.js although it's unrelated to the CSS issue. — Carol Skelly
– Carol Skelly, Commented Feb 24, 2017 at 19:56
Can you screenshot the devtools? It seems to be working fine to me — Suthan Bala
– Suthan Bala, Commented Feb 24, 2017 at 20:07
If you can, avoid using !important, will affect code manteinance later.... you can use multiple class such .panel.panel-default.lukedbgcolor { background-color: #4286f4; } which will do the trick. — Jesus Lugo
– Jesus Lugo, Commented Feb 25, 2017 at 4:41

lukej · Accepted Answer · 2017-03-03 17:28:31Z

5

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

answered Mar 3, 2017 at 17:28

lukej

811 gold badge1 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

BenShelton · Accepted Answer · 2017-02-24 19:58:14Z

2

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;
}

answered Feb 24, 2017 at 19:58

BenShelton

9111 gold badge8 silver badges20 bronze badges

Comments

Nick · Accepted Answer · 2017-02-24 19:51:10Z

0

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

answered Feb 24, 2017 at 19:51

Nick

1,5702 gold badges16 silver badges23 bronze badges

Comments

Shtut · Accepted Answer · 2017-02-24 20:00:35Z

0

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)

answered Feb 24, 2017 at 20:00

Shtut

1,4072 gold badges15 silver badges29 bronze badges

1 Comment

lukej Over a year ago

This was not a specificity issue, I believe the fix is in my answer response.

Ken H. · Accepted Answer · 2017-02-24 20:16:40Z

0

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!

edited Feb 24, 2017 at 20:16

answered Feb 24, 2017 at 19:56

Ken H.

4081 gold badge3 silver badges11 bronze badges

Collectives™ on Stack Overflow

Custom CSS Won't Work With Bootstrap

5 Answers 5

Comments

Comments

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related