NIKNAIZ NIKNAIZ - 4 years ago 194
HTML Question

Bootstrap conflicts with my own css file

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="">

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="">
<script src=""></script>
<script src=""></script>
<link rel="stylesheet" href="main.css">

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

<section class="parallax">
<div class="parallax-inner">

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

.parallax {
background: url("") 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.

Answer Source

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">...

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download