How do you do padding for bootstrap img-fluid - html

Not much of a front end developer, I tried all kinds of trix, margin, p-0, style="padding:20px" but nothing seems to be moving my fluid image to position it where I want during page load, assistance much appreciated.
**HTML**
<img class="img-fluid" src="~/Content/MyImage.jpg"/>
**CSS**
.img-fluid {
padding-left:20px;
}


I don't know what you exactly want.
So I have guesswork you want use "Bootstrap" because you did written "img-fluid" class.
I think the code below will help you.
HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap CSS CDN -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<!-- Bootstrap JS CDN -->
<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>
<title>Demo</title>
</head>
<body>
<div id="root" class="container-fluid">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<img class="img-fluid" src="https://placehold.it/1920x1080.png" alt="image"/>
</div>
</div>
</div>
</body>
</html>
CSS Code
html, body {
width: 100%;
height: 100%;
}
.row > div {
padding-left: 0px;
padding-right: 0px;
}
.img-fluid {
padding-left: 20px;
padding-right: 20px;
}

Related

How to properly size a logo in bootstrap navbar

<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<link href="./styles.css">
<title>Hello, world!</title>
</head>
<body>
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img style="padding: 0%;"src="./imgs/HHLogo-1 (1).png" alt="" width="30" height="auto" class="d-inline-block align-top">
</a>
</div>
</nav>
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.5.4/dist/umd/popper.min.js" integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/js/bootstrap.min.js" integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj" crossorigin="anonymous"></script>
-->
</body>
</html>
I am trying to stick a company logo in the navbar in bootstrap5. The image is an png. For some reason the image is properly sized but the navbar is way too thick. How can I size the navbar appropriately? . I have tried everything I have came across on here on stackoverflow and other forums/websites. I have tried changed padding and max navbar height among other things. Can you help me out?? Thank you so much any insight is much appreciated.

I added two selectors to your css - .navbar-brand { ... } and .navbar-brand > img { ... }:
.navbar-brand {
width: 150px;
}
.navbar-brand > img {
width: 100%;
}
Now you can adjust the size of the navbar and logo yourself by changing the width of the .navbar-brand { ... } selector.
html, body {
height: 100%;
margin: 0;
}
.navbar-brand {
width: 150px;
}
.navbar-brand > img {
width: 100%;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<link href="./styles.css">
<title>Hello, world!</title>
</head>
<body>
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img style="padding: 0%;"src="https://i.stack.imgur.com/RHYjg.png" alt="" width="30" height="auto" class="d-inline-block align-top">
</a>
</div>
</nav>
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.5.4/dist/umd/popper.min.js" integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/js/bootstrap.min.js" integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj" crossorigin="anonymous"></script>
-->
</body>
</html>

use this
nav a.navbar-brand {
max-width: 150px;
margin: 0;
}

HTML + CSS - Resize images for mobile only

I'll just jump straight in and show you rather than explain.
So this is how my website looks on browser:
And this is how my website looks when it's viewed on mobile:
Anyone give me any advice on how to fix it? I've tried bootstrap and media queries but im struggling with getting something to resize the images to a small enough size so that they appear next to each other on mobile.
Head:
img.mob-img {
width: 220;
height: 333;
}
#media screen and (max-width: 992) {
img.mob-img {
width: 100px;
height: auto;
}
}
#media screen and (max-width: 600) {
img.mob-img {
width: 100px;
height: auto;
}
}
<head>
<title>DrinkMania - Drink or Dare</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<meta name="robots" content="index, follow">
<meta name="description" content="Drink or Dare! - Truth or dare developed with students in mind!">
<meta name="keywords" content="kings, ring of fire, drinking games, drinkmania, drinking games online,student, frat, dirty pint, kings cup, drinking games online,
app, mobile website, android, ios, reddit, scott montford, playing cards, university, party, friends, talisman webs">
<link rel="stylesheet" href="assets/css/main.css" />
<link rel="icon" href="favicon.ico" type="image/x-icon"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-145322216-2"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', '');
</script>
</head>
<body class="is-preload">
Section of the body:
<!-- Banner -->
<section id="banner" data-video="images/banner">
<div class="inner">
<header>
<h1>Drink or Dare</h1><br>
<p id="kingCount"></p><br>
<img id="drinks" class="mob-img" src="assets/js/games/Cards/card-placeholder.png" > OR
<img id="wildcard" class="mob-img" src="assets/js/games/Cards/card-placeholder.png" >
</header>
<ul class="actions special">
<li>Draw 2 Cards</li><br>
</ul>
</div>
Learn More
<video src="images/banner.mp4" muted autoplay loop playsinline></video>
</section>
</body>

I set the image into a container <div style="display:flex; justify-content:center;"> and add max-width to your image css
img.mob-img {
width: 220px;
height: 333px;
}
#media screen and (max-width: 992) {
img.mob-img {
max-width: 100px;
height: auto;
}
}
#media screen and (max-width: 600) {
img.mob-img {
max-width: 100px;
height: auto;
}
}
<head>
<title>DrinkMania - Drink or Dare</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<meta name="robots" content="index, follow">
<meta name="description" content="Drink or Dare! - Truth or dare developed with students in mind!">
<meta name="keywords" content="kings, ring of fire, drinking games, drinkmania, drinking games online,student, frat, dirty pint, kings cup, drinking games online,
app, mobile website, android, ios, reddit, scott montford, playing cards, university, party, friends, talisman webs">
<link rel="stylesheet" href="assets/css/main.css" />
<link rel="icon" href="favicon.ico" type="image/x-icon"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-145322216-2"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', '');
</script>
</head>
<body class="is-preload">
Section of the body:
<!-- Banner -->
<section id="banner" data-video="images/banner">
<div class="inner">
<header>
<h1>Drink or Dare</h1><br>
<p id="kingCount"></p><br>
<div style="display:flex; justify-content:center;">
<img id="drinks" class="mob-img" src="https://cdn.pixabay.com/photo/2020/01/31/07/10/billboards-4807268_960_720.jpg" > OR
<img id="wildcard" class="mob-img" src="https://cdn.pixabay.com/photo/2018/03/06/20/25/dog-3204497_960_720.jpg" >
</div>
</header>
<ul class="actions special">
<li>Draw 2 Cards</li><br>
</ul>
</div>
Learn More
<video src="images/banner.mp4" muted autoplay loop playsinline></video>
</section>
</body>

OK, you don't need to set two different max-widths when the values you're putting in them are the same. I would put the width at 100% with a max-width of 100px if that's the size you need. I'm not a big fan of inline css like you have it. I would rename the div you have the flex applied to and then put the code in with your other styling so it's not all over the place. It just helps to see it in one spot if you can.
<div id="cards">
<img id="drinks" class="mob-img" src="https://cdn.pixabay.com/photo/2020/01/31/07/10/billboards-4807268_960_720.jpg" > OR
<img id="wildcard" class="mob-img" src="https://cdn.pixabay.com/photo/2018/03/06/20/25/dog-3204497_960_720.jpg" >
</div>
CSS
#cards {
display:flex;
justify-content:center;
}
img.mob-img {
width: 220px;
height: 333px;
}
#media screen and (max-width: 992px) {
img.mob-img {
width: 100%;
max-width: 100px;
height: auto;
}
}

is this what you are trying to do? I made sure it is responsive too. I didn't need to use any of the CSS you provided since you said you are using bootstrap.
I also made a few changes to the HTML by adding more divs to get this result.
if this is not your desired output please let me know in a comment I will try my best to help you out.
Ps. I commented out the video because it was causing horizontal scrolling.
.image-container {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.image-holder {
padding: 10px;
}
<!-- CSS only -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<section id="banner" data-video="images/banner">
<div class="inner">
<header>
<h1>Drink or Dare</h1><br>
<p id="kingCount"></p><br>
<div class="holder">
<div class="image-container">
<div class="image-holder">
<img id="drinks" class="mob-img img-fluid" src="https://picsum.photos/200">
</div>
<span>OR</span>
<div class="image-holder">
<img id="drinks" class="mob-img img-fluid" src="https://picsum.photos/201">
</div>
</div>
</div>
</header>
<ul class="actions special">
<li>Draw 2 Cards</li><br>
</ul>
</div>
Learn More
<!-- <video src="images/banner.mp4" muted autoplay loop playsinline></video> -->
</section>
<!-- JS, Popper.js, and jQuery -->
<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.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous">
</script>

Background image won't show up in header

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

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

bootstrap img responsive height does not keep container height

I have an image that want to be responsive to the container size.
The parent container (cover-photo) has a height of 180px.
The image has a height of 853px. However when using img-fluid, the image does not keep the container height of 180px instead it keeps its own height of 853px.
<!doctype html>
<html lang="en">
<head>
<title>Hello, world!</title>
<!-- 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="css/bootstrap.min.css">
<style>
.cover-photo {
height: 180px;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="container">
<div class="row">
<div class="cover-photo">
<img class="img-fluid" src="http://newlovewallpapers.in/images/hd-love-images-and-wallpaper/hd-love-images-and-wallpaper-11-1280.jpg" alt="Background profile">
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="js/bootstrap.min.js"></script>
<!-- <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script> -->
<script src="js/parallax.js"></script>
</body>
</html>
I understand that img-fluid in Bootstrap is max-width: 100%; and height: auto; and are applied to the image so that it scales with the parent element. But in this case it does not scale to the parent height.
Any insights? Thanks!

Good morning
You need to give following CSS to img-fluid class
.img-fluid {
max-height: 100%;
max-width: 100%;
height: auto;
width: auto;
}