Bootstrap conflicts with my own css file

Question

My custom main.css can't change the font size or the location where's the text located at, but when I delete the bootstrap assigning line, it works.

I assume the bootstrap.css has already set the appearance of those attributes I want to change, so they take to effect from my main.css unless I delete the

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

Here's how my head section looks like, I have read that I have to assign my custom main.css after bootstrap, here it is`

<title>For Testing Purposes</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="main.css">

Here is the HTML code of attributes I want to change`

<h1>Space</h1>
<section class="parallax">
  <div class="parallax-inner">
    <h2>Space</h2>
  </div>
</section>
<h1>Space</h1>

And here is my main.css, which takes effect only when the bootstrap line is deleted.

.parallax {
  background: url("http://s1.picswalls.com/wallpapers/2014/02/19/latest-space-wallpaper_110926700_30.jpg") center fixed;
  background-size: 100% 100%;
}
.parallax-inner {
  padding-top: 10%;
  padding-bottom: 10%;
  text-align: center;
  font-size: 575%;
}
.h1 {
  font-size: 575%;
}

I have tried !importnant tags too.

Johannes · Accepted Answer · 2015-12-29 22:55:42Z

1

I am not a bootstrap expert, but .parallax and .parallax-inner sound as if these classes would be used for parallax effects in Bootstrap. So they are probably altered dynamically by a javascript, which also affects your own classes with the same name.

If possible, just rename your own classes and CSS rules. You can also add own classes as a second class to an element, like <div class="parallax my_class">...

answered Dec 29, 2015 at 22:55

Johannes

67.9k22 gold badges84 silver badges139 bronze badges

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

1 Comment

NIKNAIZ Over a year ago

Renaming the parallax and parallax-inner to something more original solved the problem! Thank you very much!

Ali Elzoheiry · Accepted Answer · 2015-12-29 22:42:16Z

0

To override a pre existing style use !important after your CSS rule. For example.

h4 {
  font-size: 14px !important
}

The above rule will override any other font size assignment for h4

answered Dec 29, 2015 at 22:42

Ali Elzoheiry

1,6821 gold badge14 silver badges16 bronze badges

Comments

Zivanovic · Accepted Answer · 2015-12-29 22:44:51Z

0

You have to be more specific if you want to bypass conflicts with bootstrap styles.For example, you could target .parallax div with its parent element.

answered Dec 29, 2015 at 22:44

Zivanovic

1341 silver badge7 bronze badges

Comments

Nick Nasirpour · Accepted Answer · 2015-12-29 22:49:39Z

0

In CSS, a period . denotes a class. If you want to work with the tags alone, simply put 'h1' instead of '.h1' in your css stylesheet.

.parallax {
  background: url("http://s1.picswalls.com/wallpapers/2014/02/19/latest-space-wallpaper_110926700_30.jpg") center fixed;
  background-size: 100% 100%;
}
.parallax-inner {
  padding-top: 10%;
  padding-bottom: 10%;
  text-align: center;
  font-size: 575%;
}
.h1 {
  font-size: 575%;
}

answered Dec 29, 2015 at 22:49

Nick Nasirpour

2681 silver badge8 bronze badges

Comments

user28479390 · Accepted Answer · 2024-11-25 16:42:07Z

0

The order of CSS inclusion in an HTML document determines how styles are applied and whether one stylesheet overrides another. This is due to the cascade and specificity principles in CSS. Placing your external CSS after Bootstrap ensures your styles take precedence, provided they have equal or greater specificity. This approach respects the cascading nature of CSS and avoids unnecessary conflicts.

edited Nov 25, 2024 at 16:42

answered Nov 25, 2024 at 16:23

user28479390

11 bronze badge

Collectives™ on Stack Overflow

Bootstrap conflicts with my own css file

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related