Vertical align list-group bootstrap - html

How I can align bootstrap group center?
I have code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">
Your dialogs
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">
<div class="avatar">
<img src="https://assets.servedby-buysellads.com/p/manage/asset/id/32054" alt="">
</div>
<div class="user-name">Dima</div>
<div class="message float-left">Hello?</div>
<span class="date text-mutted float-right">19:07</span>
</li>
<li class="list-group-item">
<div class="avatar">
<img src="https://assets.servedby-buysellads.com/p/manage/asset/id/32054" alt="">
</div>
<div class="user-name">Jack</div>
<div class="message float-left">Nope</div>
<span class="date text-mutted float-right">20:07</span>
</li>
<li class="list-group-item">
<div class="avatar">
<img src="https://assets.servedby-buysellads.com/p/manage/asset/id/32054" alt="">
</div>
<div class="user-name">Madonna</div>
<div class="message float-left">Lol?</div>
<span class="date text-mutted float-right">22:04</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
Avatar and time elements I get not on center.
I tryied do align-items-center, but I get all items on center horizontally...
How I can fix this?
Example:
http://jsbin.com/raqatuyeho/1/edit


use bootstrap utility class.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">
Your dialogs
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item d-flex align-items-center">
<div class="avatar">
<img src="https://assets.servedby-buysellads.com/p/manage/asset/id/32054" alt="">
</div>
<div class="w-100">
<div class="user-name">Jack</div>
<div class="message bg-light">Nope</div>
</div>
<span class="date text-mutted ml-auto">20:07</span>
</li>
<li class="list-group-item d-flex align-items-center">
<div class="avatar">
<img src="https://assets.servedby-buysellads.com/p/manage/asset/id/32054" alt="">
</div>
<div class="w-100">
<div class="user-name">Jack</div>
<div class="message bg-light">Nope</div>
</div>
<span class="date text-mutted ml-auto">20:07</span>
</li>
<li class="list-group-item d-flex align-items-center">
<div class="avatar">
<img src="https://assets.servedby-buysellads.com/p/manage/asset/id/32054" alt="">
</div>
<div class="w-100">
<div class="user-name">Jack</div>
<div class="message bg-light">Nope</div>
</div>
<span class="date text-mutted ml-auto">20:07</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>


Use HTML like this
<li class="list-group-item">
<div class="avatar">
<img src="https://assets.servedby-buysellads.com/p/manage/asset/id/32054" alt="">
</div>
<div>
<div class="user-name">Dima</div>
<div class="message float-left">Hello?</div>
</div>
<span class="date text-mutted float-right">19:07</span>
</li>
Also add css
.list-group-item {
display: flex;
align-items: center;
}
.date.text-mutted {
margin-left: auto;
}


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">
Your dialogs
</div>
<ul class="list-group list-group-flush text-center">
<li class="list-group-item">
<div class="avatar">
<img src="https://assets.servedby-buysellads.com/p/manage/asset/id/32054" alt="">
</div>
<div class="user-name">Dima</div>
<div class="message ">Hello?</div>
<span class="date text-mutted">19:07</span>
</li>
<li class="list-group-item">
<div class="avatar">
<img src="https://assets.servedby-buysellads.com/p/manage/asset/id/32054" alt="">
</div>
<div class="user-name">Jack</div>
<div class="message">Nope</div>
<span class="date text-mutted">20:07</span>
</li>
<li class="list-group-item">
<div class="avatar">
<img src="https://assets.servedby-buysellads.com/p/manage/asset/id/32054" alt="">
</div>
<div class="user-name">Madonna</div>
<div class="message">Lol?</div>
<span class="date text-mutted">22:04</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>

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

dynamic grid that stretches to fill the a certain size

I have a website I'm trying to emulate and I can't seem to get the grid layout to match the site.
This is the site: https://www.khalidmohtaseb.com/
Here is my code
body {
margin-top: 75px;
/* 50px is the height of the navbar - change this if the navbarn height changes */
}
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
.portfolio-item {
margin-bottom: 1px;
margin-top: 1px;
padding-left: 1px;
padding-right: 1px;
}
footer {
margin: 50px 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>Portfolio</title>
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous">
<link rel="stylesheet" href="css/4-col-portfolio.css">
</head>
<body>
<nav class="navbar navbar-fixed-top navbar-inverse" role="navigation">
<div class="container">
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li>About
</li>
<li>Services
</li>
<li>Contact
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<div class="container">
<div class="row">
<div class="col-md-4 portfolio-item">
<a href="portfolio-item.html">
<img class="img-responsive" src="https://via.placeholder.com/300">
</a>
</div>
<div class="col-md-4 portfolio-item">
<a href="portfolio-item.html">
<img class="img-responsive" src="https://via.placeholder.com/300">
</a>
</div>
<div class="col-md-4 portfolio-item">
<a href="portfolio-item.html">
<img class="img-responsive" src="https://via.placeholder.com/300">
</a>
</div>
</div>
<div class="row">
<div class="col-md-4 portfolio-item">
<a href="portfolio-item.html">
<img class="img-responsive" src="https://via.placeholder.com/300">
</a>
</div>
<div class="col-md-4 portfolio-item">
<a href="portfolio-item.html">
<img class="img-responsive" src="https://via.placeholder.com/300">
</a>
</div>
<div class="col-md-4 portfolio-item">
<a href="portfolio-item.html">
<img class="img-responsive" src="https://via.placeholder.com/300">
</a>
</div>
</div>
<div class="row">
<div class="col-md-4 portfolio-item">
<a href="portfolio-item.html">
<img class="img-responsive" src="https://via.placeholder.com/300"">
</a>
</div>
<div class="col-md-4 portfolio-item">
<a href="portfolio-item.html">
<img class="img-responsive" src="https://via.placeholder.com/300">
</a>
</div>
<div class="col-md-4 portfolio-item">
<a href="portfolio-item.html">
<img class="img-responsive" src="https://via.placeholder.com/300">
</a>
</div>
</div>
<hr>
</div>
<!-- /.container -->
<div class="container">
<hr>
<footer>
<div class="row">
<div class="col-lg-12">
<p>Copyright © Company 2021</p>
</div>
</div>
</footer>
</div>
<!-- /.container -->
<!-- JavaScript -->
<script src="js/jquery-1.10.2.js"></script>
<script src="js/bootstrap.js"></script>
</body>
</html>
I think my CSS is incomplete. I don't think I'm far but maybe I am, I love the way that site resizes the images to keep it's shape and 3 column setup until it goes really small, then it's a two column, then one for mobile.

Hamburger drop-down menu not working when page is in "mobile" size on desktop

my hamburger button isn't working when I minimize the page to mobile size. Everything else seems to flow correctly, I've checked numerous times on the code and it seems to be correct. At this point, I'm not sure whether it's the script codes I have down below which disables the drop-down menu or what?
<!DOCTYPE html>
<html>
<head>
<title>Image Gallery</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="gallery.css">
</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" date-target="#bs-nav-demo" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<span class="glyphicon glyphicon-picture" aria-hidden="true"></span> IMAGES
</div>
<div class="collapse navbar-collapse" id="bs-nav-demo-1">
<ul class="nav navbar-nav">
<li>About</li>
<li>Contact</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Sign Up</li>
<li>Login</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="jumbotron">
<h1><span class="fas fa-camera-retro"></span> The Image Gallery</h1>
<p>Wonderful pictures at your disposal!</p>
</div>
<div class="row">
<div class="col-lg-4 col-sm-6" >
<div class="thumbnail">
<img src="http://i.imgur.com/qK42fUu.jpg">
</div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="thumbnail">
<img src="https://images.unsplash.com/photo-1435771112039-1e5b2bcad966?dpr=2&fit=crop&fm=jpg&h=825&q=50&w=1450">
</div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="thumbnail">
<img src="https://images.unsplash.com/photo-1442406964439-e46ab8eff7c4?dpr=2&fit=crop&fm=jpg&h=825&q=50&w=1450">
</div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="thumbnail">
<img src="https://images.unsplash.com/photo-1439524970634-649c37a69e5c?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1450&h=825&fit=crop&s=bfda9916c885869b43b70738693428d9">
</div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="thumbnail">
<img src="https://images.unsplash.com/photo-1444090542259-0af8fa96557e?dpr=2&fit=crop&fm=jpg&h=825&q=50&w=1450">
</div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="thumbnail">
<img src="https://images.unsplash.com/photo-1434543177303-ef2cc7707e0d?dpr=2&fit=crop&fm=jpg&h=825&q=50&w=1450">
</div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="thumbnail">
<img src="https://images.unsplash.com/photo-1436262513933-a0b06755c784?dpr=2&fit=crop&fm=jpg&h=825&q=50&w=1450">
</div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="thumbnail">
<img src="https://images.unsplash.com/photo-1439396087961-98bc12c21176?dpr=2&fit=crop&fm=jpg&h=825&q=50&w=1450">
</div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="thumbnail">
<img src="https://images.unsplash.com/photo-1439694458393-78ecf14da7f9?dpr=2&fit=crop&fm=jpg&h=825&q=50&w=1450">
</div>
</div>
</div>
</div>
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
</body>
</html>

-> please update following code into your existing code.
-> must be same id name into button data-target name and collapse id name.
-> also add meta tag into head tag.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Image Gallery</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="gallery.css">
</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="#bs-nav-demo-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<span class="glyphicon glyphicon-picture" aria-hidden="true"></span> IMAGES
</div>
<div class="collapse navbar-collapse" id="bs-nav-demo-1">
<ul class="nav navbar-nav">
<li>About</li>
<li>Contact</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Sign Up</li>
<li>Login</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="jumbotron">
<h1><span class="fas fa-camera-retro"></span> The Image Gallery</h1>
<p>Wonderful pictures at your disposal!</p>
</div>
<div class="row">
<div class="col-lg-4 col-sm-6" >
<div class="thumbnail">
<img src="http://i.imgur.com/qK42fUu.jpg">
</div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="thumbnail">
<img src="https://images.unsplash.com/photo-1435771112039-1e5b2bcad966?dpr=2&fit=crop&fm=jpg&h=825&q=50&w=1450">
</div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="thumbnail">
<img src="https://images.unsplash.com/photo-1442406964439-e46ab8eff7c4?dpr=2&fit=crop&fm=jpg&h=825&q=50&w=1450">
</div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="thumbnail">
<img src="https://images.unsplash.com/photo-1439524970634-649c37a69e5c?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1450&h=825&fit=crop&s=bfda9916c885869b43b70738693428d9">
</div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="thumbnail">
<img src="https://images.unsplash.com/photo-1444090542259-0af8fa96557e?dpr=2&fit=crop&fm=jpg&h=825&q=50&w=1450">
</div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="thumbnail">
<img src="https://images.unsplash.com/photo-1434543177303-ef2cc7707e0d?dpr=2&fit=crop&fm=jpg&h=825&q=50&w=1450">
</div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="thumbnail">
<img src="https://images.unsplash.com/photo-1436262513933-a0b06755c784?dpr=2&fit=crop&fm=jpg&h=825&q=50&w=1450">
</div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="thumbnail">
<img src="https://images.unsplash.com/photo-1439396087961-98bc12c21176?dpr=2&fit=crop&fm=jpg&h=825&q=50&w=1450">
</div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="thumbnail">
<img src="https://images.unsplash.com/photo-1439694458393-78ecf14da7f9?dpr=2&fit=crop&fm=jpg&h=825&q=50&w=1450">
</div>
</div>
</div>
</div>
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
</body>
</html>

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>