Bootstrap 4 - Vertically align a div to a bottom of a column - html

I have a two-column layout with one element on the left and two on the right.
How can I keep the last element inside the right column aligned relatively to the bottom of the left column?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Bare - Start Bootstrap Template</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark static-top">
<div class="container">
<a class="navbar-brand" href="#">Start Bootstrap</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Page Content -->
<div class="container-fluid">
<div class="row">
<div class="col-7">
<div class="card card-block">
<h3>Column 1</h3>
<br />
<br />
<br />
<p>..end of content</p>
</div>
</div>
<div class="col-5">
<div class="row no-gutters">
<div class="col-12">
<div class="card card-block">
<h3>Column 2</h3>
</div>
</div>
<div class="col-12 align-self-end">
<div class="card card-block">
<h3>Column 3</h3>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Bootstrap core JavaScript -->
<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>
Thank you for your help!


By adding the .align-items-end to the parent row, it vertically aligns the columns to bottom of it.
If you want to have the column number 3 on the top but preserve the current position of column 4, I would suggest for you to take a look in to a jQuery library called eqHeight. This would allow you to stretch the parent columns (col-7 and col-5) to same height, after which the column number 3 should be on top with column 1.
<!-- Page Content -->
<div class="container-fluid">
<div class="row align-items-end">
<div class="col-7">
1<br>
<br>
<br>
2
</div>
<div class="col-5">
<div class="col-12">
3
</div>
<div class="col-12 align-self-end">
4
</div>
</div>
</div>
</div>


Why not use different row for 1 - 3 and 2 - 4.
Because you have using bootstrap grid system.
7 col - 5 col
-------------
Bootstrap two column layout
Kindly add style in fourth column div.
style="position: absolute;bottom: 0px;"
<!-- Page Content -->
<div class="container-fluid">
<div class="row">
<div class="col-7">
1 <br />
<br />
<br />
<br />
2
</div>
<div class="col-5">
<div class="row no-gutters">
<div class="col-12 align-self-end">
3
</div>
</div>
<div class="row no-gutters" >
<div class="col-12 align-self-end" style="position: absolute;
bottom: 0px; ">
4
</div>
</div>
</div>
</div>
</div>


This could be what you are looking for:
<div class="row">
<div class="col-md-6">
1
</div>
<div class="col-md-6">
3
</div>
</div>
<div class="row">
<div class="col-md-6">
2
</div>
<div class="col-md-6">
4
</div>
</div>
OR
<div class="row">
<div class="col-md-6">
1
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-12">
2
</div>
<div class="col-md-12">
3
</div>
</div>
</div>
</div>


<div class="col-5">
<row class="no-gutters">
<div class="col-lg-12">
3
</div>
<div class="col-lg-12">
4
</div>
</row>
</div>
It will take full width in any screen size.

Related

Bootstrap not loading when my html files are in templates folder

I am trying to do my very first own web app with Spring, Thymeleaf and everything seemed to be going well, however after I separated my html files in "templates" folder, since that is required to use thymeleaf, my bootstrap,JS,CSS and all my other resources stopped working.
I have my boostrap included with CDN with the css included in the header and JS,jQuery and popper included in the bottom of the body. I've tried moving the CDN links all in the header, removing my own js and css, however it didn't work.
You can review the html below:
<!doctype html>
<html lang="en"
xmlns:th="http://www.thymeleaf.org">
<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="../static/css/style.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>EventFinder</title>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-light bg-light sticky-top">
<div class="container-fluid">
<a class="navbar-brand">eventfinder</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive">
<span class="navbar-toggler-icon">
</span>
</button>
<div class="collapse navbar-collapse" id="#navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link active" aria-current="page" href="/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" aria-current="page" href="/">Organize an event</a>
</li>
<li class="nav-item">
<a class="nav-link" aria-current="page" href="/">Register</a>
</li>
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="/login">Login</a>
</li>
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="/">Logout</a>
</li>
</ul>
</div>
</div>
</nav>
<div id="slides" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="../static/images/music.jpg" class="d-block w-100" alt="Music events">
</div>
<div class="carousel-item">
<img src="../static/images/arts.jpg" class="d-block w-100" alt="Art events">
</div>
<div class="carousel-item">
<img src="../static/images/travel.jpg" class="d-block w-100" alt="Travel and outdoor events">
</div>
<div class="carousel-item">
<img src="../static/images/hobbies.jpg" class="d-block w-100" alt="Hobbies">
</div>
</div>
</div>
<div class="container-fluid padding">
<div class="row welcome text-center">
<div class="col-12">
<h1 class="display-4">Welcome to eventfinder.</h1>
</div>
<hr>
<div class="col-12">
<p class="lead">Here you can search, join and create all kind of events. Eventfinder is free of charge web app, where people with the same
interests can match and meet in real life.</p>
</div>
</div>
</div>
<div class="container-fluid padding">
<div class="row container-fluid padding">
<div class="person_container col-12 col-sm-6 col-md-4">
<div class="img-area">
<img src="../static/images/person1.jpg" class="img-thumbnail person_pic">
</div>
<p>Some text here</p>
</div>
<div class="person_container col-12 col-sm-6 col-md-4">
<div class="img-area">
<img src="../static/images/person2.jpg" class="img-thumbnail person_pic">
</div>
<p>Some text here</p>
</div>
<div class="person_container col-12 col-md-4">
<div class="img-area">
<img src="../static/images/person3.jpg" class="img-thumbnail person_pic">
</div>
<p>Some text here</p>
</div>
</div>
<hr class="my-4">
</div>
<div class="my-div-body">
<div class="row container-fluid">
<div class="col">
Most recently added events
</div>
</div>
<div class="row recently-added-container container-fluid">
<div class="col">
TO ADD EVENT HERE
</div>
<div class="col">
TO ADD EVENT HERE
</div>
<div class="col">
TO ADD EVENT HERE
</div>
</div>
</div>
<div class="container-fluid padding">
<div class="row welcome text-center">
<div class="col-12">
<h1 class="display-4">Best cities to visit</h1>
</div>
<hr>
<div class="container-fluid padding">
<div class="row padding">
<div class="col-md-4">
<div class="card">
<img class="city-img-top" src=""/>
<div class="card-body">
<h4 class="card-title">City Name</h4>
<p class="card-text">Some text here</p>
See more
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<img class="city-img-top" src=""/>
<div class="card-body">
<h4 class="card-title">City Name</h4>
<p class="card-text">Some text here</p>
See more
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<img class="city-img-top" src=""/>
<div class="card-body">
<h4 class="card-title">City Name</h4>
<p class="card-text">Some text here</p>
See more
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<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://cdn.jsdelivr.net/npm/popper.js#1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="../static/js/app.js"></script>
</body>
</html>
Also you can check my project structure here:
Thank you in advance!

It's best to let thymeleaf handle paths for resources and not use relative ones.
For example set the folowing properties
spring:
web:
resources:
static-locations: classpath:/static/
chain:
strategy:
content:
enabled: true
paths: /resources/**
and then in the html do
<link rel="stylesheet" th:href="#{/css/style.css}"> and
<img th:src="#{/images/person3.jpg}" class="img-thumbnail person_pic">
This way you do not have to add an arbitrary amount of ../ to paths

inappropriate behaviour on bootstrap tabs

I have a issue with tabs on Bootstrap:
I coded a page that's is suppose to be full width/height and the navbar would be the tabs.
I don't know why when I click on any tab button, It brings me a weird transition that isn't supposed to be there.
I just need a static tab menu, out off any transitions
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Daniel</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div class="navarea transition-width">
<nav role="navigation" class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
<span class="sr-only">Menu</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand">
LOGO
</a>
</div>
<div id="navbarCollapse" class="collapse navbar-collapse" data-toggle="collapse" data-target="#navbarCollapse">
<ul class="nav navbar-nav">
<li class="active">Tab1</li>
<li>Tab2</li>
<li>Tab3</li>
<li>Tab4</li>
<li>Tab5</li>
</ul>
</div>
</div>
</nav>
</div>
<div class="col-sm-12 col-md-12 col-lg-12">
<div class="tab-content text-center">
<div class="tab-pane active" id="tab1">
<br>
<br>
<br>
<h1>TAB 1</h1>
</div>
<div class="tab-pane" id="tab2">
<div class="tab-content text-center">
<div class="tab-pane active" id="tab1">
<br>
<br>
<br>
<h1>TAB 2</h1>
</div>
</div>
</div>
<div class="tab-pane" id="tab3">
<div class="tab-content text-center">
<br>
<br>
<br>
<h1>TAB 3</h1>
</div>
</div>
<div class="tab-pane" id="tab4">
<br>
<br>
<br>
<h1>TAB 4</h1>
</div>
<div class="tab-pane" id="tab5">
<br>
<br>
<br>
<h1>TAB 5</h1>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
Is better if you check out the snippet by full screen;

There's a lot of fluff in here that you probably don't need, but I removed one of the
data-target="#navbarCollapse"
and it stopped animating
Found this example on w3schools that you could probably check out as well:
https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_tabs_dynamic&stacked=h
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Daniel</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div class="navarea transition-width">
<nav role="navigation" class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
<span class="sr-only">Menu</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand">
LOGO
</a>
</div>
<div id="navbarCollapse" class="collapse navbar-collapse" data-toggle="collapse">
<ul class="nav navbar-nav">
<li class="active">Tab1</li>
<li>Tab2</li>
<li>Tab3</li>
<li>Tab4</li>
<li>Tab5</li>
</ul>
</div>
</div>
</nav>
</div>
<div class="col-sm-12 col-md-12 col-lg-12">
<div class="tab-content text-center">
<div class="tab-pane active" id="tab1">
<br>
<br>
<br>
<h1>TAB 1</h1>
</div>
<div class="tab-pane" id="tab2">
<div class="tab-content text-center">
<div class="tab-pane active" id="tab1">
<br>
<br>
<br>
<h1>TAB 2</h1>
</div>
</div>
</div>
<div class="tab-pane" id="tab3">
<div class="tab-content text-center">
<br>
<br>
<br>
<h1>TAB 3</h1>
</div>
</div>
<div class="tab-pane" id="tab4">
<br>
<br>
<br>
<h1>TAB 4</h1>
</div>
<div class="tab-pane" id="tab5">
<br>
<br>
<br>
<h1>TAB 5</h1>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

How to show multiple horizontal images in Bootstrap card?

How do I place multiple images side by side in a Bootstrap Card?
It should be multiple pictures, but only one title header and description.
In my code, the images start crossing over and intersecting each other.
Eventually, I'd like to use an array of pictures (two or more) and combine them with JavaScript.
The card can be as wide as needed.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="well text-center">
<div class="row">
<div class="col-md-6">
<img src="https://images.unsplash.com/reserve/bOvf94dPRxWu0u3QsPjF_tree.jpg?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="inn_logo">
</div>
<div class="col-md-6">
<img src="https://images.unsplash.com/reserve/bOvf94dPRxWu0u3QsPjF_tree.jpg?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="ccs_logo">
</div>
</div>
</div>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="card" style="width: 50rem;">
<!--Accordion wrapper-->
<div class="accordion md-accordion" id="accordionEx" role="tablist" aria-multiselectable="true">
<!-- Accordion card -->
<div class="card">
<div cardcheckbox id="checkboxdiv">
<input type="checkbox" class="cardcheckbox" id="checkid" align="right" onclick="toggleBoxVisibility()" />
</div>
<div class="well text-center">
<div class="col-md-12">Sister Properties:</div>
<div class="row">
<div class="col-md-6">
<img src="https://images.unsplash.com/reserve/bOvf94dPRxWu0u3QsPjF_tree.jpg?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="inn_logo">
</div>
<div class="col-md-6">
<img src="https://images.unsplash.com/reserve/bOvf94dPRxWu0u3QsPjF_tree.jpg?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="ccs_logo">
</div>
</div>
</div>
<!-- Card header -->
<div class="card-header" role="tab" id="headingOne1">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordionEx" href="#collapseOne1" aria-expanded="true" aria-controls="collapseOne1">
Tree
</a>
</div>
<!-- Card body -->
<div id="collapseOne1" class="collapse" role="tabpanel" aria-labelledby="headingOne1" data-parent="#accordionEx">
<div class="card-body">
Oak Tree with leaves in grassy picture with sunset
</div>
</div>
</div>
</div>
</div>

You might find Bootstrap's image-fluid class useful.
Images in Bootstrap are made responsive with .img-fluid.
max-width: 100%; and height: auto; are applied to the image so that it scales with the parent element.
Responsive images
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="well text-center">
<div class="row">
<div class="col-md-6">
<img src="https://images.unsplash.com/reserve/bOvf94dPRxWu0u3QsPjF_tree.jpg?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="inn_logo" class="img-fluid">
</div>
<div class="col-md-6">
<img src="https://images.unsplash.com/reserve/bOvf94dPRxWu0u3QsPjF_tree.jpg?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="ccs_logo" class="img-fluid">
</div>
</div>
</div>
Here's your second version with the checkbox.
You might consider using max-width instead of width to keep the card responsive.
.card {
max-width: 50rem;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="card">
<!--Accordion wrapper-->
<div class="accordion md-accordion" id="accordionEx" role="tablist" aria-multiselectable="true">
<!-- Accordion card -->
<div class="card">
<div cardcheckbox id="checkboxdiv">
<input type="checkbox" class="cardcheckbox" id="checkid" align="right" onclick="toggleBoxVisibility()" />
</div>
<div class="well text-center">
<div class="col-md-12">Sister Properties:</div>
<div class="row">
<div class="col-md-6">
<img src="https://images.unsplash.com/reserve/bOvf94dPRxWu0u3QsPjF_tree.jpg?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="inn_logo" class="img-fluid">
</div>
<div class="col-md-6">
<img src="https://images.unsplash.com/reserve/bOvf94dPRxWu0u3QsPjF_tree.jpg?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="ccs_logo" class="img-fluid">
</div>
</div>
</div>
<!-- Card header -->
<div class="card-header" role="tab" id="headingOne1">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordionEx" href="#collapseOne1" aria-expanded="true" aria-controls="collapseOne1">Tree</a>
</div>
<!-- Card body -->
<div id="collapseOne1" class="collapse" role="tabpanel" aria-labelledby="headingOne1" data-parent="#accordionEx">
<div class="card-body">
Oak Tree with leaves in grassy picture with sunset
</div>
</div>
</div>
</div>
</div>

Bootstrap thumbnails on multiple pages

I have set up a flask web app using bootstrap to style it. I have set it up so that specific images appear in the thumbnails. When the app is run the images do not appear in the thumbnails on all the specified html pages.
I have included the html which contains the thumbnails which load the images. I have also included the html which contains the thumbnails where the images do not appear. Thank you in advanced.
HTML with thumbnails that load images :
<html>
<head>
<title>
Recipes
| Baking Recipe Catalogue</title>
<meta charset="utf-8">
<meta name="description" content="Baking Recipe Catalogue">
<meta name="author" content="Joanna Mein">
<link href="/static/css/style.css" rel="stylesheet" >
<link href="/static/css/bootstrap.min.css" rel="stylesheet" />
<link href="/static/js/recipes.json" rel="json" />
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="navbar"> <span class="sr-only">Toggle navigation</span> </button>
<a class="navbar-brand" href="http://localhost:5000/">Baking Recipes</a> </div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>Recipes</li>
<li>Add Recipe</li>
</ul>
</div>
</div>
</nav>
<div class="img_cont">
<div class="img_cont bg_img">
<h1 class="banner">Baking Recipes</h1>
<h2 class="banner">Here you can find recipes depending on occasion or baking time</h2>
</div>
</div>
<div class="container-fluid">
<div class="container-fluid" class="row">
<div class="col-md-2 sidebar">
<h3 class="recipe_title">Find recipe by</h3>
<ul class="nav nav-tabs nav-stacked">
<li class="dropdown">Occasion
<ul class="dropdown-menu">
<li>Halloween</li>
<li>Bonfire Night</li>
<li>Christmas</li>
</ul>
</li>
<li class="dropdown">Baking Time
<ul class="dropdown-menu">
<li>Less than 10 Minutes</li>
<li>10 - 20 Minutes</li>
<li>20 - 30 Minutes</li>
<li>30 - 40 Minutes</li>
</ul>
</li>
</ul>
</div>
<div class='col-md-10 main'>
<h3>All Recipes</h3>
<div class="container_fluid" "row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="../static/imgs/pumpkin_pie.png" alt="Pumpkin Pie">
<div class="caption">
<h3>Pumpkin Pie</h3>
<p>Serves: 8</p>
<p>Cooking Time: 30 mins to 1 hour</p>
<p>See Recipe
</div>
</div>
</div>
</div>
<div class="container_fluid" "row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="../static/imgs/cobweb_cake.png" alt="Cobweb Cake">
<div class="caption">
<h3>Marshmallow Cobweb Cake</h3>
<p>Serves: 10</p>
<p>Cooking Time: 30 mins to 1 hour</p>
<p>See Recipe
</div>
</div>
</div>
</div>
<div class="container_fluid" "row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="../static/imgs/rocky_road.png" alt="Rocky Road">
<div class="caption">
<h3>Rocky Road Crunch Bars</h3>
<p>Serves: 24</p>
<p>Cooking Time: less than 10 mins</p>
<p>See Recipe
</div>
</div>
</div>
</div>
<div class="container_fluid" "row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="../static/imgs/peanut_squares.png" alt="Peanut Squares">
<div class="caption">
<h3>Peanut Butter Squares</h3>
<p>Serves: 16</p>
<p>Cooking Time: 10 to 30 mins</p>
<p>See Recipe
</div>
</div>
</div>
</div>
<div class="container_fluid" "row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="../static/imgs/toffee_muffins.png" alt=" Toffee Muffins">
<div class="caption">
<h3>Toffee Apple Muffins</h3>
<p>Serves: 12</p>
<p>Cooking Time: 30 mins to 1 hour</p>
<p>See Recipe
</div>
</div>
</div>
</div>
<div class="container_fluid" "row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="../static/imgs/christmas_wreath.png" alt=" Christmas Wreath">
<div class="caption">
<h3>Christmas Wreath Biscuits</h3>
<p>Serves: 18</p>
<p>Cooking Time: 10 mins to 30 mins</p>
<p>See Recipe
</div>
</div>
</div>
</div>
<div class="container_fluid" "row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="../static/imgs/gingerbread_baubles.png" alt=" Gingerbread Baubles">
<div class="caption">
<h3>Gingerbread Baubles</h3>
<p>Serves: 15</p>
<p>Cooking Time: 10 mins to 30 mins</p>
<p>See Recipe
</div>
</div>
</div>
</div>
<div class="container_fluid" "row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="../static/imgs/mince_pies.png" alt=" Mince Pies">
<div class="caption">
<h3>Easy Mince Pies</h3>
<p>Serves: 18</p>
<p>Cooking Time: 10 mins to 30 mins</p>
<p>See Recipe
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<footer>
<div class="container">
<p>Set09103 Coursework1 - Recipe Catalouge</p>
<p>Joanna Mein</p>
</div>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="/static/js/bootstrap.min.js"></script>
</body>
</html>
HTML that doesn't load images:
<html>
<head>
<title>
Halloween
| Baking Recipe Catalogue</title>
<meta charset="utf-8">
<meta name="description" content="Baking Recipe Catalogue">
<meta name="author" content="Joanna Mein">
<link href="/static/css/style.css" rel="stylesheet" >
<link href="/static/css/bootstrap.min.css" rel="stylesheet" />
<link href="/static/js/recipes.json" rel="json" />
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="navbar"> <span class="sr-only">Toggle navigation</span> </button>
<a class="navbar-brand" href="http://localhost:5000/">Baking Recipes</a> </div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>Recipes</li>
<li>Add Recipe</li>
</ul>
</div>
</div>
</nav>
<div class="img_cont">
<div class="img_cont bg_img1">
<h1 class="banner">Halloween Recipes</h1>
</div>
</div>
<div class="container-fluid">
<div class="container-fluid" class="row">
<div class="col-md-2 sidebar">
<h3 class="recipe_title">Find recipe by</h3>
<ul class="nav nav-tabs nav-stacked">
<li class="dropdown">Occasion
<ul class="dropdown-menu">
<li>Halloween</li>
<li>Bonfire Night</li>
<li>Christmas</li>
</ul>
</li>
<li class="dropdown">Baking Time
<ul class="dropdown-menu">
<li>Less than 10 Minutes</li>
<li>10 - 20 Minutes</li>
<li>20 - 30 Minutes</li>
<li>30 - 40 Minutes</li>
</ul>
</li>
</ul>
</div>
<div class='col-md-10 main'>
<h3>All Halloween Recipies</h3>
<div class="container_fluid" "row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="" alt="Pumpkin Pie">
<div class="caption">
<h3>Pumpkin Pie</h3>
<p>Serves: 8</p>
<p>Cooking Time: 30 mins to 1 hour</p>
<p>See Recipe
</div>
</div>
</div>
</div>
<div class="container_fluid" "row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="../static/imgs/cobweb_cake.png" alt="Cobweb Cake">
<div class="caption">
<h3>Marshmallow Cobweb Cake</h3>
<p>Serves: 10</p>
<p>Cooking Time: 30 mins to 1 hour</p>
<p>See Recipe
</div>
</div>
</div>
</div>
<div class="container_fluid" "row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="../static/imgs/rocky_road.png" alt="Rocky Road">
<div class="caption">
<h3>Rocky Road Crunch Bars</h3>
<p>Serves: 24</p>
<p>Cooking Time: less than 10 mins</p>
<p>See Recipe
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<footer>
<div class="container">
<p>Set09103 Coursework1 - Recipe Catalouge</p>
<p>Joanna Mein</p>
</div>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="/static/js/bootstrap.min.js"></script>
</body>
</html>
It should appear like this page
But instead appears like this on all the other pages

Bootstrap: Container is smaller than its columns, they cause an overflow

I have an attached background image on the container, but it only goes with like half the columns and then the columns overflow and the bg image stops.
i tried min-height
the 2 columns are in a container and the columns contain multiple rows
i don't understand why on earth the container is not growing with the columns
HTML:
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css">
<link rel="stylesheet" href="style.css" type="text/css"> </head>
<body>
<div class="bg-primary text-center d-flex align-items-center h-50" style="background-image: url("projektberge.png");">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1 class="display-1 text-white">COVER</h1>
<p class="lead text-white">Lorem ipsum dolor sit amet, consectetur adipisici elit.</p>
Button
</div>
</div>
</div>
</div>
<nav class="navbar navbar-expand-md navbar-light bg-faded text-center">
<div class="container">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbar2SupportedContent" aria-controls="navbar2SupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
<div class="collapse navbar-collapse text-center justify-content-center" id="navbar2SupportedContent">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="attached" style="background-image: url("FB-1_Christopher Gusenbauer_PanoramaBahnhof.jpg");">
<div class="h-100">
<div class="container-fluid w-100">
<div class="row h-100">
<div class="col-md-8">
<div class="row" style="height:100%">
<div class="col-md-2 h-100 bg-primary" style="height:100%">
<h1 class="">Summary</h1>
</div>
<div class="col-md-10 h-100">
<div class="row ">
<div class="jumbotron jumbotron-fluid w-100">
<div class="container">
<h1 class="display-3">Jumbotron</h1>
<p class="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent.</p>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-12"></div>
</div>
<div class="row bg-primary">
<div class="col-md-6 bg-secondary">
<img class="img-fluid d-block py-3" src="https://pingendo.com/assets/photos/wireframe/photo-1.jpg"> </div>
<div class="col-md-6 py-3">
<h1 class="">Heading</h1>
<p class="">Paragraph</p>
</div>
</div>
<div class="row">
<div class="col-md-12 bg-primary"></div>
</div>
<div class="row">
<div class="col-md-12 bg-primary">
<div class="container">
<header class="page-header">
<h1>Dark Responsive Timeline with Bootstrap</h1>
</header>
<ul class="timeline">
<li>
<div class="tldate">Apr 2014</div>
</li>
<li>
<div class="tl-circ"></div>
<div class="timeline-panel">
<div class="tl-heading">
<h4>Surprising Headline Right Here</h4>
<p><small class="text-muted"><i class="glyphicon glyphicon-time"></i> 3 hours ago</small></p>
</div>
<div class="tl-body">
<p>Lorem Ipsum and such.</p>
</div>
</div>
</li>
<li class="timeline-inverted">
<div class="tl-circ"></div>
<div class="timeline-panel">
<div class="tl-heading">
<h4>Breaking into Spring!</h4>
<p><small class="text-muted"><i class="glyphicon glyphicon-time"></i> 4/07/2014</small></p>
</div>
<div class="tl-body">
<p>Hope the weather gets a bit nicer...</p>
<p>Y'know, with more sunlight.</p>
</div>
</div>
</li>
<li>
<div class="tldate">Mar 2014</div>
</li>
<li>
<div class="tl-circ"></div>
<div class="timeline-panel">
<div class="tl-heading">
<h4>New Apple Device Release Date</h4>
<p><small class="text-muted"><i class="glyphicon glyphicon-time"></i> 3/22/2014</small></p>
</div>
<div class="tl-body">
<p>In memory of Steve Jobs.</p>
</div>
</div>
</li>
<li class="timeline-inverted">
<div class="timeline-panel">
<div class="tl-heading">
<h4>No icon here</h4>
<p><small class="text-muted"><i class="glyphicon glyphicon-time"></i> 3/16/2014</small></p>
</div>
<div class="tl-body">
<p>Here you'll find some beautiful photography for your viewing pleasure, courtesy of
lorempixel.</p>
<p>
<img src="http://lorempixel.com/600/300/nightlife/" alt="lorem pixel"> </p>
</div>
</div>
</li>
<li>
<div class="tl-circ"></div>
<div class="timeline-panel">
<div class="tl-heading">
<h4>Some Important Date!</h4>
<p><small class="text-muted"><i class="glyphicon glyphicon-time"></i> 3/03/2014</small></p>
</div>
<div class="tl-body">
<p>Write up a quick summary of the event.</p>
</div>
</div>
</li>
<li>
<div class="timeline-panel noarrow">
<div class="tl-heading">
<h4>Secondary Timeline Box</h4>
<p><small class="text-muted"><i class="glyphicon glyphicon-time"></i> 3/01/2014</small></p>
</div>
<div class="tl-body">
<p>This might be a follow-up post with related info. Maybe we include some extra links, tweets, user comments, photos, etc.</p>
</div>
</div>
</li>
<li>
<div class="tldate">Feb 2014</div>
</li>
<li class="timeline-inverted">
<div class="tl-circ"></div>
<div class="timeline-panel">
<div class="tl-heading">
<h4>The Winter Months</h4>
<p><small class="text-muted"><i class="glyphicon glyphicon-time"></i> 02/23/2014</small></p>
</div>
<div class="tl-body">
<p>Gee time really flies when you're having fun.</p>
</div>
</div>
</li>
<li>
<div class="tl-circ"></div>
<div class="timeline-panel">
<div class="tl-heading">
<h4>Yeah we're pretty much done here</h4>
<p><small class="text-muted"><i class="glyphicon glyphicon-time"></i> 02/11/2014</small></p>
</div>
<div class="tl-body">
<p>Wasn't this fun though?</p>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="row">
<div class="col-md-12"></div>
</div>
</div>
<div class="row"> </div>
<div class="row"> </div>
<div class="row"> </div>
<div class="row"> </div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://pingendo.com/assets/bootstrap/bootstrap-4.0.0-alpha.6.min.js"></script>
</div>
</body>
</html>

It's a bug in Boostrap 4 alpha 6.
It's fixed in Boostrap 4 beta 1 that it's under development.
I noticed you are using Pingendo, you can use the Bootstrap 4 beta 1 version changing the import at the end of your sass file in
#import 'bootstrap-4.0.0-alpha.6';

It seems you haven't included bootstrap references inside your head tag
Here are the links - Bootstrap Js Link
Bootstrap CSS Link
Add them like this.
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.1/css/bootstrap.min.css" integrity="sha512-siwe/oXMhSjGCwLn+scraPOWrJxHlUgMBMZXdPe2Tnk3I0x3ESCoLz7WZ5NTH6SZrywMY+PB1cjyqJ5jAluCOg==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.1/js/bootstrap.min.js" integrity="sha512-vyRAVI0IEm6LI/fVSv/Wq/d0KUfrg3hJq2Qz5FlfER69sf3ZHlOrsLriNm49FxnpUGmhx+TaJKwJ+ByTLKT+Yg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>