Centering a Horizontal Scrolling Cards Bootstrap4 - html

Trying to make a Single Row of Horizontal Scrolling Cards but facing issue of centering the div.
Tried using
a) mx-auto class
b) text-align: center
Nothing seems to be working and i am getting lot of space on right side on desktop view.
However in mobile screens the scrolling div is neatly centered.
Appreciate esteemed experts to point me in the right direction.
<style>
img {
border-radius: 50%;
-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
filter: grayscale(100%);
margin-top: 5px;
}
.forlabel {
margin-top:-12px;
}
.forlabeldiv {
border:solid;
border-width:1px;
border-radius:5px;
<!-- margin-left:5px;
margin-right:5px;
margin-bottom:15px;-->
margin: 0,auto;
width:100%;
text-align:center;
}
.forlabelspan {
color: #0275d8;
background:white;
font-size:14px;
font-weight:800;
}
.btn {
width:30%;
text-align: center
margin-bottom:5px
}
.card-block {
min-height: 25vh;
margin-bottom:15px;
}
.profile, .card {
background:#ced7df!important;
text-align:center;
}
.master {
text-align:center;
margin: 0,auto;
}
</style>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Single Row Horizontal Scrolling Cards</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<!----------------------xxxxxxx---------------------------->
<h2>Single Row Horizontal Scrolling Cards</h2>
<div class="container-fluid p-3 m-3 master" >
<div class="container forlabeldiv row max-auto" >
<label for="input1" class="col-sm-2 forlabel" >
<span class=" forlabelspan">Expert Panel</span>
</label>
<div class="row flex-nowrap overflow-auto ">
<div class="col-12 col-lg-6" >
<div class="card card-block profile" >
<img class="mx-auto" src="https://via.placeholder.com/100/09f/fff.png" width="100" height="100" >
First Name Last Name<br>
Title of Person<br>
Credentials of Person<br>
BOOK
</div>
</div>
<div class="col-12 col-lg-6">
<div class="card card-block " style="text-align: center" >
<img class="mx-auto" src="https://via.placeholder.com/150" width="100" height="100" >
First Name Last Name<br>
Title of Person<br>
Credentials of Person<br>
BOOK
</div>
</div>
<div class="col-12 col-lg-6">
<div class="card card-block " style="text-align: center" >
<img class="mx-auto" src="https://via.placeholder.com/150" width="100" height="100" >
First Name Last Name<br>
Title of Person<br>
Credentials of Person<br>
BOOK
</div>
</div>
<div class="col-12 col-lg-6">
<div class="card card-block " style="text-align: center" >
<img class="mx-auto" src="https://via.placeholder.com/150" width="100" height="100" >
First Name Last Name<br>
Title of Person<br>
Credentials of Person<br>
BOOK
</div>
</div>
<div class="col-12 col-lg-6">
<div class="card card-block " style="text-align: center" >
<img class="mx-auto" src="https://via.placeholder.com/150" width="100" height="100" >
First Name Last Name<br>
Title of Person<br>
Credentials of Person<br>
BOOK
</div>
</div>
<div class="col-12 col-lg-6">
<div class="card card-block " style="text-align: center" >
<img class="mx-auto" src="https://via.placeholder.com/150" width="100" height="100" >
First Name Last Name<br>
Title of Person<br>
Credentials of Person<br>
BOOK
</div>
</div>
<div class="col-12 col-lg-6">
<div class="card card-block " style="text-align: center" >
<img class="mx-auto" src="https://via.placeholder.com/150" width="100" height="100" >
First Name Last Name<br>
Title of Person<br>
Credentials of Person<br>
BOOK
</div>
</div>
<div class="col-12 col-lg-6">
<div class="card card-block " style="text-align: center" >
<img class="mx-auto" src="https://via.placeholder.com/150" width="100" height="100" >
First Name Last Name<br>
Title of Person<br>
Credentials of Person<br>
BOOK
</div>
</div>
</div> <!--*** end of row flex *** -->
</div> <!--*** end of label div *** -->
</div> <!--*** end of container-flex -->
<!----------------------xxxxxxx---------------------------->
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js" integrity="sha512-STof4xm1wgkfm7heWqFJVn58Hm3EtS31XFaagaa8VMReCXAkQnJZ+jEy8PCC/iT18dFy95WcExNHFTqLyp72eQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.2/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.2/dist/js/bootstrap.bundle.min.js"></script>


Added a CSS body tag with padding and the div got centered:
body { padding:50px; }
Not sure what it did , but it fixed my issue!

Related

Elements are bumping into each other in Bootstrap 5

I'm building a website in Bootstrap but when I switch my website to a mobile responsive view some elements are bumping into each other like this.
That's how site looks in the large version.
I'm tried to add some media queries.
#media (max-width: 992px) {
/*Intro*/
.title {
font-size: 30px;
}
.title-text {
font-size: 12px;
}
.title-btn button {
padding: 10px 35px !important;
}
}
But elements still are bumping into each other when I switch to mobile responsive view.
My HTML code:
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Intro -->
<section class="intro" id="intro">
<div class="container">
<div class="row">
<div class="col-lg-6 order-1 order-lg-2">
<img class="img-fluid" src="Img/Intro/Phone.png" alt="">
</div>
<div class=" col-lg-6 order-2 order-lg-1 title-block">
<div class="pre-title">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-award" viewBox="0 0 16 16">
<path d="M9.669.864L8 0 6.331.864l-1.858.282-.842 1.68-1.337 1.32L2.6 6l-.306 1.854 1.337 1.32.842 1.68 1.858.282L8 12l1.669-.864 1.858-.282.842-1.68 1.337-1.32L13.4 6l.306-1.854-1.337-1.32-.842-1.68L9.669.864zm1.196 1.193l.684 1.365 1.086 1.072L12.387 6l.248 1.506-1.086 1.072-.684 1.365-1.51.229L8 10.874l-1.355-.702-1.51-.229-.684-1.365-1.086-1.072L3.614 6l-.25-1.506 1.087-1.072.684-1.365 1.51-.229L8 1.126l1.356.702 1.509.229z"/>
<path d="M4 11.794V16l4-1 4 1v-4.206l-2.018.306L8 13.126 6.018 12.1 4 11.794z"/>
</svg>
<p>#1 Editiors Choice App of 2020</p>
</div>
<h1 class="title">
Best app for your
modern lifestyle
</h1>
<p class="title-text">
Increase productivity with a simple to-do app. app for
managing your personal budgets.
</p>
<div class="title-btn">
<button type="button" class="btn btn-primary">
Try for free
</button>
Watch demo video
</div>
</div>
</div>
</div>
</section>
<!-- Features -->
<section class="features" id="features">
<div class="container">
<div class="companies">
<p class="companies-text">Trusted by companies like</p>
</div>
<div class="row companies-logos">
<div class="col-sm">
<img src="Img/Companies/SouthWest.png " class="img-fluid" alt="">
</div>
<div class="col-sm">
<img src="Img/Companies/Anubis.png" class="img-fluid" alt="">
</div>
<div class="col-sm">
<img src="Img/Companies/Alonzo.png" class="img-fluid" alt="">
</div>
<div class="col-sm">
<img src="Img/Companies/Express.png" class="img-fluid" alt="">
</div>
<div class="col-sm">
<img src="Img/Companies/Maniac.png" class="img-fluid" alt="">
</div>
</div>
</div>
</section>

The problem is that looks like structure of HTML in your footer section. Initializing the row div, you should have used "col" feature as you used. Your code looks like the same what I explain. However, there is a little bit difference compare to what i mention. In order to make it clear for you, i have build up this snippet for you. You need to use "col" feature on element that you want to layout . In your code, you used for container of image tags which is not the element you want to make it responsive. That is why you got bumping into each other. I wish that yoou figure it out. Cheers!
.box{
background-color: red;
width: 200px;
height: 200px;
display: inline-block;
}
.box-1{
background-color: yellow;
}
.box-2{
background-color: purple;
}
.box-3{
background-color: blue;
}
.box-4{
background-color: green;
}
.box-5{
background-color: lightpink;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<link
href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css"
rel="stylesheet"
/>
<title>stackover</title>
</head>
<body>
<section class="features" id="features">
<div class="container">
<div class="companies">
<p class="companies-text">Trusted by companies like</p>
</div>
<div class="row companies-logos">
<div class="col-lg-4 col-md-3 col-sm-6 box box-1">Logo-1</div>
<div class="col-lg-4 col-md-3 col-sm-6 box box-2">Logo-2</div>
<div class="col-lg-4 col-md-3 col-sm-6 box box-3">Logo-3</div>
<div class="col-lg-4 col-md-3 col-sm-6 box box-4">Logo-4</div>
<div class="col-lg-4 col-md-3 col-sm-6 box box-5">Logo-5</div>
</div>
</div>
</section>
</body>
</html>

Bootstrap resizing the image relative to the screen size

I have an assignment which I am required to make a website using html,css,and bootstrap. I am almost done in finishing the webpage but I am stuck in resizing the lightbox photo gallery. I want it to resize according to the screen size. Smaller screen = Smaller images. I tried setting the max-height and max-width of the images to 100% but it did not work.
at 100%:
at 200%:
at 300%:
Website: http://syphym.infinityfreeapp.com/TheOfficialPodcast.html
I want it to instead of making it 4 to 2 and 2 to 1 I want to resize it and maintain its original position
Sorry for the question but I really don't know how to fix this
code:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<title>The Official Podcast</title>
<style>
*
{
margin: 0;
padding: 0;
}
#HomeScreen
{
background-image: url('Picture/Background.jpg');
background-size: cover;
background-position: center;
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-content: center;
padding: 0 20px;
}
.Theboys
{
background-color: black
}
.Title
{
text-align-last: center;
text-decoration: none;
color: #f2f2f2;
font-size: 50px;
font-family: sans-serif;
letter-spacing: 0.5px;
}
.name
{
background-color: black;
text-align-last: center;
text-decoration: none;
color: #f2f2f2;
font-size: 30px;
font-family: sans-serif;
letter-spacing: 0.5px;
}
.gap100
{
padding:70px 0px;
}
.resize img
{
max-height: 100%;
max-width: 100%;
}
</style>
</head>
<body>
<header id="HomeScreen">
<section class="Theboys">
<div class="container">
<a href=#Official-Podacast>
<center>
<img src="https://i.ytimg.com/vi/jFqL8N3t97Y/maxresdefault.jpg" width="80%" height="80%" >
</center>
</a>
<div class="Title">
The Official Boys
</div>
<div class="row">
<div class="col-md-6 col-lg-3">
<div class="card border-0">
<a class="lightbox" href="#Jackson">
<div class="resize">
<img src="Picture/Jackson.png" alt="img1" class="card-img-top">
</div>
</a>
<div class="name">
Jackson
</div>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="card border-0">
<a class="lightbox" href="#Andrew">
<div class="resize">
<img src="Picture/Andrew.png" alt="img1" class="card-img-top">
</div>
</a>
<div class="name">
Andrew
</div>
</div>
</div class="name">
<div class="col-md-6 col-lg-3">
<div class="card border-0">
<a class="lightbox" href="#Charlie">
<div class="resize">
<img src="Picture/Charile.png" alt="img1" class="card-img-top">
</div>
</a>
<div class="name">
Charlie
</div>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="card border-0">
<a class="lightbox" href="#Kaya">
<div class="resize">
<img src="Picture/Kaya.png" alt="img1" class="card-img-top">
</div>
</a>
<div class="name">
Kaya
</div>
</div>
</div>
</div>
</div>
</section>
</header>
<section>
<div class="container">
<div class = "row gap100">
<a name="Official-Podacast">
<div class="col-md-6">
<h2>The Official Podcast</h2>
<p>The Official Podcast is where four international man friends congregate to discuss just about everything. Featuring dumb questions, YouTube celebrities, childish giggling, burger puns, more dumb questions, fatherly advice, bad dating stories, even more dumb questions, and a slew of guest stars, The Official Podcast is a weekly show with a little something for everyone. Jackson, Andrew, Charlie, and Kaya gather to talk about only the most important things in life every Thursday at 8pm EST.</p>
<p>Listen to The Official Podcast:</p>
<ul>
<img src="Picture/Itunes.png" width="100" height="100">
<img src="Picture/Spotify.png" width="100" height="100">
<img src="Picture/Youtube.png"width="100" height="100">
</ul>
</div>
<div class="col-md-6">
<img src="Picture/TheBoys.jpg" class="img-fluid">
</div>
</a>
</div>
<div class = "row gap100">
<div class="col-md-6">
<a name="Jackson">
<img src="Picture/Jackson.jpg" class="img-fluid">
</div>
<div class="col-md-6">
<h2>Jackson Clarke</h2>
<p>Jackson Clarke is from australia he is the co-host of the Official podcast and he swears that he does not eat crayons anymore.</p>
<p>His internet name is Zealot he manges the editing of the podcast and the moist meter of charlie. He likes lego and dinasours and he is proud of it.</p>
<p>Watch his content:</p>
<ul>
<img src="Picture/Twitter.png" width="100" height="100">
<img src="Picture/Twitch.png" width="80" height="80">
<img src="Picture/Youtube.png"width="100" height="100">
</ul>
</div>
</a>
</div>
<div class = "row gap100">
<div class="col-md-6">
<a name="Andrew">
<h2>Andrew Wagenheim</h2>
<p>TAndrew’s notability on the internet comes twofold. He was originally known for his YouTube channel HuggbeesTV, a variety comedy channel, on which he continues to upload. </p>
<p>Several years later, he also began hosting The Official Podcast alongside Kaya Orsan, Jackson Clarke and Charlie White (known on YouTube as Cr1TiKaL). </p>
<p>Watch his content:</p>
<ul>
<img src="Picture/Twitter.png" width="100" height="100">
<img src="Picture/Twitch.png" width="80" height="80">
<img src="Picture/Youtube.png"width="100" height="100">
</ul>
</a>
</div>
<div class="col-md-6">
<img src="Picture/Andrew Hugbess.png" class="img-fluid">
</div>
</div>
<div class = "row gap100">
<div class="col-md-6">
<a name="Charlie">
<img src="Picture/Charlie.jpg" class="img-fluid">
</div>
<div class="col-md-6">
<h2>Charlie White</h2>
<p>Also known as Cr1TiKaL, he is a supremely popular gaming commentator who would earn an astounding 5 million subscribers with viral videos such as "The Most Difficult Game Ever Created Gameplay and Commentary," "The Real Mighty Thirsty" and "The Real Edge of Glory."</p>
<p>He also works on a side project called moist meter where he rate different games and movies.</p>
<p>Watch his content:</p>
<ul>
<img src="Picture/Twitter.png" width="100" height="100">
<img src="Picture/Twitch.png" width="80" height="80">
<img src="Picture/Youtube.png"width="100" height="100">
</ul>
</div>
</a>
</div>
<div class = "row gap100">
<div class="col-md-6">
<a name="Kaya">
<h2>Kaya Orsan</h2>
<p>He was born in Germany, but his family is from Turkey, where he spent half of his life and a half in Germany. For a while, he was in Turkey but he's back in Germany.</p>
<p>Kaya is known for drinking and going on rants about things that pisses him off. You can buy a poster with his special couger poster on it off the Official Podcast Patreon for $50,000.</p>
<p>Watch his content:</p>
<ul>
<img src="Picture/Twitter.png" width="100" height="100">
<img src="Picture/Twitch.png" width="80" height="80">
<img src="Picture/Youtube.png"width="100" height="100">
</ul>
</div>
</a>
<div class="col-md-6">
<img src="Picture/KayaOrsan.jpg" class="img-fluid">
</div>
</div>
</div>
</section>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</body>
</html>

When you use bootstrap with cols you should know that the page width is divided to 12.
for example, if you have 4 divs and each of them has col-3 it will place them in the same line.
But if you are trying to put 4 times col-6 in the same row, that would be a mistake (As you did, using col-md-6)
For what you asked, I would suggest changing the class to col-3 instead of col-md-6 col-lg-3 for each of the 4 divs

Align layout in column

I am using bootstrap and I am trying to create the following layout:
I tried
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-lg-2 text-left">
<div class="card card-primary">
<div class="card-body p-2">
<img class="tv-symbol-icon tv-symbol-icon--size-auto" src="https://s3-symbol-logo.tradingview.com/apple--big.svg" alt="Apple Inc icon">
<div>APPLE INC (AAPL)</div>
<div>NASDAQ</div>
<div><img class="tv-flag-country tv-flag-country--us tv-flag-country--size_sub_title" src="https://www.tradingview.com/static/images/svg/common/flags/flag-square-us.svg" alt="US Flag"></div>
</div>
</div>
</div>
I tried flexboxes, however my layout does not arrange.
How to arrange the text next to the image?
Any suggestions what I am doing wrong?

You were 95% the way there. I have finished it off for you.
Really all you were missing was some nested bootstrap to make a col-10 that contains the company details sitting alongside the logo.
.name {
font-size: 2rem;
}
.tv-symbol-icon {
border-radius: 50%;
width: 100%;
}
.tv-flag-country {
margin: 0 0.5em;
border-radius: 50%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-lg-2 text-left">
<div class="card card-primary">
<div class="card-body p-2">
<div class="row">
<div class="col-sm-2">
<img class="tv-symbol-icon tv-symbol-icon--size-auto" src="https://s3-symbol-logo.tradingview.com/apple--big.svg" alt="Apple Inc icon">
</div>
<div class="col-sm-10">
<div class="row">
<div class="name">APPLE INC</div>
</div>
<div class="row">
<div>NASDAQ</div>
<div><img class="tv-flag-country tv-flag-country--us tv-flag-country--size_sub_title" src="https://www.tradingview.com/static/images/svg/common/flags/flag-square-us.svg" alt="US Flag"></div>
<div>(AAPL)</div>
</div>
</div>
</div>
</div>
</div>
</div>

Issue aligning div's using width and float

So what I am trying to do is align these divs within a bootstrap card. My issue is, I am able to get the left half of it right, but I can't figure out how to align the far right elements. I am currently using width percentages to allow this to stay responsive, though I have one thing set as fixed due to pictures always being the same size.
<div class="card" style="width:65%;float:left;">
<h5 class="card-header">Window Latch Black (Small)</h5>
<div class="card-body clearfix text-center" style="width:100%;display:inline-block;background-color: aqua;">
<div class="cartimage" style="background-color:red;float:left">
<img class="rounded-circle" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" width="140" height="140">
</div>
<div class="carttext" style="height:50%;width:75%;background-color:green;">
khjg
</div>
<div class="cartamt" style="height:50%;width:75%;background-color:yellow;">
amt
</div>
<div class="cartprice" style="height:50%;width:15%;background-color:purple;float:right">
price
</div>
<div class="cartbutton" style="height:50%;width:15%;background-color:pink;float:right">
button
</div>
</div>
</div>

You need to adjust the order and replace 15% with 25% to have a total of 100% per row. You need to also set a height to parent container to use % height with child element:
.rounded-circle {
border-radius:50%;
vertical-align:top;
}
<div class="card" style="width:65%;float:left;">
<h5 class="card-header">Window Latch Black (Small)</h5>
<div class="card-body clearfix text-center" style="width:100%;display:inline-block;background-color: aqua;height:140px">
<div class="cartimage" style="background-color:red;float:left">
<img class="rounded-circle" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" width="140" height="140">
</div>
<div class="cartprice" style="height:50%;width:25%;background-color:purple;float:right">
price
</div>
<div class="carttext" style="height:50%;width:75%;background-color:green;">
khjg
</div>
<div class="cartbutton" style="height:50%;width:25%;background-color:pink;float:right">
button
</div>
<div class="cartamt" style="height:50%;width:75%;background-color:yellow;">
amt
</div>
</div>
</div>
By the way, since you are using Bootstrap V4 you can rely on flex to create your layout:
.rounded-circle {
border-radius: 50%;
vertical-align: top;
}
.cartprice {
background: red;
flex-basis: 75%;
}
.carttext {
background: green;
flex-basis: 25%;
}
.cartbutton {
background: blue;
flex-basis: 75%;
}
.cartamt {
background: yellow;
flex-basis: 25%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="card">
<h5 class="card-header">Window Latch Black (Small)</h5>
<div class="card-body text-center d-flex">
<div class="cartimage">
<img class="rounded-circle" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" width="140" height="140">
</div>
<div class="d-flex flex-wrap w-100" >
<div class="cartprice">
price
</div>
<div class="carttext">
khjg
</div>
<div class="cartbutton">
button
</div>
<div class="cartamt">
amt
</div>
</div>
</div>
</div>

If you are using bootstrap4, I don't understand why using float...Use boostartp4 [Flex Utilities] classes instead to make these type of grid layout...Also for good practice try to wrap your divs into a wrapper divs
Stack Snippet
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="card">
<h5 class="card-header">Window Latch Black (Small)</h5>
<div class="card-body text-center p-0 d-flex no-gutters" style="background-color: aqua;">
<div class="cartimage" style="background-color:red;">
<img class="rounded-circle" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" width="140" height="140">
</div>
<div class="d-flex flex-column" style="flex: 2;">
<div class="carttext col" style="background-color:green;">
khjg
</div>
<div class="cartamt col" style="background-color:yellow;">
amt
</div>
</div>
<div class="d-flex flex-column col">
<div class="cartprice col" style="background-color:purple">
price
</div>
<div class="cartbutton col" style="background-color:pink">
button
</div>
</div>
</div>
</div>

Flexbox in Firefox

I have been building a site and have been experimenting with display:flexand had some success in implementing what I feel is a nice enough thumb-nail block element.
However, in Firefox it does this:
I have tested it and it seems to be an issue with the use of display:flex and position:absolute.
I have read that Firefox treats absolute positioning differently than others browsers I have tested in.
Chrome
Edge
Opera
I have experienced a similar issue in:
Internet Explorer 11
Safari 5.1.7
Firefox 50.1.0
HTML
<section id="services" class="text-center center-block">
<div class="container">
<div class="row">
<!-- Block -->
<div class="col-xs-12 col-sm-6 col-lg-4">
<div class="thumbnail grey mb-30">
<img src="img/picto/originals/png/Pound/Newable_Pictogram_CoolGrey_POUND.png" width="156" height="200" alt="" />
<div class="caption">
<p class="bold">Attractive commissions for business introductions, paid promptly.</p>
</div>
</div>
</div>
<!-- Block -->
<!-- Block -->
<div class="col-xs-12 col-sm-6 col-lg-4">
<div class="thumbnail grey mb-30">
<img src="img/picto/originals/png/Arrows/Newable_Pictogram_Navy_ARROWS.png" width="200" height="199" alt="" />
<div class="caption">
<p class="bold">We’re committed to delivering fast, and treating you and your clients fairly.</p>
</div>
</div>
</div>
<!-- Block -->
<!-- Block -->
<div class="col-xs-12 col-sm-6 col-lg-4">
<div class="thumbnail grey mb-30">
<img src="img/picto/new/Newable_Pictogram_Navy_GROWTH.png" width="271" height="200" alt="" />
<div class="caption">
<p class="bold">We are a trusted, long established and large-scale Responsible Finance Provider.</p>
</div>
</div>
</div>
<!-- Block -->
<!-- Block -->
<div class="col-xs-12 col-sm-6 col-lg-4">
<div class="thumbnail grey mb-30">
<img src="img/picto/new/Newable_Pictogram_cool_grey_PARTNER.png" width="200" height="200" alt="" />
<div class="caption">
<p class="bold">Incentive-led schemes to promote long term business development partnership.</p>
</div>
</div>
</div>
<!-- Block -->
<!-- Block -->
<div class="col-xs-12 col-sm-6 col-lg-4">
<div class="thumbnail grey">
<img src="img/picto/originals/png/Speech Bubbles/Newable_Pictogram_CoolGrey_SPEECHBUBBLES.png" width="263" height="200" alt="" />
<div class="caption">
<p class="bold">Best in class broker support package including dedicated account manager.</p>
</div>
</div>
</div>
<!-- Block -->
<!-- Block -->
<div class="col-xs-12 col-sm-6 col-lg-4">
<div class="thumbnail grey">
<img src="img/picto/originals/png/Infinity/Newable_Pictogram_Navy_INFINITY.png" width="215" height="100" alt="" />
<div class="caption">
<p class="bold">We partner with finance brokers, financial advisors, High Street banks, solicitors and accountants.</p>
</div>
</div>
</div>
<!-- Block -->
</div>
</div>
</section>
CSS
.thumbnail {
border: none;
min-height: 500px;
position: relative;
display: -webkit-flex;
display: flex;
justify-content: center;
align-items: center;
}
.thumbnail img {
padding-top: 0;
max-height: 50%;
max-width: 50%;
padding-bottom: 25%;
}
.caption {
position: absolute;
bottom: 0;
}
Am I just using display:flex incorrectly?

Check this basic example of your scenario (commented .caption padding just to make it clearer):
Added flex-flow: column wrap; to .thumbnail.
div.thumbnail {
border: none;
min-height: 500px;
position: relative;
display: -webkit-flex;
display: flex;
flex-flow: column wrap;
justify-content: center;
align-items: center;
}
.thumbnail img {
padding-top: 0;
max-height: 50%;
max-width: 50%;
/* padding-bottom: 25%; */
}
.caption {
/* position: absolute; */
/* bottom: 0; */
max-width: 50%;
margin: 0 auto;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<section id="services" class="text-center center-block">
<div class="container">
<div class="row">
<!-- Block -->
<div class="col-xs-12 col-sm-6 col-lg-4">
<div class="thumbnail grey mb-30">
<img src="http://placehold.it/300x300" width="156" height="200" alt="" />
<div class="caption">
<p class="bold">Attractive commissions for business introductions, paid promptly.</p>
</div>
</div>
</div>
</div>
</div>
</section>