CSS height 100% not working in ipad browser - html

I have tried to set equal height columns for my feature collection. Its everything working good in desktop and mobile ipad screens . But when I check real device the height:100%not working. I have tried 'height:100vh` also.
<div class="feature-category default-padding bg-white">
<div class="full container">
<div class="cartHomeTitle text-center mb-4">
<h3>Featured Collection</h3>
</div>
<div class="row mycolspce">
<div class="col-md-6">
<div class="feature-imgitem d-flex align-self-stretch h-100">
<a class="banner_effect" href="#">
<img src="img/new-product1.jpg" class="img-fluid w-100" alt="fc-collection">
</a>
<div class="fc-meta">
<h4>Men</h4>
<p>New Collection</p>
</div>
</div>
</div>
<div class="col-md-6">
<div class="feature-imgitem">
<a class="banner_effect" href="#">
<img src="img/fc-collection2.jpg" class="img-fluid w-100" alt="fc-collection">
</a>
<div class="fc-meta left">
<h4>Shirts</h4>
<p>8 Item</p>
</div>
</div>
<div class="row mt-4">
<div class="col-md-6">
<div class="feature-imgitem">
<a class="banner_effect" href="#">
<img src="img/fc-collection3.jpg" class="img-fluid w-100" alt="fc-collection">
</a>
<div class="fc-meta left">
<h4>Bags</h4>
<p>8 Item</p>
</div>
</div>
</div>
<div class="col-md-6">
<div class="feature-imgitem">
<a class="banner_effect" href="#">
<img src="img/fc-collection4.jpg" class="img-fluid w-100" alt="fc-collection">
</a>
<div class="fc-meta">
<h4>SALE</h4>
<p>FASHION SHOES</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div> <!--//container-->
</div>
my webiste url Featured Collection
My ipad this what I am getting as per below image.

Sometimes height and min-height will not work on ipad and safari browsers. You can use display:flex follow flexbox group to align equal column height as below example.
.row.mycolspce div[class^="col-"] {
display: flex;
flex-wrap: wrap;
}
.feature-imgitem img {
object-fit:cover;
}
.feature-imgitem,.banner_effect {
display:flex;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="container">
<div class="row mycolspce">
<div class="col-md-6">
<div class="feature-imgitem">
<a class="banner_effect" href="#">
<img src="http://orderonline.my/demo.mybizcart/img/new-product1.jpg" class="img-fluid w-100" alt="fc-collection">
</a>
</div>
</div>
<div class="col-md-6">
<div class="feature-imgitem">
<a class="banner_effect" href="#">
<img src="http://orderonline.my/demo.mybizcart/img/fc-collection2.jpg" class="img-fluid w-100" alt="fc-collection">
</a>
</div>
<div class="row mt-4">
<div class="col-md-6">
<div class="feature-imgitem">
<a class="banner_effect" href="#">
<img src="http://orderonline.my/demo.mybizcart/img/fc-collection3.jpg" class="img-fluid w-100" alt="fc-collection">
</a>
</div>
</div>
<div class="col-md-6">
<div class="feature-imgitem">
<a class="banner_effect" href="#">
<img src="http://orderonline.my/demo.mybizcart/img/fc-collection4.jpg" class="img-fluid w-100" alt="fc-collection">
</a>
</div>
</div>
</div>
</div>
</div>
</div>

Related

bootstrap 4 grid - row with slider

I have 6 photos and on md size I would like to have a slider to show them all, on lg they are all displayed side by side and on sm they are displayed 1 per row so there is no problem. Basically I am saying that I don't want to have 2 rows on md but 1 with a slider.
Here is how it looks now
but I would like to make it look like this
the blue line is supposed to be a slider that slides right to reveal more photos.
This is the code I am using now
<div class="row align-items-center text-center">
<div class="col-md-3 col-lg-2 col-sm-12 mt-3">
<a href="#" id="">
<img src="./assets/GAMES/fortnite.jpg" alt="" class="rounded">
</a>
</div>
<div class="col-md-3 col-lg-2 col-sm-12 mt-3">
<a href="#" class="">
<img src="./assets/GAMES/gta5.jpg" alt="" class="rounded">
</a>
</div>
<div class="col-md-3 col-lg-2 col-sm-12 mt-3">
<a href="#" class="">
<img src="./assets/GAMES/leagueoflegends.jpg" alt="" class="rounded">
</a>
</div>
<div class="col-md-3 col-lg-2 col-sm-12 mt-3">
<a href="#" class="">
<img src="./assets/GAMES/mobile legends.jpg" alt="" class="rounded">
</a>
</div>
<div class="col-md-3 col-lg-2 col-sm-12 mt-3">
<a href="#" class="">
<img src="./assets/GAMES/minecraft.jpg" alt="" class="rounded">
</a>
</div>
<div class="col-md-3 col-lg-2 col-sm-12 mt-3">
<a href="#" class="">
<img src="./assets/GAMES/rust.jpg" alt="" class="rounded">
</a>
</div>
</div>
Is it possible to do? What do i have to learn to do it? Any links would be appreciated.
You may use the media query to set the flex-wrap and overflow for the respective screen width. I have set the minimum width as 768px and max-width as 991.98px. You may change it accordingly. Please run the code snippet for the output.
#media (min-width: 768px) and (max-width: 991.98px) {
.row {
flex-wrap: nowrap !important;
overflow: auto !important;
}
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.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.5.0/js/bootstrap.min.js"></script>
<div class="row align-items-center text-center">
<div class="col-md-3 col-lg-2 col-sm-12 mt-3">
<a href="#" id="">
<!-- <img src="./assets/GAMES/fortnite.jpg" alt="" class="rounded"> -->
<img src="https://picsum.photos/200/200" alt="" class="rounded">
</a>
</div>
<div class="col-md-3 col-lg-2 col-sm-12 mt-3">
<a href="#" class="">
<!-- <img src="./assets/GAMES/gta5.jpg" alt="" class="rounded"> -->
<img src="https://picsum.photos/200/200" alt="" class="rounded">
</a>
</div>
<div class="col-md-3 col-lg-2 col-sm-12 mt-3">
<a href="#" class="">
<!-- <img src="./assets/GAMES/leagueoflegends.jpg" alt="" class="rounded"> -->
<img src="https://picsum.photos/200/200" alt="" class="rounded">
</a>
</div>
<div class="col-md-3 col-lg-2 col-sm-12 mt-3">
<a href="#" class="">
<!-- <img src="./assets/GAMES/mobile legends.jpg" alt="" class="rounded"> -->
<img src="https://picsum.photos/200/200" alt="" class="rounded">
</a>
</div>
<div class="col-md-3 col-lg-2 col-sm-12 mt-3">
<a href="#" class="">
<!-- <img src="./assets/GAMES/minecraft.jpg" alt="" class="rounded"> -->
<img src="https://picsum.photos/200/200" alt="" class="rounded">
</a>
</div>
<div class="col-md-3 col-lg-2 col-sm-12 mt-3">
<a href="#" class="">
<!-- <img src="./assets/GAMES/rust.jpg" alt="" class="rounded"> -->
<img src="https://picsum.photos/200/200" alt="" class="rounded">
</a>
</div>
</div>
You can dynamically create a corousel item (slide) for each of 4 card by using js and use corousel of bootstrap 4 to show sliding row.
Corousel
Instead of putting up a slider to move around the images, we can actually create a carousel effect with bootstrap. It will provide a breath-taking experience to the users. Here's the code for it.
PS: Edit the class and ID names as per your requirements.
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="..." alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="..." alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="..." alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>

Bootstrap 4 grids

How to make a layout on bootstrap4, and then I can not. Thank you in advance!
<div class="col-8">
<a href="#">
<div class="card">
<img class="card-img" src="img.jpg">
</div>
</a>
</div>
<div class="col-4">
<a href="#">
<div class="card">
<img class="card-img" src="img.jpg">
</div>
</a>
</div>
<div class="col-4">
<a href="#">
<div class="card">
<img class="card-img" src="img.jpg">
</div>
</a>
</div>
<div class="col-4">
<a href="#">
<div class="card">
<img class="card-img" src="img.jpg">
</div>
</a>
</div>
<div class="col-4">
<a href="#">
<div class="card">
<img class="card-img" src="img.jpg">
</div>
</a>
</div>
<div class="col-4">
<a href="#">
<div class="card">
<img class="card-img" src="img.jpg">
</div>
</a>
</div>
<div class="col-4">
<a href="#">
<div class="card">
<img class="card-img" src="img.jpg">
</div>
</a>
</div>
<div class="col-4">
<a href="#">
<div class="card">
<img class="card-img" src="img.jpg">
</div>
</a>
</div>
<div class="col-4">
<a href="#">
<div class="card">
<img class="card-img" src="img.jpg">
</div>
</a>
</div>
<div class="col-4">
<a href="#">
<div class="card">
<img class="card-img" src="img.jpg">
</div>
</a>
</div>
Now it goes like this
And need to look like this
Using float: left; styling on the columns will give you this effect.
Below I changed the <img> tag to a <div> with a border to give the same visuals since I don't have img.jpg. If you swap those back in it should still work.
I added the styling to the col classes by just adding:
.col-4, .col-8{
float:left;
}
Though, I would recommend adding a class to the outer div's with this styling instead of pigy-backing on bootstrap's classes.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css"
integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
</head>
<body>
<style>
.small-card {
height: 60px;
width: 100%;
border: solid 2px #333;
}
.large-card{
height: 120px;
width: 100%;
border: solid 2px #333;
}
.col-4, .col-8{
float:left;
}
</style>
<div class="col-8">
<a href="#">
<div class="card">
<div class="large-card"></div>
</div>
</a>
</div>
<div class="col-4">
<a href="#">
<div class="card">
<div class="small-card"></div>
</div>
</a>
</div>
<div class="col-4">
<a href="#">
<div class="card">
<div class="small-card"></div>
</div>
</a>
</div>
<div class="col-4">
<a href="#">
<div class="card">
<div class="small-card"></div>
</div>
</a>
</div>
<div class="col-4">
<a href="#">
<div class="card">
<div class="small-card"></div>
</div>
</a>
</div>
<div class="col-4">
<a href="#">
<div class="card">
<div class="small-card"></div>
</div>
</a>
</div>
<div class="col-4">
<a href="#">
<div class="card">
<div class="small-card"></div>
</div>
</a>
</div>
<div class="col-4">
<a href="#">
<div class="card">
<div class="small-card"></div>
</div>
</a>
</div>
<div class="col-4">
<a href="#">
<div class="card">
<div class="small-card"></div>
</div>
</a>
</div>
<div class="col-4">
<a href="#">
<div class="card">
<div class="small-card"></div>
</div>
</a>
</div>
</body>
</html>

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>

How to fill the gap of a div without using media query?

I'm using bootstrap cards to build this layout on desktop:
So far so good, at this width everything is ok as well:
But from this width to desktop width the container is not filled:
The HTML to build the card with the images is:
<div class="card h-60">
<div>
<div class="row box">
<div class="box-content formal">
<div class="col-md-12">
<img class="imageban" src="img/crm.png" />
<span><b>CRM</b></span>
</div>
</div>
<div class="box-right">
<a href="#">
<img class="img-responsive" src="img/img1.jpg"/>
</a>
</div>
</div>
</div>
<div>
<div class="row box">
<div class="box-content report">
<div class="col-md-12">
<img class="imageban" src="img/report.png" />
<span><b>Report</b></span>
</div>
</div>
<div class="box-right">
<a href="#">
<img class="imageban" src="img/img4.jpg"/>
</a>
</div>
</div>
</div>
<div>
<div class="row box">
<div class="box-content formal">
<div class="col-md-12">
<img class="img-responsive" src="img/formal_notices.png" />
<span><b>Formal Notices</b></span>
</div>
</div>
<div class="box-content text">
<a href="#">
Open the Formal <br>Notice Document <br>Library
</a>
</div>
</div>
</div>
</div>
And the CSS is only this line:
.row.box{
max-width: 345px;
}
I'm stuck in this, any help would be nice. Thanks.
You can remove the class .box and use the Bootstrap classes instead col-md-4 col-xs-12.

Bootstrap 4 container-fluid height does not expand to viewport when resized smaller

I have a nav-tab section to house some images and there will be different images for different sections.
When you resize the fiddle to a smaller size, you can see the huge white space that the images overlap. I'm unsure as to how I can fix this... I have to surely remove height-100, but I want to enforce the height as it'd look nice.
HTML CODE:
<div class="container-fluid bg-dark h-100">
<div class="row">
<div class="col-md-8">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link text-danger" data-toggle="tab" href="#tab1" role="tab">tab1</a>
</li>
<li class="nav-item">
<a class="nav-link text-danger" data-toggle="tab" href="#tab2" role="tab">tab2</a>
</li>
<li class="nav-item">
<a class="nav-link text-danger" data-toggle="tab" href="#tab3" role="tab">tab3</a>
</li>
<li class="nav-item">
<a class="nav-link text-danger" data-toggle="tab" href="#tab4" role="tab">tab4</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content text-white">
<div class="tab-pane fade in" id="tab1" role="tabpanel">
<!--Row 1 start-->
<div class="row py-2 h-100">
<div class="col-md-3">
<img class="img-fluid rounded" src="https://i.imgur.com/w6JPLSV.jpg" alt="" title="">
</div>
<div class="col-md-3">
<img class="img-fluid rounded" src="https://i.imgur.com/w6JPLSV.jpg" alt="" title="">
</div>
<div class="col-md-3">
<img class="img-fluid rounded" src="https://i.imgur.com/w6JPLSV.jpg" alt="" title="">
</div>
<div class="col-md-3">
<img class="img-fluid rounded" src="https://i.imgur.com/w6JPLSV.jpg" alt="" title="">
</div>
</div>
<!--Row 1 end-->
<!--Row 2 start-->
<div class="row py-2 h-100">
<div class="col-md-3">
<img class="img-fluid rounded" src="https://i.imgur.com/w6JPLSV.jpg" alt="" title="">
</div>
<div class="col-md-3">
<img class="img-fluid rounded" src="https://i.imgur.com/w6JPLSV.jpg" alt="" title="">
</div>
<div class="col-md-3">
<img class="img-fluid rounded" src="https://i.imgur.com/w6JPLSV.jpg" alt="" title="">
</div>
<div class="col-md-3">
<img class="img-fluid rounded" src="https://i.imgur.com/w6JPLSV.jpg" alt="" title="">
</div>
</div>
<!--Row 2 end-->
<!--Row 3 start-->
<div class="row py-2 h-100">
<div class="col-md-3">
<img class="img-fluid rounded" src="https://i.imgur.com/w6JPLSV.jpg" alt="" title="">
</div>
<div class="col-md-3">
<img class="img-fluid rounded" src="https://i.imgur.com/w6JPLSV.jpg" alt="" title="">
</div>
<div class="col-md-3">
<img class="img-fluid rounded" src="https://i.imgur.com/w6JPLSV.jpg" alt="" title="">
</div>
<div class="col-md-3">
<img class="img-fluid rounded" src="https://i.imgur.com/w6JPLSV.jpg" alt="" title="">
</div>
</div>
<!--Row 3 end-->
</div>
<div class="tab-pane fade in" id="tab2" role="tabpanel">
x
</div>
<div class="tab-pane fade in " id="tab3" role="tabpanel">
x
</div>
<div class="tab-pane fade in" id="tab4" role="tabpanel">
x
</div>
</div>
</div>
<div class="col-md-4 control">
<div class="container-fluid">
some content here
</div>
</div>
</div>
</div>
CSS:
html, body {
box-sizing: border-box;
height: 100%;
margin: 0;
}
.control{
background-color:#24262D;
}
Here is the JSFiddle (With B4 and CSS):
https://jsfiddle.net/yeg1dsut/9/
Thank you!
Instead of using h-100 (height:100%), you should use min height...
.container-fluid {
min-height: 100%;
}