so here is my html :
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-lg-9 col-md-12">
<div class="container">
<div class="row bg-white">
<div class="col-lg-4 col-md-6 p-2">
<div class="card">
<div class="card-img">
<img src="#image" class="img-fluid">
</div>
<div class="card-img-overlay">
<div class="card-title">
<h5>Title</h5>
</div>
<div class="card-text">
some texts
<div class="dlbut p-2">
<center>
<h5>link</h5>
</center>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 p-2">
<div class="card">
<div class="card-img">
<img src="#image" class="img-fluid">
</div>
<div class="card-img-overlay">
<div class="card-title">
<h5>Title</h5>
</div>
<div class="card-text">
some texts
<div class="dlbut p-2">
<center>
<h5>link</h5>
</center>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
as you can see i have a column which is set to col-lg-9 col-md-12 which i'm using it to have some sort of post loop in it. and each post gonna be the col-lg-4 col-md-6.
the problem is the first column works fine, it's full screen on medium sized devices but the second column doesn't act like it is expected on small devices. i set it col-md-6 so it will be half of the screen wide on tablets for example and be full screen on mobile phones. but it won't.it will be half of the screen wide on small screens as well.
i also tried to add col-sm-12 but same results again.
i looked diffrent topics,... most people didn't use .row which that isn't my case.
also i tried it without the second container and i got same results.
few days ago i bought a license ,also if you like to use it free you can use it some days and can assist you : pingendo.com
is nice bootstrap but ,sometimes to speed up the things you should get some improvements
..anyway the thinks can look good like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css">
<link rel="stylesheet" href="theme.css" type="text/css">
</head>
<body>
<!--
<div class="py-5">
<div class="container">
<div class="row">
<div class="col-md-6">
</div>
<div class="col-md-6">
</div>
</div>
</div>
</div>
<div class="row " draggable="true">
<div class="col-md-12">
<div class="container">
<div class="row">
<div class="col-lg-9 col-md-12">
<div class="container">
<div class="row bg-white">
<div class="col-lg-4 col-md-6 p-2">
<div class="card">
<div class="card-img">
<img src="#image" class="img-fluid">
</div>
<div class="card-img-overlay">
<div class="card-title">
<h5>Title</h5>
</div>
<div class="card-text"> some texts <div class="dlbut p-2">
<center>
<h5>link</h5>
</center>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 p-2">
<div class="card">
<div class="card-img">
<img src="#image" class="img-fluid">
</div>
<div class="card-img-overlay">
<div class="card-title">
<h5>Title</h5>
</div>
<div class="card-text"> some texts <div class="dlbut p-2">
<center>
<h5>link</h5>
</center>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>-->
<!-- i did this with my Pingendo.com licensed -->
<div class="row" draggable="true">
<div class="col-md-6 col-12 col-sm-12 col-lg-6" >
<div class="card" >
<img class="card-img-top" src="https://picsum.photos/600/600?image=1074" alt="Card image">
<div class="card-body text-center">
<h4 class="card-title">John Catel</h4>
<p class="card-text">Some example text.</p>
See Profile
</div>
</div>
</div>
<div class="col-md-6 col-12 col-sm-12 col-lg-6">
<div class="card">
<img class="card-img-top" src="https://picsum.photos/600/600?image=1074" alt="Card image">
<div class="card-body text-center">
<h4 class="card-title">John Catel</h4>
<p class="card-text">Some example text.</p>
See Profile
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
Have you tried bootstrap 4 with
<div class="container">
<div class="row">
<div class="col-sm-9">
Level 1: .col-sm-9
<div class="row">
<div class="col-8 col-sm-6">
Level 2: .col-8 .col-sm-6
</div>
<div class="col-4 col-sm-6">
Level 2: .col-4 .col-sm-6
</div>
</div>
</div>
Related
Can you help me fix this Bootstrap 5 code to fit in all 16:9 full screen device (mobile and desktop/1080p/2160p chrome browser) to 100% width and 100% height? (and no scroll to right and no scroll to down) I read 100+ examples and tutorial about this and not found any working solution. All images are 16:9 ratio.
At 1920p width landscape mobile screen still need to scroll about 5% for right and down. But it's just spacing and no information in right and down. Also same as desktop too.
Ideal: first row about 40% height and second row is about 60% to fit 5 column in 1 row at same size. In the first column image should be fit this 40% total height.
Ideal sketch layout:
------------------------------------------------------
- -
- big-img-big-img -
- big-img-big-img have a nice day -
- big-img-big-img -
- big-img-big-img -
- big-img-big-img -
- big-img-big-img -
------------------------------------------------------
- -
- img-img img-img img-img img-img img-img -
- img-img img-img img-img img-img img-img -
- img-img img-img img-img img-img img-img -
- text text text text text -
- -
------------------------------------------------------
The source code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>a</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</head>
<body>
<div class="d-flex flex-column vw-100 vh-100">
<div class="row justify-content-center row-cols-1">
<div class="card mb-4 justify-content-center" style="max-width: 1920px;">
<div class="row g-0">
<div class="col-md-4"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/72/16x9_by_Pengo.svg/1280px-16x9_by_Pengo.svg.png" class="img-fluid rounded-start" alt="..."> </div>
<div class="col-md-4">
<div class="card-body">
<h5 class="card-title">Have a nice day!</h5>
</div>
</div>
</div>
</div>
</div>
<div class="row d-flex justify-content-center row-cols-5">
<div class="col-lg-2 col-md-2 col-sm-2">
<div class="card mb-3" style="max-width: 1920px;">
<div class="row g-0">
<div class="col-md-12"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/72/16x9_by_Pengo.svg/1280px-16x9_by_Pengo.svg.png" class="img-fluid rounded-start" alt="..."> </div>
<div class="col-md-12">
<div class="card-body">
<h5 class="card-title">Hello 1</h5>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-2 col-md-2 col-sm-2">
<div class="card mb-3" style="max-width: 1920px;">
<div class="row g-0">
<div class="col-md-12"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/72/16x9_by_Pengo.svg/1280px-16x9_by_Pengo.svg.png" class="img-fluid rounded-start" alt="..."> </div>
<div class="col-md-12">
<div class="card-body">
<h5 class="card-title">Hello 2</h5>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-2 col-md-2 col-sm-2">
<div class="card mb-3" style="max-width: 1920px;">
<div class="row g-0">
<div class="col-md-12"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/72/16x9_by_Pengo.svg/1280px-16x9_by_Pengo.svg.png" class="img-fluid rounded-start" alt="..."> </div>
<div class="col-md-12">
<div class="card-body">
<h5 class="card-title">Hello 3</h5>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-2 col-md-2 col-sm-2">
<div class="card mb-3" style="max-width: 1920px;">
<div class="row g-0">
<div class="col-md-12"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/72/16x9_by_Pengo.svg/1280px-16x9_by_Pengo.svg.png" class="img-fluid rounded-start" alt="..."> </div>
<div class="col-md-12">
<div class="card-body">
<h5 class="card-title">Hello 4</h5>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-2 col-md-2 col-sm-2">
<div class="card mb-3" style="max-width: 1920px;">
<div class="row g-0">
<div class="col-md-12"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/72/16x9_by_Pengo.svg/1280px-16x9_by_Pengo.svg.png" class="img-fluid rounded-start" alt="..."> </div>
<div class="col-md-12">
<div class="card-body">
<h5 class="card-title">Hello 5</h5>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Ideal if 5 column fit the 100% width and no scroll to right.
Please help me how possible to fit in 1 screen without any scrolling right and down!
Seems like it's already responsive but need to fix to be better.
Thank you!
A couple of things about bootstrap:
If images in columns in a row have the same aspect ratio, they will have the same height.
The number of grid items in a row are 12.
So, if you want the 40% and 60%, then is either col-5 and col-7 or col-4 and col-8. This caters for the first row.
The second row is even more direct. You can just have one row and several columns with either col-2 or just col.
Here is what I mean:
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-5">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/72/16x9_by_Pengo.svg/1280px-16x9_by_Pengo.svg.png" class="img-fluid" />
</div>
<div class="col-7">
Place content here.
</div>
</div>
<div class="row">
<div class="col-2">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/72/16x9_by_Pengo.svg/1280px-16x9_by_Pengo.svg.png" class="img-fluid" />
<p>Some text here.</p>
</div>
<div class="col-2">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/72/16x9_by_Pengo.svg/1280px-16x9_by_Pengo.svg.png" class="img-fluid" />
<p>Some text here.</p>
</div>
<div class="col-2">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/72/16x9_by_Pengo.svg/1280px-16x9_by_Pengo.svg.png" class="img-fluid" />
<p>Some text here.</p>
</div>
<div class="col-2">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/72/16x9_by_Pengo.svg/1280px-16x9_by_Pengo.svg.png" class="img-fluid" />
<p>Some text here.</p>
</div>
<div class="col-2">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/72/16x9_by_Pengo.svg/1280px-16x9_by_Pengo.svg.png" class="img-fluid" />
<p>Some text here.</p>
</div>
</div>
I want the three images to be side-by-side (on desktop), with the headings and paragraph text to be beneath each respective image.
Does anyone know why it wouldn't be working for me? I presume my code is incorrect somehow
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<div class="portfolio-container">
<section class="portfolio">
<div class="row">
<div class="col-12 my-5">
<h2 class="text-uppercase">Portfolio</h2>
</div>
</div>
<div class="row">
<div class="col-12 col-md-6 col-lg-4">
<div class="media">
<div class="d-none d-sm-block">
<img src="images/whiskey-drop.png" class="rounded-circle mr-3" height=50 width=50>
</div>
<div class="media-body">
<h3>Whiskey Drop</h3>
<h4>HTML, CSS, Bootstrap</h4>
<p>An e-commerce website for a premium whiskey service.</p>
</div>
</div>
</div>
<div class="row">
<div class="col-12 col-md-6 col-lg-4">
<div class="media">
<div class="d-none d-sm-block">
<img src="images/rosie-odenkirk.png" class="rounded-circle mr-3" height=50 width=50>
</div>
<div class="media-body">
<h3>Resume</h3>
<h4>HTML, CSS, Bootstrap</h4>
<p>A responsive and user friendly resume showcasing a sample candidate in the best light possible.</p>
</div>
</div>
</div>
<div class="row">
<div class="col-12 d-md-none d-lg-block col-lg-4">
<div class="media">
<div class="d-none d-sm-block">
<img src="images/flappy-bird.png" class="rounded-circle mr-3" height=50 width=50>
</div>
<div class="media-body">
<h3>Flappy Bird</h3>
<h4>Python and Django</h4>
<p>A fun and interactive game where you are in control of a bird as you navigate through tight spaces.</p>
</div>
</div>
</div>
You are creating a new row for every item
Instead, put the col's in one row:
<div class="row">
<div class="col-4">
</div>
<div class="col-4">
</div>
<div class="col-4">
</div>
</div>
You don't need a new <div class="row"></div> around every <div class="col-lg-4"></div>. You can just wrap it around the entire lot to clear the floats.
<div class="row">
<div class="col-12 my-5">
<h2 class="text-uppercase">Portfolio</h2>
</div>
<div class="col-12 col-md-6 col-lg-4">
<div class="media">
<div class="d-none d-sm-block">
<img src="images/whiskey-drop.png" class="rounded-circle mr-3" height=50 width=50>
</div>
<div class="media-body">
<h3>Whiskey Drop</h3>
<h4>HTML, CSS, Bootstrap</h4>
<p>An e-commerce website for a premium whiskey service.</p>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-4">
<div class="media">
<div class="d-none d-sm-block">
<img src="images/rosie-odenkirk.png" class="rounded-circle mr-3" height=50 width=50>
</div>
<div class="media-body">
<h3>Resume</h3>
<h4>HTML, CSS, Bootstrap</h4>
<p>A responsive and user friendly resume showcasing a sample candidate in the best light possible.</p>
</div>
</div>
</div>
<div class="col-12 d-md-none d-lg-block col-lg-4">
<div class="media">
<div class="d-none d-sm-block">
<img src="images/flappy-bird.png" class="rounded-circle mr-3" height=50 width=50>
</div>
<div class="media-body">
<h3>Flappy Bird</h3>
<h4>Python and Django</h4>
<p>A fun and interactive game where you are in control of a bird as you navigate through tight spaces.</p>
</div>
</div>
</div>
</div>
Also make sure that you wrap your height and width values with "" too.
I am stuck at a point where i dont know where to go....I am trying to create a grid system for my website but not getting the desired output.
Here is the output structure which i want to create using Bootstrap 4:
My Code :
<section class="homepage-banner-section">
<div class="container">
<div class="row">
<div class="col-sm-4 col-md-4">
<img src="img/home-banner-one.png" class="img-fluid" alt="Responsive image">
</div>
<div class="col-sm-8 col-md-8">
<div class="row">
<div class="col-sm-4">
Some text here
</div>
<div class="col-sm-8">
<img src="img/home-banner-two.png" class="img-fluid" alt="Responsive image">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
Some Text Here
</div>
</div>
</div>
</section>
I will appreciate it if someone guide me the right direction.Have lack of knowledge about bootstrap grid system and column classes.
If you change both col-sm-4 to col-12 you will get two full width columns inside your row.
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<section class="homepage-banner-section">
<div class="container">
<div class="row">
<div class="col-sm-4 col-md-4">
<img src="img/home-banner-one.png" class="img-fluid" alt="Responsive image">
</div>
<div class="col-sm-8 col-md-8">
<div class="row">
<div class="col-12">
Some text here
</div>
<div class="col-12">
<img src="img/home-banner-two.png" class="img-fluid" alt="Responsive image">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
Some Text Here
</div>
</div>
</div>
</section>
You can divide your section / container into two columns (left/right) and then the right column into rows (text/image)
Something like below (see demo)
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.0/js/bootstrap.min.js"></script>
<section class="homepage-banner-section">
<div class="container">
<div class="row">
<!-- left column -->
<div class="col-xs-4">
<img src="https://placekitten.com/200/300" class="img-fluid" alt="Responsive image">
</div>
<!-- right column -->
<div class="col-xs-8">
<!-- first row -->
<div class="row">
<div class="col">
some text only on right column
</div>
</div>
<!-- second row -->
<div class="row">
<div class="col">
<img src="https://placekitten.com/300/100" class="img-fluid" alt="Resp. img">
</div>
</div>
</div>
</div>
<!-- footer -->
<div class="row">
<div class="col-xs-12">
footer text that goes the width of the container
</div>
</div>
</div>
</section>
So I have this section which ocupies the whole width of the screen but the text in it is contained in a container and aligns properly.
The section below that one is divided in two columns, and im interested in putting a text in the left column that aligns with the text above it but so far have been unable to do so.
This is the result I'm getting:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<section id="">
<div class="d-flex align-items-center bg-primary" style="min-height: 450px">
<div class="container">
<h1 class="">TITLE TEXT</h1>
</div>
</div>
</section>
<section id="">
<div class="subhead bg-primary">
<div class="row">
<div class="col-sm bg-secondary" style="min-height: 400px">
<div class="container">
<h3>TITLE</h3>
</div>
</div>
<div class="col-sm bg-warning" style="min-height: 400px"></div>
</div>
</div>
</section>
And the HTML I'm currently stuck with(The css was just added in the HTML for testing)
Tank you for any help provided and if you need anything more please just tell me.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<section id="">
<div class="row bg-primary" style="min-height: 450px">
<div class="col-6 d-flex align-items-center">
<div class="container">
<h1 class="text-center">TITLE TEXT</h1>
</div>
</div>
</div>
</section>
<section id="">
<div class="subhead bg-primary">
<div class="row" style="min-height: 400px">
<div class="col-6 d-flex align-items-center bg-secondary">
<div class="container">
<h3 class="text-center">TITLE</h3>
</div>
</div>
<div class="col-6 bg-warning"></div>
</div>
</div>
</section>
.text-to-center{ display:flex}
h1,h3{ margin:auto;}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<section id="">
<div class="row bg-primary" style="min-height: 450px">
<div class="col-12 d-flex align-items-center">
<div class="container text-to-center">
<h1 class="text-center">TITLE TEXT</h1>
</div>
</div>
</div>
</section>
<section id="">
<div class="subhead bg-primary">
<div class="row" style="min-height: 400px">
<div class="col-6 d-flex align-items-center bg-secondary">
<div class="container text-to-center">
<h3 class="text-center">TITLE</h3>
</div>
</div>
<div class="col-6 bg-warning"></div>
</div>
</div>
</section>
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>