how can I align brief text below image? - html

I am trying to align my demo text below my image. I am currently using bootstrap, but how can I do align this below my image and ::after between divs an icon > layout
<section>
<h2 class="main-title">
<font style="vertical-align: inherit;"><font style="vertical-align: inherit;">Test process</font></font>
</h2>
<div class="container demo">
<div class="row" style="text-align: center;">
<div class="steps">
<img src="https://code.google.com/images/developers.png" style="height: 80px;" />
</div>
<div class="col-md-6 col-xs-6">
<h2 class="steps__title">How It Works</h2>
<p>demo</p>
</div>
</div>
<div class="row" style="text-align: center;">
<div class="steps">
<img src="https://code.google.com/images/developers.png" style="height: 80px;" />
</div>
<div class="col-md-6 col-xs-6">
<h2 class="steps__title">How It Works</h2>
<p>demo</p>
</div>
</div>
<div class="row" style="text-align: center;">
<div class="steps">
<img src="https://code.google.com/images/developers.png" style="height: 80px;" />
</div>
<div class="col-md-6 col-xs-6">
<h2 class="steps__title">How It Works</h2>
<p>demo</p>
</div>
</div>
</div>
</section>


Firstly you are using very wrong Bootstrap.
Please research how to use container, row, flex and column on Bootstrap. Check this here. Secondly, always use separate divs in col.
That's my snippet check this and please that you preview full page.
.icon img {
margin-top: 10px;
}
.details h2 {
font-weight: 400;
font-size: 25px;
color:#515f7f;
}
.details p {
margin-top: -5px;
}
<!DOCTYPE html>
<html>
<head>
<title>arg0-container</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
</head>
<body>
<section class="mt-5">
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="icon d-flex">
<img src="https://code.google.com/images/developers.png" height="80px" />
<div class="details ml-4 mt-2 text-center d-block">
<h2>How It <br> Works</h2>
<p>Demo</p>
</div>
</div>
<p class="ml-2 mt-3">Lorem ipsum dolor sit amet!</p>
</div>
<div class="col-md-4">
<div class="icon d-flex">
<img src="https://code.google.com/images/developers.png" height="80px" />
<div class="details ml-4 mt-2 text-center d-block">
<h2>How It <br> Works</h2>
<p>Demo</p>
</div>
</div>
<p class="ml-2 mt-3">Lorem ipsum dolor sit amet!</p>
</div>
<div class="col-md-4">
<div class="icon d-flex">
<img src="https://code.google.com/images/developers.png" height="80px" />
<div class="details ml-4 mt-2 text-center d-block">
<h2>How It <br> Works</h2>
<p>Demo</p>
</div>
</div>
<p class="ml-2 mt-3">Lorem ipsum dolor sit amet!</p>
</div>
</div>
</div>
</section>
</body>
</html>

Related

My images are not being displayed in a row

In a section of my code I made a row-grid for a part that displays images but when I went to insert and look at the website its not displaying in a row format but in a column and im not sure why. I thought the problem came from it being col-sm-6 but i changed it to col-sm-12 and its still not displaying it. Any reasons why?
.site-main .project-area {
padding: 4rem 0;
}
.site-main .project-area .button-group button {
background: transparent;
border: none;
font: normal 500 16px/130px var(--lato);
text-transform: uppercase;
}
.site-main .project-area .button-group button+button {
padding-left: 3rem;
}
.site-main .project-area .grid .our-project>title h4 {
font: normal 700 25px/12px var(--lato);
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<section class="project-area">
<div class="container">
<div class="project title pb-5">
<h1 class="h1 text-uppercase title-h1"> Recent Projects</h1>
<h1 class="h1 text-uppercase title h1"> Quality Work</h1>
</div>
<div class="div button-group">
<button type="button" class="active">All</button>
<button type="button" data-filter=".cars">Cars</button>
<button type="button" data-filter=".character">Characters</button>
<button type="button">Food</button>
<button type="button">Activities</button>
</div>
<div class="row-grid">
<div class="col-lg-4 col-md-6 col-sm-6 element-item cars">
<div class="our-project">
<div class="img">
<img src="./img/portfolio/car.jpg" alt="car">
</div>
<div class="title py-4">
<h4 class="text-uppercase">minimul design</h4>
<span class="text-secondary">Latest, Popular</span>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-12 element-item character">
<div class="our-project">
<div class="img">
<img src="./img/portfolio/images.jpg" alt="car">
</div>
<div class="title py-4">
<h4 class="text-uppercase">video game character</h4>
<span class="text-secondary">popular, Portfolio</span>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-12 element-item popular">
<div class="our-project">
<div class="img">
<img src="./img/portfolio/ntfs-to-be-professional-gamer-image1.jpg" alt="car">
</div>
<div class="title py-4">
<h4 class="text-uppercase">minimul design</h4>
<span class="text-secondary">Latest, Popular</span>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-12 element-item popular">
<div class="our-project">
<div class="img">
<img src="./img/portfolio/ntfs-to-be-professional-gamer-image1.jpg" alt="car">
</div>
<div class="title py-4">
<h4 class="text-uppercase">minimul design</h4>
<span class="text-secondary">Latest, Popular</span>
</div>
</div>
</div>
</div>
</div>
</section>

Changing the class row-grid to row makes it work. I don't think Bootstrap has a class called row-grid.
If you are trying to fit all the div elements into one row, just replace the col-lg-4 col-md-6 col-sm-6 and the col-lg-4 col-md-6 col-sm-12 with col

How can I place a text below another text when they're in the same row but in different columns?

I was wondering how can I place a text below another text when they're in the same row but in different columns?
This is image shows my current situation and goals. I applied a border attribute to see how the row and columns were distributed.
This is my HTML code:
<!-- Bootstrap-4 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<!-- Body -->
<div class="row mt-3">
<div class="col-7 border d-flex justify-content-start">
<p class="mb-3 b d-block text-right" style="color: #00A0DE; font-size: 50px;">Choose it</p>
<br> <br>
<p class="d-block b border" style="padding-top:40px; color: #323e48;">Select your favorite <br>product</p>
<img src="../../../assets/images/Generals/Number1.PNG" alt="" style="align-self: center;" width="100" height="100" style="margin-left:500px;">
</div>
<div class="col-5">
<div class="semirounded-square-2">
<div>
<img src="../../../assets/images/Generals/Character_1.png" alt="" width="250" style="padding-bottom: 100px;">
</div>
</div>
</div>
</div>
Any ideas how can I distribute my HTML elements in a way that it resembles the desired result?

If you want this behavior for mobile screens you can change the display property for col-7's flex property on responsive view
#media screen and (max-width: 767px) {
.col-7.d-flex {
display: block!important;
}
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css">
<div class="row mt-3">
<div class="col-7 border d-flex justify-content-start">
<p class="mb-3 b d-block text-right" style="color: #00A0DE; font-size: 50px;">Choose it</p>
<br> <br>
<p class="d-block b border" style="padding-top:40px; color: #323e48;">Select your favorite <br>product</p>
</div>
<div class="col-5 d-flex">
<img src="../../../assets/images/Generals/Number1.PNG" alt=""
style="align-self: center;" width="100" height="100" style="margin-left:500px;">
<div class="semirounded-square-2">
<div>
<img src="https://picsum.photos/id/237/200/300"
alt="" width="250" style="padding-bottom: 100px;">
</div>
</div>
</div>
</div>
Make sure to wrap both images in a same div
Else
If you want the same behavior desktop view you can try this
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css">
<div class="row mt-3">
<div class="col-5 border d-flex justify-content-start">
<p class=" text-right" style="color: #00A0DE; font-size: 50px;">Choose it <span class='d-block' style="color:black; font-size:20px;">Select your favorite </span> <span class='d-block text-center' style="color:black; font-size:20px;">product</span></p>
<img src="../../../assets/images/Generals/Number1.PNG" alt=""
style="align-self: center;" width="100" height="100" style="margin-left:500px;">
</div>
<div class="col-4">
<div class="semirounded-square-2">
<div>
<img src="../../../assets/images/Generals/Character_1.png"
alt="" width="250" style="padding-bottom: 100px;">
</div>
</div>
</div>
</div>

<div class="row mt-3">
<div class="col-5 border d-flex justify-content-start">
<p class=" text-right" style="color: #00A0DE; font-size: 50px;">Choose it <span class='d-block' style="color:black; font-size:20px;">Select your favorite </span> <span class='d-block text-center' style="color:black; font-size:20px;">product</span></p>
<img src="../../../assets/images/Generals/Number1.PNG" alt=""
style="align-self: center;" width="100" height="100" style="margin-left:500px;">
</div>
<div class="col-4">
<div class="semirounded-square-2">
<div>
<img src="../../../assets/images/Generals/Character_1.png"
alt="" width="250" style="padding-bottom: 100px;">
</div>
</div>
</div>
</div>

Why button is overlapping with images in css?

I am new to web devlopment and stuck on this issue for quite some time now.
I wish to make a table(in 2nd col-6) with buttons at top and than changing content(scrollable cards) below it based on button click.
I tried to implement it but my cards and buttons overlap how to tackle this and overlapping makes buttons non reactive.
<div class="Container">
<div class="row">
<div class="col-md-6 ">
<div > this is the table</div>
</div>
<div class="col-md-6 ">
<div class="container">
<div >
<div v-for="(eachbutton, index) in getbuttons" :key="index" style="color:#ffff">
<button class="tablink" style="margin-bottom:12px" #click="changeList(eachWidget.displayTitle)" id="defaultOpen">{{eachbutton.displayTitle}}</button>
</div>
</div>
<div v-for="(each, index) in getCarddata" :key="index" style="color:#ffff">
<div class="col-md-4 col-12 " style="width: 200px; height:90px margin-top: 90px">
<div class="card mb-6" style="background-color: #050b06;">
<div class="row g-0 ">
<div class="col-md-6 col-6 w-100 h-100">
<img class="w-100 h-100" style="margin:11px" :src="each.ImageUrl" alt="..." />
</div>
<div class="col-md-6 col-6">
<p class="card-text text-episode" style="text-align: left; color:#fff;">
<small class="text-muted"> card</small>
</p>
<p class="card-text text-start" style="text-align: left;">
<small class="text-muted">text</small
>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

I hope you are using bootstrap 4 or higher, Try this
<div class="Container">
<div class="row">
<div class="col-md-6 ">
<div > this is the table</div>
</div>
<div class="col-md-6 ">
<div class="row">
<div class="col-md-12">
<div v-for="(eachbutton, index) in getbuttons" :key="index" style="color:#ffff">
<button class="tablink" style="margin-bottom:12px" #click="changeList(eachWidget.displayTitle)" id="defaultOpen">{{eachbutton.displayTitle}}</button>
</div>
</div>
<div class="col-md-12">
<div v-for="(each, index) in getCarddata" :key="index" style="color:#ffff">
<div class="col-md-4 col-12 " style="width: 200px; height:90px margin-top: 90px">
<div class="card mb-6" style="background-color: #050b06;">
<div class="row g-0 ">
<div class="col-md-6 col-6 w-100 h-100">
<img class="w-100 h-100" style="margin:11px" :src="each.ImageUrl" alt="..." />
</div>
<div class="col-md-6 col-6">
<p class="card-text text-episode" style="text-align: left; color:#fff;">
<small class="text-muted"> card</small>
</p>
<p class="card-text text-start" style="text-align: left;">
<small class="text-muted">text</small
>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Bootstrap justify-content-around not spreading items

I'm trying to spread 3 rows of 4 bootstrap cards evenly across a jumbotron with space-around. This is the result:
I can't figure out why it's not spreading evenly. I'm not sure if there's a margin interfering thats included with bootstrap or something else. Here's my code:
<div class="jumbotron d-flex flex-column justify-content-around">
<div class="row">
<div class="card border-warning mb-3" style="max-width: 20rem;">
<div class="card-header">Bitcoin</div>
<div class="card-body">
<div class="text-center">
<img src="wallets/bitcoin.png" alt="Bitcoin QR Code" width="60%" height="60%" />
</div>
<br>
<p class="card-text">bc1qnjpcl0xtywcuxuc7fr9s5gsnhkugnpf0udcn00</p>
</div>
</div>
<div class="card border-success mb-3" style="max-width: 20rem;">
<div class="card-header">Bitcoin Cash</div>
<div class="card-body">
<div class="text-center">
<img src="wallets/cash.png" alt="Bitcoin Cash QR Code" width="60%" height="60%" />
</div>
<br>
<p class="card-text">qrrj4pcweu0v6vn37q4f6euqah6es5p93uqlcxr8kl</p>
</div>
</div>
<div class="card border-light mb-3" style="max-width: 20rem;">
<div class="card-header">Litecoin</div>
<div class="card-body">
<div class="text-center">
<img src="wallets/litecoin.png" alt="Litecoin QR Code" width="60%" height="60%" />
</div>
<br>
<p class="card-text">LSTzUWZbAVRCgDMHjc9fjPM5PFRndKxnkK</p>
</div>
</div>
<div class="card border-ethereum mb-3" style="max-width: 20rem;">
<div class="card-header">Ethereum</div>
<div class="card-body">
<div class="text-center">
<img src="wallets/ethereum.png" alt="Ethereum QR Code" width="60%" height="60%" />
</div>
<br>
<p class="card-text">0xe67F900395958c609Ad3098A0a85d8fCf19B6067</p>
</div>
</div>
</div>
<div class="row">
<div class="card border-info mb-3" style="max-width: 20rem;">
<div class="card-header">XRP</div>
<div class="card-body">
<div class="text-center">
<img src="wallets/xrp.png" alt="XRP QR Code" width="60%" height="60%" />
</div>
<br>
<p class="card-text">rUS4KaEGr7Xdac5XAjeqEvSXpgewxHQjK1</p>
</div>
</div>
<div class="card border-monero mb-3" style="max-width: 20rem;">
<div class="card-header">Monero</div>
<div class="card-body">
<div class="text-center">
<img src="wallets/monero.png" alt="Monero QR Code" width="60%" height="60%" />
</div>
<br>
<p class="card-text monero">4AvkGD1MNUhB8dLgAYEUUK1UJxJuj6zXC9DDPb2ywYpRCZ1Y6yWGaxFfD3q8HAgbPXXqnqaGxiZGqjFtjULbgGDhAiLBX6M</p>
</div>
</div>
<div class="card border-info mb-3" style="max-width: 20rem;">
<div class="card-header">Dash</div>
<div class="card-body">
<div class="text-center">
<img src="wallets/dash.png" alt="Dash QR Code" width="60%" height="60%" />
</div>
<br>
<p class="card-text">Xukc7xfRecEMMNuhDKb5Vb1MkoNe28Pson</p>
</div>
</div>
<div class="card border-warning mb-3" style="max-width: 20rem;">
<div class="card-header">ZCash</div>
<div class="card-body">
<div class="text-center">
<img src="wallets/zcash.png" alt="ZCash QR Code" width="60%" height="60%" />
</div>
<br>
<p class="card-text">t1PN1dwc8brKkKhzWqZahwuarngs5STa9fy</p>
</div>
</div>
</div>
<div class="row">
<div class="card border-doge mb-3" style="max-width: 20rem;">
<div class="card-header">DogeCoin</div>
<div class="card-body">
<div class="text-center">
<img src="wallets/dogecoin.png" alt="DogeCoin QR Code" width="60%" height="60%" />
</div>
<br>
<p class="card-text">DR6gfyGh2txp9eMpvuweQwUqPzqWc7VJBN</p>
</div>
</div>
<div class="card border-warning mb-3" style="max-width: 20rem;">
<div class="card-header">Bitcoin Gold</div>
<div class="card-body">
<div class="text-center">
<img src="wallets/gold.png" alt="Bitcoin Gold QR Code" width="60%" height="60%" />
</div>
<br>
<p class="card-text">GTuJYM373DDa8qWYx4ryTwaDDpPkY5CxD9</p>
</div>
</div>
</div>
</div>
Here's my css, but it's just for extra border colors:
.border-ethereum{
border-color: #5c7de9 !important;
}
.border-monero{
border-color: #ff7a00 !important;
}
.border-doge{
border-color: #ceb73d !important;
}
.monero{
font-size: 10px;
}
Can someone help?

Remove <div class="row">. Change flex-column to flex-row in <div class="jumbotron d-flex flex-row justify-content-around">
/* Here's my css, but it's just for extra border colors: */
.border-ethereum {
border-color: #5c7de9 !important;
}
.border-monero {
border-color: #ff7a00 !important;
}
.border-doge {
border-color: #ceb73d !important;
}
.monero {
font-size: 10px;
}
<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>
<div class="jumbotron d-flex flex-row justify-content-around">
<div class="card border-warning mb-3" style="max-width: 20rem;">
<div class="card-header">Bitcoin</div>
<div class="card-body">
<div class="text-center">
<img src="wallets/bitcoin.png" alt="Bitcoin QR Code" width="60%" height="60%" />
</div>
<br>
<p class="card-text">bc1qnjpcl0xtywcuxuc7fr9s5gsnhkugnpf0udcn00</p>
</div>
</div>
<div class="card border-success mb-3" style="max-width: 20rem;">
<div class="card-header">Bitcoin Cash</div>
<div class="card-body">
<div class="text-center">
<img src="wallets/cash.png" alt="Bitcoin Cash QR Code" width="60%" height="60%" />
</div>
<br>
<p class="card-text">qrrj4pcweu0v6vn37q4f6euqah6es5p93uqlcxr8kl</p>
</div>
</div>
<div class="card border-light mb-3" style="max-width: 20rem;">
<div class="card-header">Litecoin</div>
<div class="card-body">
<div class="text-center">
<img src="wallets/litecoin.png" alt="Litecoin QR Code" width="60%" height="60%" />
</div>
<br>
<p class="card-text">LSTzUWZbAVRCgDMHjc9fjPM5PFRndKxnkK</p>
</div>
</div>
<div class="card border-ethereum mb-3" style="max-width: 20rem;">
<div class="card-header">Ethereum</div>
<div class="card-body">
<div class="text-center">
<img src="wallets/ethereum.png" alt="Ethereum QR Code" width="60%" height="60%" />
</div>
<br>
<p class="card-text">0xe67F900395958c609Ad3098A0a85d8fCf19B6067</p>
</div>
</div>
</div>

Bootstrap 4 columns not working

I'm a student. And I have used Bootstrap 3.3.7 and after moved to v4.1. In this version, columns are not floating automatically to right. So I used d-inline-block class. I created 4 blocks with 3 of columns for each. The number of columns in a row is equal to 12. Then the last column jumps to the new line instead of wrap to the previous column. But this code works fine with Bootstrap 3.3.7. Also, I used 2 columns just for one block, and when the number of columns is smaller than 12, there is no problem. I couldn't find any proper solution on google. Please help. Thank you.
Example:
https://jsfiddle.net/EshanRajapakshe/3aeaeohb/
My code is:
<section class="popular-templates-section">
<div class="container-fluid">
<div class="col-lg-12 col-md-12">
<div class="popular-templates-title">
<h4>Most Popular Templates</h4>
</div>
<div class="popular-templates">
<div class="col-lg-3 col-md-3 d-inline-block">
<div class="template-img">
<img src="assets/images/template-thumb/template-1.jpg" alt="">
</div>
</div>
<div class="col-lg-3 col-md-3 d-inline-block">
<div class="template-img">
<img src="assets/images/template-thumb/template-1.jpg" alt="">
</div>
</div>
<div class="col-lg-3 col-md-3 d-inline-block">
<div class="template-img">
<img src="assets/images/template-thumb/template-1.jpg" alt="">
</div>
</div>
<div class="col-lg-3 col-md-3 d-inline-block">
<div class="template-img">
<img src="assets/images/template-thumb/template-1.jpg" alt="">
</div>
</div>
</div>
</div>
</div>
</section>

Wrap your .cols inside a .row like this
<div class="row">
<div class="col-lg-6">6 cols</div>
<div class="col-lg-6">6 cols</div>
</div>
Also remove the d-inline-block class from cols.
In your particular case:
<section class="popular-templates-section">
<div class="container-fluid">
<div class="row">
<div class="col">
<div class="popular-templates-title">
<h4>Most Popular Templates</h4>
</div>
</div>
</div>
<div class="popular-templates">
<div class="row">
<div class="col-lg-3 col-md-3">
<div class="template-img">
<img class="img-fluid" src="assets/images/template-thumb/template-1.jpg" alt="">
</div>
<div class="template-info">
<div class="template-name-type">
<h6 class="template-name">Web Design Inspiration</h6>
<h6 class="template-type">HTML5 Template</h6>
<h6 class="template-more-details">MORE DETAILS</h6>
</div>
<div class="template-price-type">
<h5 class="template-price">$78</h5>
<div class="template-type-icons">
<img src="assets/images/icons/responsive-devices.png" alt="" data-toggle="tooltip" data-placement="top" title="" data-original-title="Responsive Website">
<img src="assets/images/icons/bootstrap.png" alt="" data-toggle="tooltip" data-placement="top" title="" data-original-title="Bootstrap 4 Template">
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-3">
<div class="template-img">
<img class="img-fluid" src="assets/images/template-thumb/template-1.jpg" alt="">
</div>
<div class="template-info">
<div class="template-name-type">
<h6 class="template-name">Web Design Inspiration</h6>
<h6 class="template-type">HTML5 Template</h6>
<h6 class="template-more-details">MORE DETAILS</h6>
</div>
<div class="template-price-type">
<h5 class="template-price">$78</h5>
<div class="template-type-icons">
<img src="assets/images/icons/responsive-devices.png" alt="" data-toggle="tooltip" data-placement="top" title="" data-original-title="Responsive Website">
<img src="assets/images/icons/bootstrap.png" alt="" data-toggle="tooltip" data-placement="top" title="" data-original-title="Bootstrap 4 Template">
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-3">
<div class="template-img">
<img class="img-fluid" src="assets/images/template-thumb/template-1.jpg" alt="">
</div>
<div class="template-info">
<div class="template-name-type">
<h6 class="template-name">Web Design Inspiration</h6>
<h6 class="template-type">HTML5 Template</h6>
<h6 class="template-more-details">MORE DETAILS</h6>
</div>
<div class="template-price-type">
<h5 class="template-price">$78</h5>
<div class="template-type-icons">
<img src="assets/images/icons/responsive-devices.png" alt="" data-toggle="tooltip" data-placement="top" title="" data-original-title="Responsive Website">
<img src="assets/images/icons/bootstrap.png" alt="" data-toggle="tooltip" data-placement="top" title="" data-original-title="Bootstrap 4 Template">
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-3">
<div class="template-img">
<img class="img-fluid" src="assets/images/template-thumb/template-1.jpg" alt="">
</div>
<div class="template-info">
<div class="template-name-type">
<h6 class="template-name">Web Design Inspiration</h6>
<h6 class="template-type">HTML5 Template</h6>
<h6 class="template-more-details">MORE DETAILS</h6>
</div>
<div class="template-price-type">
<h5 class="template-price">$78</h5>
<div class="template-type-icons">
<img src="assets/images/icons/responsive-devices.png" alt="" data-toggle="tooltip" data-placement="top" title="" data-original-title="Responsive Website">
<img src="assets/images/icons/bootstrap.png" alt="" data-toggle="tooltip" data-placement="top" title="" data-original-title="Bootstrap 4 Template">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
Also added the class img-fluid to imgs so it won't be bigger than its container.
Bootstrap-v4 Grid system Docs

Here is the updated fiddle link
I edited ur html, removed un necessary classes.
Also if u want all columns to be of same size on all devices, u only need one col-{number} class
Also there is no col-xs-{class} in bootstrap 4. Instead of that, use col-{number}
<section class="popular-templates-section">
<div class="container-fluid">
<div class="popular-templates-title">
<h4>Most Popular Templates</h4>
</div>
<div class="popular-templates">
<div class="row m-0">
<div class="col-3 blue">
<div class="template-img">
<img src="assets/images/template-thumb/template-1.jpg" alt="">
</div>
</div>
<div class="col-3 black">
<div class="template-img">
<img src="assets/images/template-thumb/template-1.jpg" alt="">
</div>
</div>
<div class="col-3 blue">
<div class="template-img">
<img src="assets/images/template-thumb/template-1.jpg" alt="">
</div>
</div>
<div class="col-3 black">
<div class="template-img">
<img src="assets/images/template-thumb/template-1.jpg" alt="">
</div>
</div>
</div>
</div>
</div>
</section>

You are facing issues basically because of the improper semantics of Bootstrap grid used by you. Find below the corrected code, it will help for sure.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="author" content="Akash Kumar">
<meta name="url" content="http://akashshivanand.com">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<style type="text/css">
.blue {
padding: 5px;
background: blue;
}
.black {
padding: 5px;
background: black;
}
</style>
<title> by EshanRajapakshe</title>
</head>
<body>
<section class="popular-templates-section">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="popular-templates-title">
<h4>Most Popular Templates</h4>
</div>
<div class="popular-templates">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 d-inline-block blue">
<div class="template-img">
<img src="assets/images/template-thumb/template-1.jpg" alt="">
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 d-inline-block black">
<div class="template-img">
<img src="assets/images/template-thumb/template-1.jpg" alt="">
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 d-inline-block blue">
<div class="template-img">
<img src="assets/images/template-thumb/template-1.jpg" alt="">
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 d-inline-block black">
<div class="template-img">
<img src="assets/images/template-thumb/template-1.jpg" alt="">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</body>
</html>