Background image won't show up in header - html

I am trying to follow along on Colt Steele's course and for some reason my background image will not show up. I've checked everything and I'm stuck. I tried writing in the style tag and inserting the background in html instead of creating a separate css file like he did and it did not work. So instead I tried to just make a separate css file which I'm more comfortable with so far. Please let me know what I can do. Thank you!
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" type="text/css" href="app3.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<style>
#header {
background-image: url("imgs/header.jpeg");
}
</style>
<title>Pattern</title>
</head>
<body>
<nav class="navbar bg-dark navbar-dark">
<div class="container">
Quarantine Pal
</div>
</nav>
<section id="header" class="jumbotron text-center">
<h1 class="display-3">Blog</h1>
<p class="lead">Lorem ipsum</p>
Do Something
Another Thing
</section>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</body>
</html>
CSS
#header {
background-image: url(https://images.unsplash.com/photo-1564667005686-cce951e72bd0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3150&q=80) !important;
}


Your URL needs to be a string i.e you need to add an apostrophe ( ' ) on each side of it ('https://images.unsplash...'):
#header {
background-image: url('https://images.unsplash.com/photo-1564667005686-cce951e72bd0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3150&q=80') !important;
}

Related

Is there a way to to use the nav html code on every page without adding it to each html file? (keeping it DRY)

I usually use PHP where we have a header.php file and a footer.php. Which means you don't need to repeat the same blocks of code for each of these sections on your other pages.
I'm creating a site with just HTML that has a few pages, but I don't want to use the nav code on each of my html files.
Is there any way to achieve what I want with HTML?

I normally keep using php for this. Even if there is no php code, only the include. Else you need to use javascript for it: https://devdojo.com/tnylea/include-html-inside-of-html
But using php is the most easy and standard way. Why wouldn't you want to use php and only html?
EDIT: You could use iframe for it by the way.

The way this is done when one wishes not to use php is by using an iframe. I have included an example for you below!
iframe.html
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<nav class="nav justify-content-center|justify-content-end">
<a class="nav-link active" href="#">Active link</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link disabled" href="#">Disabled link</a>
</nav>
<!-- Bootstrap JavaScript Libraries -->
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.2/dist/umd/popper.min.js"
integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.min.js"
integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF"
crossorigin="anonymous"></script>
</body>
</html>
home.html
<!doctype html>
<html lang="en">
<head>
<title>Iframe Nav Bar</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS v5.0.2 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<style>
iframe {
width: 100vw;
height: 20vh;
}
</style>
</head>
<body>
<iframe src="iframe.html" frameborder="0"></iframe>
<!-- Bootstrap JavaScript Libraries -->
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
</body>
</html>

Why is the entire html body stuck at the top of the viewport?

I am writing a commandline tool for myself to generate a quick html bootstrap starter and I have an index page, which is supposed to include a basic navbar at the top and a footer that sticks to the bottom of the page. I have used this same template before for other projects and it worked perfectly. But for some reason it won't work now. all the content is stuck at the top of the page. If I inspect the page, the entire html tag contents are at the top of the page and most of the page is blank document. Here is the html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="static/css/custom.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="css/custom.css">
<title>Bootstrap Starter</title>
</head>
<body class="d-flex flex-column">
<!-- Navbar-->
<nav class="navbar navbar-dark bg-dark">
<span class="navbar-text">
Bootstrap Starter
</span>
</nav>
<!-- Content -->
<div class="container content"></div>
<!-- Footer-->
<div class="footer">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script><!-- Footer bar-->
<div class="p-4 mt-5 bg-light text-center"><small>© Your Name, </small></div>
</div>
</body>
</html>
And here is the css:
* custom styles */
/* Sticky footer */
html, body {
height: 100% !important;
}
.content {
flex: 1 0 auto !important;
}
Can anyone tell me why this isn't producing the desired result? Thanks.

Your css was moved into the document and now it works. What this indicates to me is an issue with the external stylesheet. I notice that you have 2 custom stylesheets, 1 before 3rd party stylesheets and 1 after. The browser respects the order, so if your code was in the first stylesheet the 3rd party stylesheets may have overwritten your custom rules.

bootstrap 4 internal css modification

I'm new to bootstrap. Can anyone lend some insight on how to modify bootstrap. I created a example site but having trouble modifying after basic bootstrap. I have "container" and have the font blue but when I created another container "container new-place" and try to modify with interal css it doesn't work. Can I create my own "custom" bootstrap classes? How do I change the text of lets say I have ten "container new-place" and five "container" how can i modify each group?
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" http-equiv="X-UA-Compatible" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<style>
h1 {
color:yellow;
}
.container{
color:blue;
}
.container new-place {
color:red;
}
</style>
<title>Practice Title</title>
</head>
<body>
<div class="jumbotron jumbotron-fluid">
<div class="container">
<h1 class="display-3">Fluid jumbo heading</h1>
<p class="lead">Jumbo helper text</p>
<hr class="my-2">
<p>More info</p>
<p class="lead">
<a class="btn btn-primary btn-lg" href="Jumbo action link" role="button">Jumbo action name</a>
</p>
</div>
</div>
<div class="container new-place" date-time="00:00">
<h1>hello</h1>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>

You have the right idea, but the implementation is slightly wrong.
For example
<div class="container new-place" date-time="00:00">
<h1>hello</h1>
</div>
You have created a style which combines two classes. This is correct as it will have a greater specificity and allow you to override the Bootstrap style. The css is incorrect. You have
.container new-place {
color:red;
}
The css should be
.container.new-place {
color:red;
}
Now the style will apply correctly.

You can. Use !important. For example:
.container{
color:blue !important;
}
.new-place {
color:red !important;
}

How to include Bootstrap in an iFrame

I'm currently working on a project which requires me to use Bootstrap within an iFrame. I tried including it in the head of the document, but it's not being applied to the iFrame. I've been trying to insert the Bootstrap link into the head of the iFrame, but I can't target it. I even tried including it twice (in the containing document and in the head of the iFrame) and it's not being applied. Can anyone suggest a good way to do this?
Here's what I have so far:
index.html
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
</head>
<body>
<div class="row">
<iframe id="iframe" class="col-lg-12 col-md-12 col-sm-12">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
</head>
</iframe>
</div>
</body>

Why would u add CDN to body tag ? This is how iframe with bootstrap is done.
<html>
<head>
<meta name="viewport" content="width=device-width, initialscale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<div class="row">
<iframe id="iframe" class="col-lg-12 col-md-12 col-sm-12"></iframe>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>

Bootstrap 4.1.3: sidebar doesn't show up when applying blockquote class

When using the blockquote class in Bootstrap 4.1.3 the effects are applied except for the sidebar.
Here's how it looks in tutorials:
Here's how it looks in my browser (chrome):
I've tried it in different browsers, and I couldn't solve it with this post.
Is it just my computer? Is there another css class overriding the sidebar? Thanks for your help.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous">
<title>Bootstrap</title>
</head>
<body>
<div class="container">
<blockquote class="blockquote">
<p class="mb-0"> Text for the blockquote. Text for the blockquote.</p>
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script
src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384- q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous">
</script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin="anonymous">
</script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin="anonymous">
</script>
</body>
</html>

The post you linked to seems to be encountering this error because he is using a beta version of Bootstrap. Is it the case for you somehow? Have you checked the codepen linked in the post?