dynamic grid that stretches to fill the a certain size - html

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.

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

How to created nested columns in Bootstrap 4?

I'm trying to created nested columns within the bootstrap nav. I've tried everything. But it seems like only containers possess this sort of functionality. How can I do this inside a bootstrap nav. Attached is an image of how I want things to be and the current code that I have (which currently has alignment issues).
<nav class="container">
<div class="row">
<div class="col-6 col-md-2">
<img src="images/nexletol-logo.png" alt="NEXLETOL™ (bempedoic acid) tablets" class="img-fluid">
</div>
<div class="col-6">
<img src="images/nexletol-logo.png" alt="NEXLETOL™ (bempedoic acid) tablets" class="img-fluid">
</div>
<ul class="row navbar-nav col-12 col-md-8">
<li class="nav-item col-4">hello</li>
<li class="nav-item col-4">hello</li>
<li class="nav-item col-4">hello</li>
</ul>
</div>
</nav>
nav mobile

Try this, The image you tag in your question i am doing this code for that only. Check and tell me you want the same.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="container">
<div class="row">
<div class="col-lg-6 col-sm-6 col-xs-6">
<img src="images/nexletol-logo.png" alt="NEXLETOL™ (bempedoic acid) tablets" class="img-fluid">
</div>
<div class="col-lg-6 col-sm-6 col-xs-6">
<img src="images/nexletol-logo.png" alt="NEXLETOL™ (bempedoic acid) tablets" class="img-fluid">
</div>
</div>
<div class="row">
<div class="col-lg-4 col-sm-4 col-xs-4">
<p class="text-center"> Hello </p>
</div>
<div class="col-lg-4 col-sm-4 col-xs-4">
<p class="text-center"> Hello </p>
</div>
<div class="col-lg-4 col-sm-4 col-xs-4">
<p class="text-center"> Hello </p>
</div>
</div>
</nav>
</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>

how to align group of images?

new web developer and i am stuck with images alignment that i am trying to add to my page.I added the images just fine but i want the images to cover the whole space of the previous div i don't care about the aspect ratio but only alignment.
<!DOCTYPE html>
<html>
<head>
<title>test file</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-4 col-sm-6">
<a href="#">
<img src="https://cdn.pixabay.com/photo/2016/03/23/12/53/clock-1274699_960_720.jpg" class="img-thumbnail">
</a>
</div>
<div class="col-lg-4 col-sm-6">
<a href="#">
<img src="https://cdn.pixabay.com/photo/2014/06/11/17/00/cook-366875_960_720.jpg" class="img-thumbnail">
</a>
</div>
<div class="col-lg-4 col-sm-6">
<a href="#">
<img src="https://cdn.pixabay.com/photo/2016/06/25/12/48/go-pro-1478810_960_720.jpg" class="img-thumbnail">
</a>
</div>
<div class="col-lg-4 col-sm-6">
<a href="#">
<img src="images/" class="img-thumbnail imgL">
</a>
</div>
</div>
</div>
</body>
</html>
I want the images to cover whole blue space

change your HTML to this.
<!DOCTYPE html>
<html>
<head>
<title>test file</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<style>
.full_height {
height: 250px;
}
</style>
<body>
<div class="container">
<div class="row">
<div class="col-lg-4 col-sm-6">
<a href="#">
<img src="https://cdn.pixabay.com/photo/2016/03/23/12/53/clock-1274699_960_720.jpg" class="img-thumbnail full_height">
</a>
</div>
<div class="col-lg-4 col-sm-6">
<a href="#">
<img src="https://cdn.pixabay.com/photo/2014/06/11/17/00/cook-366875_960_720.jpg" class="img-thumbnail full_height">
</a>
</div>
<div class="col-lg-4 col-sm-6">
<a href="#">
<img src="https://cdn.pixabay.com/photo/2016/06/25/12/48/go-pro-1478810_960_720.jpg" class="img-thumbnail full_height">
</a>
</div>
<div class="col-lg-4 col-sm-6">
<a href="#">
<img src="images/" class="img-thumbnail imgL">
</a>
</div>
</div>
</div>
</body>
</html>

Since the images are not of equal aspect ratios, it won't be possible to align them completely without distortion or cropping. With distortion, the following can be done
<!DOCTYPE html>
<html >
<head>
<title>test file</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-4 col-sm-6">
<a href="#">
<img src="https://cdn.pixabay.com/photo/2016/03/23/12/53/clock-1274699_960_720.jpg"class="img-thumbnail" style="height: 180px; width: 100%">
</a>
</div>
<div class="col-lg-4 col-sm-6">
<a href="#">
<img src="https://cdn.pixabay.com/photo/2014/06/11/17/00/cook-366875_960_720.jpg" class="img-thumbnail" style="height: 180px; width: 100%">
</a>
</div>
<div class="col-lg-4 col-sm-6">
<a href="#">
<img src="https://cdn.pixabay.com/photo/2016/06/25/12/48/go-pro-1478810_960_720.jpg" class="img-thumbnail" style="height: 180px; width: 100%">
</a>
</div>
<div class="col-lg-4 col-sm-6">
<a href="#">
<img src="images/" class="img-thumbnail imgL">
</a>
</div>
</div>
</div>
</body>
</html>

Maybe this solves your problem.
object-fit property is used to specify how an img should be resized to fit its container (https://www.w3schools.com/css/css3_object-fit.asp)
<!DOCTYPE html>
<html>
<head>
<title>test file</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<style>
.fixHeight{
height: 100%;
width: 100%;
object-fit: cover;
}
</style>
<body>
<div class="container">
<div class="row">
<div class="col-lg-4 col-sm-6">
<a href="#">
<img src="https://cdn.pixabay.com/photo/2016/03/23/12/53/clock-1274699_960_720.jpg" class="img-thumbnail fixHeight">
</a>
</div>
<div class="col-lg-4 col-sm-6">
<a href="#">
<img src="https://cdn.pixabay.com/photo/2014/06/11/17/00/cook-366875_960_720.jpg" class="img-thumbnail fixHeight">
</a>
</div>
<div class="col-lg-4 col-sm-6">
<a href="#">
<img src="https://cdn.pixabay.com/photo/2016/06/25/12/48/go-pro-1478810_960_720.jpg" class="img-thumbnail fixHeight">
</a>
</div>
<div class="col-lg-4 col-sm-6">
<a href="#">
<img src="images/" class="img-thumbnail imgL">
</a>
</div>
</div>
</div>
</body>
</html>

You can try the following. Hope to help, my friend :))
<style>
.img-thumbnail {
height: 100%;
}
</style

<div class="col-lg-4 col-sm-6 img-holder">
<a href="#">
<img src="https://cdn.pixabay.com/photo/2016/03/23/12/53/clock-1274699_960_720.jpg" class="img-thumbnail">
</a>
</div>
Based from your initial code. You may just add a class e.g .img-holder with the following values:
.img-holder {
overflow: hidden;
background-color: #fff;
border: 1px solid #dee2e6;
border-radius: .25rem;
height: 250px;
}
To fill up the blue space you are referring to, you may just have the following value for the img tag.
.img-thumbnail {
max-height: 100%;
}

Vertical align list-group bootstrap

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>