Nolan D. Nolan D. - 3 months ago 16
CSS Question

Bootstrap changing background-color

Working on a quote generator website. I added bootstrap, and in the css code, I have a part where I set the HTML element's background-color to a blue-green mix shade. bootstrap just decides to override the CSS code and sets the part of the page that has content's background color to white. Why and how can I keep my background-color to what I want it to be



var quotes = [
[
"To be prepared for war is one of the most effectual means of preserving peace.",
"George Washington"
],
[
"One man with courage is a majority.",
"Thomas Jefferson"
],
[
"National honor is a national property of the highest value.",
"James Monroe"
],
[
"The only thing we have to fear is fear itself.",
"Theodore D. Roosevelt"
],
[
"Ask not what your country can do for you, but what you can do for your country.",
"John F. Kennedy"
]

];
var currentQuote = 0;
function showNewQuote() {
if (currentQuote >= 5) {
currentQuote = 0;
}
var Quote = [quotes[currentQuote][0], quotes[currentQuote][1]];
document.getElementById("header").innerHTML = "\"" + Quote[0] + "\"";
document.getElementById("paragraph").innerHTML = Quote[1];
currentQuote++;
}

html {
background-color: #33cccc;
}

#header, #paragraph {
font-family: sans-serif;

}

#header {
padding-top: 10%;
font-size: 60px;
}

#paragraph {
padding-left: 80%;
font-size: 20px;
}

<!DOCTYPE html>
<html>
<head>
<title>Random Quote Generator</title>
<script src = "script.js"></script>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class = "container">
<h1 id="header">Click the button to generate a quote!</h1>
<p id="paragraph"></p>
<button type="button" class="btn btn-info" onclick="showNewQuote()">Generate New Quote</button>
</div>
</body>
</html>




Answer

Option 1: Make sure your css is loaded after the bootstrap.css file.

var quotes = [
    [
        "To be prepared for war is one of the most effectual means of preserving peace.",
        "George Washington"
    ],
    [
        "One man with courage is a majority.",
        "Thomas Jefferson"
    ],
    [
        "National honor is a national property of the highest value.",
        "James Monroe"
    ],
    [
        "The only thing we have to fear is fear itself.",
        "Theodore D. Roosevelt"
    ],
    [
        "Ask not what your country can do for you, but what you can do for your country.",
        "John F. Kennedy"
    ]
    
];
var currentQuote = 0;
function showNewQuote() {
	if (currentQuote >= 5) {
		currentQuote = 0;	
	}
	var Quote = [quotes[currentQuote][0], quotes[currentQuote][1]];
	document.getElementById("header").innerHTML = "\"" + Quote[0] + "\"";
	document.getElementById("paragraph").innerHTML = Quote[1];
	currentQuote++;
}
<script src = "script.js"></script>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style>
body {
	background-color: #33cccc;
}

#header, #paragraph {
	font-family: sans-serif;
	
}

#header {
	padding-top: 10%;
	font-size: 60px;
}

#paragraph {
	padding-left: 80%;
	font-size: 20px;
}
  </style>
<body>
	<div class = "container">
    <h1 id="header">Click the button to generate a quote!</h1>
	<p id="paragraph"></p>
	<button type="button" class="btn btn-info" onclick="showNewQuote()">Generate New Quote</button>
	</div>
</body>
</html>

Option 2: Use the !important keyword:

var quotes = [
    [
        "To be prepared for war is one of the most effectual means of preserving peace.",
        "George Washington"
    ],
    [
        "One man with courage is a majority.",
        "Thomas Jefferson"
    ],
    [
        "National honor is a national property of the highest value.",
        "James Monroe"
    ],
    [
        "The only thing we have to fear is fear itself.",
        "Theodore D. Roosevelt"
    ],
    [
        "Ask not what your country can do for you, but what you can do for your country.",
        "John F. Kennedy"
    ]
    
];
var currentQuote = 0;
function showNewQuote() {
	if (currentQuote >= 5) {
		currentQuote = 0;	
	}
	var Quote = [quotes[currentQuote][0], quotes[currentQuote][1]];
	document.getElementById("header").innerHTML = "\"" + Quote[0] + "\"";
	document.getElementById("paragraph").innerHTML = Quote[1];
	currentQuote++;
}
body {
	background-color: #33cccc !important;
}

#header, #paragraph {
	font-family: sans-serif;
	
}

#header {
	padding-top: 10%;
	font-size: 60px;
}

#paragraph {
	padding-left: 80%;
	font-size: 20px;
}
<!DOCTYPE html>
<html>
<head>
    <title>Random Quote Generator</title>
    <script src = "script.js"></script>
    <link rel="stylesheet" type="text/css" href="stylesheet.css">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
	<div class = "container">
    <h1 id="header">Click the button to generate a quote!</h1>
	<p id="paragraph"></p>
	<button type="button" class="btn btn-info" onclick="showNewQuote()">Generate New Quote</button>
	</div>
</body>
</html>

(Note that I also made a change from html to body in your css)