I am trying to place text at the bottom of the image but it's placed at side of the image
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-xl-4">
<div class="d-flex justify-content-center">
<img src="https://via.placeholder.com/150">
<h4>A</h4>
</div>
</div>
<div class="col-xl-4">
<div class="d-flex justify-content-center">
<img src="https://via.placeholder.com/150">
<h4>B</h4>
</div>
</div>
</div>
</div>
</div>
I suggest using semantic HTML with text-center class:
<figure>
<img src="https://via.placeholder.com/150">
<figcaption class="text-center">B</figcaption>
</figure>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-xl-4">
<div class="d-flex justify-content-center">
<figure>
<img src="https://via.placeholder.com/150">
<figcaption class="text-center">A</figcaption>
</figure>
</div>
</div>
<div class="col-xl-4">
<div class="d-flex justify-content-center">
<figure>
<img src="https://via.placeholder.com/150">
<figcaption class="text-center">B</figcaption>
</figure>
</div>
</div>
</div>
</div>
</div>
Related
I'm trying to build a portfolio with bootstrap cards where images are also required to be displayed.
Problem is that images are not contained properly within bootstrap card around corners(with class="card-img-top") like some cards are not rounded or some images are not rounded but cards are rounded(tried class="img-rounded").
Kindly zoom in on the images to see the difference. Below are some snippets (and code is given below the snippets):-
Perfect card with image:-
Yellow-> difference
Bug-1:-
Bug-2:-
Bug-3:-
Bug-4:-
Code:-
<%- include('partials/headHTML') %>
<link rel="stylesheet" href="/css/tourpackageStyles.css">
</head>
<!-- <%- include('partials/header') %> -->
<div class="Container">
<div class="container-fluid">
<div class="row">
<div class="col col-md-4">
<div class="card h-100">
<img src="https://cdn.pixabay.com/photo/2022/06/05/20/24/rome-7244828_960_720.jpg" alt="" class="card-img-top">
<div class="card-body">
<div class="card-title">Title-1</div>
</div>
<a target="_blank" rel="noopener noreffer" href="#" role="button"
class="btn btn-sm btn-secondary">Enquire</a>
</div>
</div>
<div class="col col-md-4">
<div class="card h-100">
<img src="/images/wildlife/wildlife_tour.jpg"
alt=""
class="card-img-top">
<div class="card-body">
<div class="card-title">Title- 2</div>
</div>
<a target="_blank" rel="noopener noreffer" href="#"
class="btn btn-sm btn-secondary">Enquire</a>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row row-cols-1 row-cols-md-3 row-cols-sm-2 gy-3">
<div class="col">
<div class="card h-100">
<img src="https://cdn.pixabay.com/photo/2022/06/05/20/24/rome-7244828_960_720.jpg" alt="" class="card-img-top">
<div class="card-body">
<div class="card-title">
Title- 3
</div>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="https://cdn.pixabay.com/photo/2022/06/05/20/24/rome-7244828_960_720.jpg" alt="" class="card-img-top">
<div class="card-body">
<div class="card-title">
Title- 4
</div>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="https://cdn.pixabay.com/photo/2022/06/05/20/24/rome-7244828_960_720.jpg" alt="" class="card-img-top">
<div class="card-body">
<div class="card-title">
Title- 5
</div>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="" alt="">
<div class="card-body">
<div class="card-title">
Title- 6
</div>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="" alt="">
<div class="card-body">
<div class="card-title">
Title- 7
</div>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="" alt="">
<div class="card-body">
<div class="card-title">
Title- 8
</div>
</div>
</div>
</div>
</div>
</div>
</div>
If you wish to display only image while using card then place image inside card-body to achieve what you want and give card class "overflow-hidden". Because if you use "card-img-top" and then it has only border-top-left-radius and border-top-right-radius so image wouldn't be rounded on bottom.so you have to provide border-radius manually to both bottom side.
<div class="card overflow-hidden">
<div class="card-body">
<img class="img-fluid" src="" alt="">
</div>
</div>
For more information refer official docs https://getbootstrap.com/docs/5.2/components/card/
Now, there is a white space in the bottom part of the left column. Or the right column exceeds the baseline.
enter image description here
<section class="courses">
<div class="container-fluid">
<!-- Gallery -->
<div class="row g-0">
<div class="col-lg-5 col-md-12">
<h2 class="p-3 text-center text-white">Courses</h2>
<img src="./img/courses1.png" class="w-100" alt=""/>
<img src="./img/courses3.png" class="w-100" alt=""/>
<img src="./img/courses6.png" class="w-100" alt=""/>
<h4 class="p-3 text-center text-white">Get The Best Training</h4>
</div>
<div class="col-lg-7">
<img src="./img/courses2.png" class="w-100" alt="" />
<h4 class="p-3 text-center text-white">Get The Best Training</h4>
<div class="row g-0">
<div class="col-lg-6">
<img src="./img/courses4.png" class="w-100" alt=""/>
</div>
<div class="col-lg-6">
<img src="./img/courses5.png" class="w-100" alt="" />
</div>
</div>
<img src="./img/courses6.png" class="w-100" alt=""/>
</div>
</div>
<!-- Gallery -->
</div>
</section>
When adding the bootstrap class "img-fluid" to my images they don't appear, when inspecting the element it sets the image at 0x0 pixels.
The html:
<div class="col">
<div class="row no-gutters">
<div class="col">
<img src="assets/images/placeholder.png" class="img-fluid"
alt="placeholder">
</div>
<div class="col">
<img src="assets/images/placeholder.png" class="img-fluid" alt="placeholder">
</div>
<div class="w-100"></div>
<div class="col">
<img src="assets/images/placeholder.png" class="img-fluid" alt="placeholder">
</div>
<div class="col">
<img src="assets/images/placeholder.png" class="img-fluid" alt="placeholder">
</div>
</div>
</div>
The images are supposed to be the same size as the parent(div.col) and be responsive to the parent.
Here's an answer based on my comment.
Because you have a .col element as a child of a flex parent, the flex-basis is set to 0. That basically equates to width: 0.
To get around that, set the flex-basis to auto on the .col that are children of the .row element.
.row>.col {
flex-basis: auto;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="col">
<div class="row no-gutters">
<div class="col">
<img src="https://placehold.it/100x100" class="img-fluid" alt="placeholder">
</div>
<div class="col">
<img src="https://placehold.it/100x100" class="img-fluid" alt="placeholder">
</div>
<div class="w-100"></div>
<div class="col">
<img src="https://placehold.it/100x100" class="img-fluid" alt="placeholder">
</div>
<div class="col">
<img src="https://placehold.it/100x100" class="img-fluid" alt="placeholder">
</div>
</div>
</div>
I'm creating a grid to display images of a team. I have a grid of images and I need to position my bottom 2 images below the top 2 middle images - basically centralizing the bottom 2. How can I achieve this? I've added my HTML and CSS below. Any help will be appreciated. Thanks.
.team-grids .team-img {
overflow: hidden;
position: relative;
display: block;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="team">
<div class="container">
<div class="w3l-heading">
<h3>Our Team</h3>
</div>
<div class="team-row">
<div class="col-md-3 team-grids">
<div class="team-img">
<img class="img-responsive" src="https://via.placeholder.com/200x200" alt="">
<div class="captn">
<div class="captn-top">
<h4>Edwards Doe</h4>
<p>description</p>
</div>
</div>
</div>
</div>
<div class="col-md-3 team-grids">
<div class="team-img">
<img class="img-responsive" src="https://via.placeholder.com/200x200" alt="">
<div class="captn">
<div class="captn-top">
<h4>Mark Sophia</h4>
<p>description</p>
</div>
</div>
</div>
</div>
</div>
</div>
Done. Just need to add text-align: center; , see the example below :D
.team-grids .team-img {
overflow: hidden;
position: relative;
display: block;
text-align: center;
}
<div class="team">
<div class="container">
<div class="w3l-heading">
<h3>Our Team</h3>
</div>
<div class="team-row">
<div class="col-md-3 team-grids">
<div class="team-img">
<img class="img-responsive" src="~/Content/Images/t1.jpg" alt="">
<div class="captn">
<div class="captn-top">
<h4>Edwards Doe</h4>
<p>description</p>
</div>
</div>
</div>
</div>
<div class="col-md-3 team-grids">
<div class="team-img">
<img class="img-responsive" src="~/Content/Images/t1.jpg" alt="">
<div class="captn">
<div class="captn-top">
<h4>Mark Sophia</h4>
<p>description</p>
</div>
</div>
</div>
</div>
</div>
</div>
Try to add these rules display: flex; and justify-content: center; to .team-row class like below
.team-row{
display: flex;
justify-content: center;
}
Run the Code snippet bellow :
.team-row{
display: flex;
justify-content: center;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="team">
<div class="container">
<div class="w3l-heading">
<h3>Our Team</h3>
</div>
<div class="team-row">
<div class="col-md-3 team-grids">
<div class="team-img">
<img class="img-responsive" src="https://via.placeholder.com/200x200" alt="">
<div class="captn">
<div class="captn-top">
<h4>Edwards Doe</h4>
<p>description</p>
</div>
</div>
</div>
</div>
<div class="col-md-3 team-grids">
<div class="team-img">
<img class="img-responsive" src="https://via.placeholder.com/200x200" alt="">
<div class="captn">
<div class="captn-top">
<h4>Mark Sophia</h4>
<p>description</p>
</div>
</div>
</div>
</div>
</div>
</div>
you can try adding this:
.team-grids {
margin: 0 auto;
}
edited: my bad, pls try this one.
add justify-content-md-center
.team-grids .team-img {
overflow: hidden;
position: relative;
display: block;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.0/css/bootstrap.min.css" />
<div class="team">
<div class="container">
<div class="w3l-heading">
<h3>Our Team</h3>
</div>
<div class="row team-row justify-content-sm-center">
<div class="col-md-3 col-sm-3 team-grids">
<div class="team-img">
<img class="img-responsive" src="https://gyazo.com/2fac18f9f6395e4815234d5512de6cba.png" alt="">
<div class="captn">
<div class="captn-top">
<h4>Edwards Doe</h4>
<p>description</p>
</div>
</div>
</div>
</div>
<div class="col-md-3 col-sm-3 team-grids">
<div class="team-img">
<img class="img-responsive" src="https://gyazo.com/2fac18f9f6395e4815234d5512de6cba.png" alt="">
<div class="captn">
<div class="captn-top">
<h4>Mark Sophia</h4>
<p>description</p>
</div>
</div>
</div>
</div>
<div class="col-md-3 col-sm-3 team-grids">
<div class="team-img">
<img class="img-responsive" src="https://gyazo.com/2fac18f9f6395e4815234d5512de6cba.png" alt="">
<div class="captn">
<div class="captn-top">
<h4>Mark Sophia</h4>
<p>description</p>
</div>
</div>
</div>
</div>
<div class="col-md-3 col-sm-3 team-grids">
<div class="team-img">
<img class="img-responsive" src="https://gyazo.com/2fac18f9f6395e4815234d5512de6cba.png" alt="">
<div class="captn">
<div class="captn-top">
<h4>Mark Sophia</h4>
<p>description</p>
</div>
</div>
</div>
</div>
<div class="col-md-3 col-sm-3 team-grids">
<div class="team-img">
<img class="img-responsive" src="https://gyazo.com/2fac18f9f6395e4815234d5512de6cba.png" alt="">
<div class="captn">
<div class="captn-top">
<h4>Mark Sophia</h4>
<p>description</p>
</div>
</div>
</div>
</div>
<div class="col-md-3 col-sm-3 team-grids">
<div class="team-img">
<img class="img-responsive" src="https://gyazo.com/2fac18f9f6395e4815234d5512de6cba.png" alt="">
<div class="captn">
<div class="captn-top">
<h4>Mark Sophia</h4>
<p>description</p>
</div>
</div>
</div>
</div>
</div>
</div>
.team-grids .team-img {
overflow: hidden;
position: relative;
display: block;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="team">
<div class="container">
<div class="w3l-heading">
<h3>Our Team</h3>
</div>
<div class="team-row row justify-content-center">
<div class="col-sm-6 col-md-3 team-grids">
<div class="team-img mx-auto">
<img class="img-fluid" src="https://via.placeholder.com/200x200" alt="">
<div class="captn">
<div class="captn-top">
<h4>Edwards Doe</h4>
<p>description</p>
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-md-3 team-grids">
<div class="team-img mx-auto">
<img class="img-fluid" src="https://via.placeholder.com/200x200" alt="">
<div class="captn">
<div class="captn-top">
<h4>Mark Sophia</h4>
<p>description</p>
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-md-3 team-grids">
<div class="team-img mx-auto">
<img class="img-fluid" src="https://via.placeholder.com/200x200" alt="">
<div class="captn">
<div class="captn-top">
<h4>Mark Sophia</h4>
<p>description</p>
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-md-3 team-grids">
<div class="team-img mx-auto">
<img class="img-fluid" src="https://via.placeholder.com/200x200" alt="">
<div class="captn">
<div class="captn-top">
<h4>Mark Sophia</h4>
<p>description</p>
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-md-3 team-grids">
<div class="team-img mx-auto">
<img class="img-fluid" src="https://via.placeholder.com/200x200" alt="">
<div class="captn">
<div class="captn-top">
<h4>Mark Sophia</h4>
<p>description</p>
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-md-3 team-grids">
<div class="team-img mx-auto">
<img class="img-fluid" src="https://via.placeholder.com/200x200" alt="">
<div class="captn">
<div class="captn-top">
<h4>Mark Sophia</h4>
<p>description</p>
</div>
</div>
</div>
</div>
</div>
</div>
Three changes to your code:
1) Add class row and justify-content-center alongwith team-row. Columns are always used in combination with rows in Bootstrap.
2) Add class img-fluid, because img-responsive is a Bootstrap 3 class which is changed to img-fluid in Bootstrap 4.
3) Add class mx-auto to team-img in case you need to center the image in column. For text, you can use text-center.
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>