I am having some problems with image position, I have a few columns with title at the top (flex box) the columns height is flex so that that they dynamically adapt the height so they are uniform.
However under the title is a image, I would like the image to always be at the bottom.
My code
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 d-flex">
<div class="card-body flex-fill">
<h4 class="article-preview__headline">title</h4>
<div class="image align-items-end">
<img class="mt-auto" style="width: 100%; height: auto" src="https://picsum.photos/600/400?image=990" alt="Image" />
</div>
<a class="link" href="#">Link goes here</a>
<hr/>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 d-flex">
<div class="card-body flex-fill">
<h4 class="article-preview__headline">title long title long title long title long title long</h4>
<div class="image align-items-end">
<img class="mt-auto" style="width: 100%; height: auto" src="https://picsum.photos/600/400?image=991" alt="Image" />
</div>
<a class="link" href="#">Link goes here</a>
<hr/>
</div>
</div>
</div>
</div>
You will need to re-order the elements, either by amending the HTML or using the order property.
If each card-body is made a flex-column we can use the order property to make the image div appear last visually in each column and then margin-top:auto to push it to the bottom of the column.
.card-body {
flex: 1;
}
.card-body .image {
order: 2;
margin-top: auto;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row">
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 d-flex flex-column">
<div class="card-body flex-fill d-flex flex-column">
<h4 class="article-preview__headline">title</h4>
<div class="image align-items-end">
<img class="mt-auto" style="width: 100%; height: auto" src="http://www.fillmurray.com/300/200" alt="Image" />
</div>
<a class="link" href="#">Link goes here</a>
<hr/>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 d-flex flex-column">
<div class="card-body flex-fill d-flex flex-column">
<h4 class="article-preview__headline">title long title long title long title long title long</h4>
<div class="image align-items-end">
<img class="mt-auto" style="width: 100%; height: auto" src="http://www.fillmurray.com/300/200" alt="Image" />
</div>
<a class="link" href="#">Link goes here</a>
<hr/>
</div>
</div>
</div>
</div>
Based on Paulie_D's answer
You can accomplish this without extra CSS and with just some additional css classes:
order-1, order-2, order-3 and mt-auto
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row">
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 d-flex flex-column">
<div class="card-body flex-fill d-flex flex-column">
<h4 class="order-1 article-preview__headline">title</h4>
<div class="order-3 mt-auto image align-items-end">
<img class="mt-auto" style="width: 100%; height: auto" src="http://www.fillmurray.com/300/200" alt="Image" />
</div>
<a class="order-2 link" href="#">Link goes here</a>
<hr/>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 d-flex flex-column">
<div class="card-body flex-fill d-flex flex-column">
<h4 class="order-1 article-preview__headline">title long title long title long title long title long</h4>
<div class="order-3 mt-auto image align-items-end">
<img class="mt-auto" style="width: 100%; height: auto" src="http://www.fillmurray.com/300/200" alt="Image" />
</div>
<a class="order-2 link" href="#">Link goes here</a>
<hr/>
</div>
</div>
</div>
</div>
Related
These ordering classes are not working. What i want, is this order on mobile and tablet:
First section:
text
img
Second section:
text
img
If I now view this on mobile, the 2 image is under each other and that's not good.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<section class="mt-5 mb-5">
<div class="container-fluid">
<div class="row align-items-center">
<div class="col-sm-12 col-md-6 offset-lg-2 order-sm-1 order-md-1">
<h2 class="fooldal_title">Beton tetőcserép</h2>
</div>
<div class="col-sm-12 col-md-4 order-sm-1 order-md-1">
<a href="#" title="Tovább a termékekre">
<img data-src="/images/sections/beton-tetocserep.jpg" alt="Beton tetőcserép" class="img-responsive lazyload">
</a>
</div>
</div>
</div>
</section>
<section class="mt-5 mb-5">
<div class="container-fluid">
<div class="row align-items-center">
<div class="col-sm-12 col-md-4 order-sm-2 order-md-1">
<a href="#" title="Tovább a termékekre">
<img data-src="/images/sections/keramia-tetocserep.jpg" alt="Kerámia tetőcserép" class="img-responsive lazyload">
</a>
</div>
<div class="col-sm-12 col-md-6 order-sm-1 order-md-2">
<h2 class="fooldal_title">Kerámia tetőcserép</h2>
</div>
</div>
</div>
</section>
If you want the image to appear beside the text in small (sm) and medium (md) change your code and use only sm. It will apply for sm and md. Remember that you have 12 cols, so if you use sm-12, then you are filling the 12 cols.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<section class="mt-5 mb-5">
<div class="container-fluid">
<div class="row align-items-center">
<div class="col-sm-6 offset-lg-2 order-sm-1 order-md-1">
<h2 class="fooldal_title">Beton tetőcserép</h2>
</div>
<div class="col-sm-4 order-sm-1 order-md-1">
<a href="#" title="Tovább a termékekre">
<img data-src="/images/sections/beton-tetocserep.jpg" alt="Beton tetőcserép" class="img-responsive lazyload">
</a>
</div>
</div>
</div>
</section>
<section class="mt-5 mb-5">
<div class="container-fluid">
<div class="row align-items-center">
<div class="col-sm-4 order-sm-2 order-md-1">
<a href="#" title="Tovább a termékekre">
<img data-src="/images/sections/keramia-tetocserep.jpg" alt="Kerámia tetőcserép" class="img-responsive lazyload">
</a>
</div>
<div class="col-sm-6 order-sm-1 order-md-2">
<h2 class="fooldal_title">Kerámia tetőcserép</h2>
</div>
</div>
</div>
</section>
You need to use class "order-N" for mobiles and "order-md-N" for resolutions 768px+
So:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<section class="my-5">
<div class="container-fluid">
<div class="row align-items-center">
<div class="col-sm-12 col-md-6 offset-lg-2 order-sm-1 order-md-1">
<h2 class="fooldal_title">Beton tetőcserép</h2>
</div>
<div class="col-sm-12 col-md-4 order-sm-1 order-md-1">
<a href="#" title="Tovább a termékekre">
<img data-src="/images/sections/beton-tetocserep.jpg" alt="Beton tetőcserép" class="img-responsive lazyload">
</a>
</div>
</div>
</div>
</section>
<section class="my-5">
<div class="container-fluid">
<div class="row align-items-center">
<div class="col-sm-12 col-md-4 order-2 order-md-1">
<a href="#" title="Tovább a termékekre">
<img data-src="/images/sections/keramia-tetocserep.jpg" alt="Kerámia tetőcserép" class="img-responsive lazyload">
</a>
</div>
<div class="col-sm-12 col-md-6 order-1 order-md-2">
<h2 class="fooldal_title">Kerámia tetőcserép</h2>
</div>
</div>
</div>
</section>
Also, you can use class "my-5" instead of "mt-5 mb-5".
I have an issue in responsive images in desktop the outcome is as expected but in any other device the last two grid item height is different than other grid item which is not as expected
It is supposed to have same height as rest of grid item The images are extracted from https://drive.google.com/uc?export=download&id=1gJ-g7EWreZu38DlaZltLDylPIBDHLSxX
The last two grid items i am talking about canopy and beach gateaway it should have same height as market and monument
.adventure-card {
/* TODO: MODULE_ADVENTURES_GRID */
/* 1. Fill in the required properties. */
display: flex;
flex-wrap: wrap;
cursor: none;
align-content: space-around;
justify-content: right;
height: 80%;
}
.adventure-card img {
/* TODO: MODULE_ADVENTURES_GRID */
/* 1. Fill in the required properties. */
width: 100%;
height: 100%;
}
<div class="container">
<div class="content">
<!-- TODO: MODULE_ADVENTURES_GRID -->
<!-- 1. Create the grid of adventures by adding child elements as required. -->
<div class="row">
<div class="col-6 col-sm-6 col-lg-3 mb-4 d-flex align-items-stretch px-md-5">
<a href="resort/index.html">
<div class="adventure-card p-1 border bg-light">
<div class="adventure-card img-responsive">
<img src="/assets/adventures/resort.jpg" alt="resort.jpg">
</div>
<p>Resort</p>
<p>₹1200 </p>
</div>
</a>
</div>
<div class="col-6 col-sm-6 col-lg-3 mb-4 d-flex align-items-stretch px-md-5">
<div class="adventure-card border bg-light">
<div class="adventure-card img-responsive">
<img src="/assets/adventures/tower.jpg" alt="tower.jpg">
</div>
<p>Tower</p>
<p>₹1,800 </p>
</div>
</div>
<div class="col-6 col-sm-6 col-lg-3 mb-4 d-flex align-items-stretch px-md-5">
<div class="adventure-card border bg-light">
<div class="adventure-card img-responsive">
<img src="/assets/adventures/mount.jpg" alt="Skiing.jpg">
</div>
<p> Skiing</p>
<p>₹1,900 </p>
</div>
</div>
<div class="col-6 col-sm-6 col-lg-3 mb-4 d-flex align-items-stretch px-md-5">
<div class="adventure-card border bg-light">
<div class="adventure-card img-responsive">
<img src="/assets/adventures/university.jpg" alt="university.jpg">
</div>
<p> University</p>
<p>₹800 </p>
</div>
</div>
</div>
<div class="row">
<div class="col-6 col-sm-6 col-lg-3 mb-4 d-flex align-items-stretch px-md-5">
<div class="adventure-card border bg-light">
<div class="adventure-card img-responsive">
<img src="/assets/adventures/market.jpg" alt="market.jpg">
</div>
<p> Market</p>
<p>₹600 </p>
</div>
</div>
<div class="col-6 col-sm-6 col-lg-3 mb-4 d-flex align-items-stretch px-md-5">
<div class="adventure-card border bg-light">
<div class="adventure-card img-responsive">
<img src="/assets/adventures/church.jpg" alt="monument.jpg">
</div>
<p> Monument</p>
<p>₹1,200 </p>
</div>
</div>
<div class="col-6 col-sm-6 col-lg-3 mb-4 d-flex align-items-stretch px-md-5">
<div class="adventure-card border bg-light">
<div class="adventure-card img-responsive">
<img src="/assets/adventures/canopy.jpg" alt="canopy.jpg">
</div>
<p> Canopy</p>
<p>₹1,800 </p>
</div>
</div>
<div class="col-6 col-sm-6 col-lg-3 mb-4 d-flex align-items-stretch px-md-5">
<div class="adventure-card border bg-light">
<div class="adventure-card img-responsive">
<img src="/assets/adventures/beachside.jpg" alt="canopy.jpg">
</div>
<p> Beach Gateaway</p>
<p>₹2,200 </p>
</div>
</div>
</div>
</div>
</div>
The images' you have mentioned size are different than the others so if you give them width and height %100 as custom CSS, they look different. That's why you can give them specific width and height to make equal instead of using percentage.
I've got a questtion about the Bootstrap Card Deck.
I create a Card Deck with two cards in a row. On the first card I've got some text under the header and in the second card there is no text under the header. In this case the grey color does not fill the whole card as you can see in the example. How can I fix it, that the hole column is also grey?
Thanks for your help!
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.11.0/css/mdb.min.css">
<div class="card-deck mb-5">
<a href="#" class="card hoverable">
<div class="card-body p-0">
<div class="row mx-0">
<div class="col-md-8 grey lighten-4 rounded-left pt-2">
<h5 class="font-weight-bold">Header</h5>
<p class="font-weight-light text-muted mb-2">Some text</p>
</div>
<div class="col-md-4 text-center pt-3">
<p class="h2 font-weight-normal">60</p>
</div>
</div>
</div>
</a>
<a href="#" class="card hoverable">
<div class="card-body p-0">
<div class="row mx-0">
<div class="col-md-8 grey lighten-4 rounded-left pt-2">
<h5 class="font-weight-bold">Header</h5>
<!-- <p class="font-weight-light text-muted mb-2">No text</p> -->
</div>
<div class="col-md-4 text-center pt-3">
<p class="h2 font-weight-normal">50</p>
</div>
</div>
</div>
</a>
</div>
If you want to have the height be equals the container, you can use h-100 on the div row mx-0.
More information can be found here: https://getbootstrap.com/docs/4.0/utilities/sizing/
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.11.0/css/mdb.min.css">
<div class="card-deck mb-5">
<a href="#" class="card hoverable">
<div class="card-body p-0">
<div class="row mx-0">
<div class="col-md-8 grey lighten-4 rounded-left pt-2">
<h5 class="font-weight-bold">Header</h5>
<p class="font-weight-light text-muted mb-2">Some text</p>
</div>
<div class="col-md-4 text-center pt-3">
<p class="h2 font-weight-normal">60</p>
</div>
</div>
</div>
</a>
<a href="#" class="card hoverable">
<div class="card-body p-0">
<div class="row h-100 mx-0">
<div class="col-md-8 grey lighten-4 rounded-left pt-2">
<h5 class="font-weight-bold">Header</h5>
<!-- <p class="font-weight-light text-muted mb-2">No text</p> -->
</div>
<div class="col-md-4 text-center pt-3">
<p class="h2 font-weight-normal"></p>
</div>
</div>
</div>
</a>
</div>
Ideally you should not play around with left/right margins of row and col in bootstrap. You should use no-gutters class with row to have the effect you want. Additionally, you should add h-100 on the second row to take full height. Also a better way to center align your number is like I have done in the snippet by using justify-content-center d-flex align-items-center.
Also your code was missing a container element so that scrollbar was coming in your snippet. I have added that too.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.11.0/css/mdb.min.css">
<div class="container">
<div class="card-deck mb-5">
<a href="#" class="card hoverable">
<div class="card-body p-0">
<div class="row h-100 no-gutters">
<div class="col-md-8 grey lighten-4 rounded-left">
<h5 class="font-weight-bold p-2">Header</h5>
<p class="font-weight-light text-muted mb-2 px-2">Some text</p>
</div>
<div class="col-md-4 text-center justify-content-center d-flex align-items-center">
<p class="h2 font-weight-normal">60</p>
</div>
</div>
</div>
</a>
<a href="#" class="card hoverable">
<div class="card-body p-0">
<div class="row h-100 no-gutters">
<div class="col-md-8 grey lighten-4 rounded-left">
<h5 class="font-weight-bold p-2">Header</h5>
<!-- <p class="font-weight-light text-muted mb-2 px-2">No text</p> -->
</div>
<div class="col-md-4 text-center justify-content-center d-flex align-items-center">
<p class="h2 font-weight-normal">50</p>
</div>
</div>
</div>
</a>
</div>
</div>
Please check the code differences https://i.stack.imgur.com/0Q2IX.png
Using anchor tag as it will not consider a height and width so you have to set a class in card-body using this class="card-body p-0 grey lighten-4".
Remove the class "grey lighten-4" from class="col-md-8 rounded-left pt-2" & set to class="card-body p-0 grey lighten-4"
.grey {
background-color: #f5f5f5 !important;
}
/*OR*/
.grey.lighten-4 {
background-color: #f5f5f5 !important;
}
<div class="card-deck mb-5">
<a href="#" class="card hoverable">
<div class="card-body p-0 grey lighten-4">
<div class="row mx-0">
<div class="col-md-8 rounded-left pt-2">
...
</div>
<div class="col-md-4 text-center pt-3">
...
</div>
</div>
</div>
</a>
</div>
Column not splitting properly. I need the bottom picture to go under the same picture above.
Changed col and image size
<div class=" container mx-auto mt-5 p-0">
<div class="row m-0 ">
<div class="col-4 p-0"><a href="ourstory.html"><img src="Mainimages/Ourhistory.jpg" style="width:100%"
alt="Our History"></a>
</div>
<div class="col-8 p-0">
<img src="Mainimages/Promotions.jpg" style="width:100%" alt="Promotions">
</div>
<div class="w-100"></div>
<div class="col-8 p-0">
<img src="Mainimages/Promotions.jpg" style="width:100%" alt="Promotions">
</div>
</div>
</div>
In bootstrap col-6 is synonymous to 50% and col-12 is 100%
So technically to achieve your aim you do:
|--------------------div:col-12------------------------------|
|------div:col-6---------| |----------div:col-6-------------|
|---------------------------| |----------div:row--------------|
|---------img-------------| |-div:col-12-|-|-div:col-12-|
|---------------------------| |-----img----|-|----img--------|
Try the snippet below:
.s50{
height:50%;
}
.s50 img {
width:100%;
height:100%
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container mx-auto mt-5 p-0">
<div class="row m-0 ">
<div class="col-6 p-0">
<a href="ourstory.html"><img src="https://pinimg.icu/wall/0x0/los-mejores-fondos-de-pantalla-para-hombres-tumblr-wallpaper-E7f21aa5c622192c35a8e92d039623fcc.jpg?t=5cf09dc88fee5" style="width:100%"
alt="Our History"></a>
</div>
<div class="col-6 p-0">
<div class="col-12 s50 p-0">
<img src="https://hackernoon.com/hn-images/1*lduEjOI-EQltoRbmKSICeA.jpeg" alt="Promotions">
</div>
<div class="col-12 s50 p-0">
<img src="https://d3n8a8pro7vhmx.cloudfront.net/3dna/pages/46410/meta_images/original/00-featured-bs4-bootstrap.jpg?1561992643" style="" alt="Promotions">
</div>
</div>
</div>
</div>
I'm not sure If you're looking for equal half's but you have to split the right hand side column into two rows again using divs to achieve this.
<div class="row">
<div class="col-md-6">
--First left image here--
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-12">
-- second top right image here --
</div>
</div>
<div class="row">
<div class="col-md-12">
-- third bottom right image here --
</div>
</div>
</div>
</div>
We don't have your exact images sizes, but I've tried to put dummy images just show you example, If you want your page to display in the same alignment, you have to divide the div equally which sums up. You can set and divide the divs equally and make it responsive by inserting classes col-sm and col-md.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="feature-wrapper bg-primary pt-5 pb-5 mt-5 mt-lg-0">
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-4 text-center mb-3 mb-md-0">
<a href="ourstory.html"><img src="https://dummyimage.com/100X40/000/fff" style="width:100%"
alt="Our History"></a> </div>
<div class="col-sm-12 col-md-4 text-center text-md-left text-uppercase mb-3 mb-md-0">
<img src="https://dummyimage.com/100X50/000/fff" style="width:100%" alt="Promotions">
</div>
<div class="col-sm-12 col-md-4 text-center mb-3 mb-md-0">
<img src="https://dummyimage.com/200X60/000/fff" style="width:100%" alt="Promotions">
</div>
</div>
</div>
</div>
hi I wants to show these columns in horizontal manner but these are showing in vertical manner ow can I change it;
blade file:
<div class="col-lg-3 mb-4">
<!-- Input & Button Groups -->
#foreach($category->products as $pro_data)
<div class="card card-small mb-4">
<div class="card-header border-bottom">
<h6 class="m-0">{{ $pro_data->product_name }}</h6>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item px-3">
<div class="input-group mb-3">
<div class="input-group input-group-seamless">
<img src="{{ URL::to('/') }}/images/backend_images/category_images/{{ $pro_data->product_image }}" class="img-thumbnail" style="width: 400px; height: 300px;" />
</div>
</div>
</li>
</ul>
</div>
#endforeach
<!-- / Input & Button Groups -->
</div>
If I understand you correctly you are trying to show the products of the categories next to each other horizontally but you are seeing them vertically at the moment.
I think a proper way would wrap the foreach with your
<div class="col-lg-3 mb-4"></div> which gives us
<div class="row">
#foreach($category->products as $pro_data)
<div class="col-lg-3 mb-4">
<div class="card card-small mb-4">
<div class="card-header border-bottom">
<h6 class="m-0">{{ $pro_data->product_name }}</h6>
</div>
<div class="input-group mb-3">
<div class="input-group input-group-seamless">
<img src="{{ URL::to('/') }}/images/backend_images/category_images/{{ $pro_data->product_image }}" class="img-thumbnail" style="width: 400px; height: 300px;" />
</div>
</div>
</div>
</div>
#endforeach
</div>
Hope it helps!
#foreach($category->products as $pro_data)
<div class="col-lg-3 mb-4">
<!-- Input & Button Groups -->
<div class="card card-small mb-4">
<div class="card-header border-bottom">
<h6 class="m-0">{{ $pro_data->product_name }}</h6>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item px-3">
<div class="input-group mb-3">
<div class="input-group input-group-seamless">
<img src="{{ URL::to('/') }}/images/backend_images/category_images/{{ $pro_data->product_image }}" class="img-thumbnail" style="width: 400px; height: 300px;" />
</div>
</div>
</li>
</ul>
</div>
</div>
#endforeach
Hope this will work for.
I would float the divs to the left with some padding and use clearfix if needed.
All cards appeared in the horizontal manner because you might did't wrap them all without .row class
Because a set of css properties are applied to the .row class
Try the following approach:
<div class="row">
<div class="col-lg-3 mb-4">
</div>
</div>
Your code should be something like this. Added a row wrapper and col inside the loop. I assume <div class="col-lg-3 mb-4"> is your container for all cards.
<div class="col-lg-3 mb-4">
<!-- Input & Button Groups -->
<div class="row">
#foreach($category->products as $pro_data)
<div class="col">
<div class="card card-small mb-4">
<div class="card-header border-bottom">
<h6 class="m-0">{{ $pro_data->product_name }}</h6>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item px-3">
<div class="input-group mb-3">
<div class="input-group input-group-seamless">
<img src="{{ URL::to('/') }}/images/backend_images/category_images/{{ $pro_data->product_image }}" class="img-thumbnail" style="width: 400px; height: 300px;" />
</div>
</div>
</li>
</ul>
</div>
</div>
#endforeach
<!-- / Input & Button Groups -->
</div><!-- end of row -->
</div>
in bootstrap 4 you can use columns in horizontal manner. You did't wrap them all without use .row class this is most important class.
this is the right way if you use bootstrap 4
<div class="row">
<div class="col-md-3 mb-4"></div>
<div class="col-md-3 mb-4"></div>
<div class="col-md-3 mb-4"></div>
<div class="col-md-3 mb-4"></div>
</div>
#foreach($category->products as $pro_data)
<div class="row">
<div class="col-lg-3 mb-4">
<div class="card card-small mb-4">
<div class="card-header border-bottom">
<h6 class="m-0">{{ $pro_data->product_name }}</h6>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item px-3">
<div class="input-group mb-3">
<div class="input-group input-group-seamless">
<img src="{{ URL::to('/') }}/images/backend_images/category_images/{{ $pro_data->product_image }}" class="img-thumbnail" style="width: 400px; height: 300px;" />
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
#endforeach