Bootstrap Thumbnails:

Same Height Cards for Bootstrap 4 Multiple Items Carousel

Bootstrap Carousel Code is one of the best codes that you can use for your website. In this post, you can see the Same Height Cards for Bootstrap 4 Multiple Items Carousel with a different theme. If you have an online shop and want to add your product to the website, this post can help you easily. Plus, the customers can also add their comments about the product in this Thumbnail in Carousel. As a result, people can use others’ experiences and use them functionally. It is worth noting that many people cannot trust the website without a comment section.

This preview shows a beautiful design for the HTML Thumbnail with Carousel. This code includes three parts that you can change easily. Moreover, you can see some texts under the pictures that you can add your explanation about the product. There is a button at the bottom of the page with a blue background and white writing. There is an option at the top of the Carousel Gallery Code. You can see this option on the left side with blue color. By clicking on this option, you can move to another page and see a different picture.

Bootstrap Carousel Code

Thumbnail in Carousel

HTML Thumbnail with Carousel

Carousel Gallery Code

<!-- This script got from frontendfreecode.com -->
<div class="container">
    <!--Carousel 1-->
    <div id="multi-item-example" class="carousel slide carousel-equal-heights my-4" data-ride="carousel">
        <div class="controls-top">
            <a class="btn-floating" href="#multi-item-example" data-slide="prev"><i class="fa fa-chevron-left"></i></a>
            <a class="btn-floating" href="#multi-item-example" data-slide="next"><i class="fa fa-chevron-right"></i></a>
        </div>
        <div class="carousel-inner" role="listbox">
            <!--Slide 1.1-->
            <div class="carousel-item active">
                <div class="row">
                    <div class="col-md-4 d-flex">
                        <div class="card">
                            <img class="card-img-top" src="https://via.placeholder.com/800x600/69c/9fc/?text=Image%201.1" alt="">
                            <div class="card-body">
                                <p class="card-text">Text line. <br>Text line. <br>Text line.</p>
                                <a class="btn btn-primary">Button</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 d-none d-md-flex">
                        <div class="card">
                            <img class="card-img-top" src="https://via.placeholder.com/800x600/69c/9fc/?text=Image%201.2" alt="">
                            <div class="card-body">
                                <p class="card-text">Text line. <br>Text line.</p>
                                <a class="btn btn-primary">Button</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 d-none d-md-flex">
                        <div class="card">
                            <img class="card-img-top" src="https://via.placeholder.com/800x600/69c/9fc/?text=Image%201.3" alt="">
                            <div class="card-body">
                                <p class="card-text">Text line.</p>
                                <a class="btn btn-primary">Button</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--Slide 1.2-->
            <div class="carousel-item">
                <div class="row">
                    <div class="col-md-4 d-flex">
                        <div class="card">
                            <img class="card-img-top" src="https://via.placeholder.com/800x600/c69/f9c/?text=Image%202.1" alt="">
                            <div class="card-body">
                                <p class="card-text">Text line. <br>Text line.</p>
                                <a class="btn btn-primary">Button</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 d-none d-md-flex">
                        <div class="card">
                            <img class="card-img-top" src="https://via.placeholder.com/800x600/c69/f9c/?text=Image%202.2" alt="">
                            <div class="card-body">
                                <p class="card-text">Text line.</p>
                                <a class="btn btn-primary">Button</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 d-none d-md-flex">
                        <div class="card">
                            <img class="card-img-top" src="https://via.placeholder.com/800x600/c69/f9c/?text=Image%202.3" alt="">
                            <div class="card-body">
                                <p class="card-text">Text line. <br>Text line.</p>
                                <a class="btn btn-primary">Button</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--Slide 1.3-->
            <div class="carousel-item">
                <div class="row">
                    <div class="col-md-4 d-flex">
                        <div class="card">
                            <img class="card-img-top" src="https://via.placeholder.com/800x600/9c6/cf9/?text=Image%203.1" alt="">
                            <div class="card-body">
                                <p class="card-text">Text line.</p>
                                <a class="btn btn-primary">Button</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 d-none d-md-flex">
                        <div class="card">
                            <img class="card-img-top" src="https://via.placeholder.com/800x600/9c6/cf9/?text=Image%203.2" alt="">
                            <div class="card-body">
                                <p class="card-text">Text line. <br>Text line.</p>
                                <a class="btn btn-primary">Button</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 d-none d-md-flex">
                        <div class="card">
                            <img class="card-img-top" src="https://via.placeholder.com/800x600/9c6/cf9/?text=Image%203.3" alt="">
                            <div class="card-body">
                                <p class="card-text">Text line.</p>
                                <a class="btn btn-primary">Button</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--Carousel 2-->
    <div id="multi-item-example-2" class="carousel slide carousel-equal-heights my-4" data-ride="carousel">
        <div class="controls-top">
            <a class="btn-floating" href="#multi-item-example-2" data-slide="prev"><i class="fa fa-chevron-left"></i></a>
            <a class="btn-floating" href="#multi-item-example-2" data-slide="next"><i class="fa fa-chevron-right"></i></a>
        </div>
        <div class="carousel-inner" role="listbox">
            <!--Slide 2.1-->
            <div class="carousel-item active">
                <div class="row">
                    <div class="col-md-4 d-flex">
                        <div class="card w-100">
                            <div class="card-body">
                                <h4 class="card-title">Title 1.1</h4>
                                <p class="card-text">Text line. <br>Text line. <br>Text line.</p>
                                <a class="btn btn-primary">Button</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 d-none d-md-flex">
                        <div class="card w-100">
                            <div class="card-body">
                                <h4 class="card-title">Title 1.2</h4>
                                <p class="card-text">Text line. <br>Text line.</p>
                                <a class="btn btn-primary">Button</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 d-none d-md-flex">
                        <div class="card w-100">
                            <div class="card-body">
                                <h4 class="card-title">Title 1.3</h4>
                                <p class="card-text">Text line.</p>
                                <a class="btn btn-primary">Button</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--Slide 2.2-->
            <div class="carousel-item">
                <div class="row">
                    <div class="col-md-4 d-flex">
                        <div class="card w-100">
                            <div class="card-body">
                                <h4 class="card-title">Title 2.1</h4>
                                <p class="card-text">Text line. <br>Text line.</p>
                                <a class="btn btn-primary">Button</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 d-none d-md-flex">
                        <div class="card w-100">
                            <div class="card-body">
                                <h4 class="card-title">Title 2.2</h4>
                                <p class="card-text">Text line.</p>
                                <a class="btn btn-primary">Button</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 d-none d-md-flex">
                        <div class="card w-100">
                            <div class="card-body">
                                <h4 class="card-title">Title 2.3</h4>
                                <p class="card-text">Text line. <br>Text line.</p>
                                <a class="btn btn-primary">Button</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--Slide 2.3-->
            <div class="carousel-item">
                <div class="row">
                    <div class="col-md-4 d-flex">
                        <div class="card w-100">
                            <div class="card-body">
                                <h4 class="card-title">Title 3.1</h4>
                                <p class="card-text">Text line.</p>
                                <a class="btn btn-primary">Button</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 d-none d-md-flex">
                        <div class="card w-100">
                            <div class="card-body">
                                <h4 class="card-title">Title 3.2</h4>
                                <p class="card-text">Text line. <br>Text line.</p>
                                <a class="btn btn-primary">Button</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 d-none d-md-flex">
                        <div class="card w-100">
                            <div class="card-body">
                                <h4 class="card-title">Title 3.3</h4>
                                <p class="card-text">Text line.</p>
                                <a class="btn btn-primary">Button</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://frontendfreecode.com">Free Frontend</a>

.carousel-equal-heights .carousel-item > .row {
  height: 100%;
}
.carousel-equal-heights .carousel-item .card, .carousel-equal-heights .carousel-item .card-body {
  display: flex;
  flex-direction: column;
}
.carousel-equal-heights .carousel-item .card-body, .carousel-equal-heights .carousel-item .card-text {
  flex-grow: 1;
}

$(document).ready(function () {
    // collect the inner blocks of all desired carousels
    let $carouselInners = $(".carousel-equal-heights").children(".carousel-inner");
    updateItemsHeight();
    $(window).resize(updateItemsHeight);
    function updateItemsHeight() {
        $carouselInners.each(function () {
            // collect the slides contained inside this inner block
            let $carouselItems = $(this).children(".carousel-item");
            // remove old height value
            $carouselItems.height("auto");
            // calculate new one
            let maxHeight = 0;
            $carouselItems.each(function () {
                maxHeight = Math.max(maxHeight, $(this).outerHeight());
            });
            // set new value
            $carouselItems.each(function () {
                $(this).outerHeight(maxHeight);
            });
            // debug it
            console.log("new items height", maxHeight);
        });
    }
});

<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css'>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js'></script>
<script src='https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js'></script>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from frontendfreecode.com -->

<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css'>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js'></script>
<script src='https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js'></script>
<style>
.carousel-equal-heights .carousel-item > .row {
  height: 100%;
}
.carousel-equal-heights .carousel-item .card, .carousel-equal-heights .carousel-item .card-body {
  display: flex;
  flex-direction: column;
}
.carousel-equal-heights .carousel-item .card-body, .carousel-equal-heights .carousel-item .card-text {
  flex-grow: 1;
}
</style>

</head>
<body>
<div class="container">
    <!--Carousel 1-->
    <div id="multi-item-example" class="carousel slide carousel-equal-heights my-4" data-ride="carousel">
        <div class="controls-top">
            <a class="btn-floating" href="#multi-item-example" data-slide="prev"><i class="fa fa-chevron-left"></i></a>
            <a class="btn-floating" href="#multi-item-example" data-slide="next"><i class="fa fa-chevron-right"></i></a>
        </div>
        <div class="carousel-inner" role="listbox">
            <!--Slide 1.1-->
            <div class="carousel-item active">
                <div class="row">
                    <div class="col-md-4 d-flex">
                        <div class="card">
                            <img class="card-img-top" src="https://via.placeholder.com/800x600/69c/9fc/?text=Image%201.1" alt="">
                            <div class="card-body">
                                <p class="card-text">Text line. <br>Text line. <br>Text line.</p>
                                <a class="btn btn-primary">Button</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 d-none d-md-flex">
                        <div class="card">
                            <img class="card-img-top" src="https://via.placeholder.com/800x600/69c/9fc/?text=Image%201.2" alt="">
                            <div class="card-body">
                                <p class="card-text">Text line. <br>Text line.</p>
                                <a class="btn btn-primary">Button</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 d-none d-md-flex">
                        <div class="card">
                            <img class="card-img-top" src="https://via.placeholder.com/800x600/69c/9fc/?text=Image%201.3" alt="">
                            <div class="card-body">
                                <p class="card-text">Text line.</p>
                                <a class="btn btn-primary">Button</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--Slide 1.2-->
            <div class="carousel-item">
                <div class="row">
                    <div class="col-md-4 d-flex">
                        <div class="card">
                            <img class="card-img-top" src="https://via.placeholder.com/800x600/c69/f9c/?text=Image%202.1" alt="">
                            <div class="card-body">
                                <p class="card-text">Text line. <br>Text line.</p>
                                <a class="btn btn-primary">Button</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 d-none d-md-flex">
                        <div class="card">
                            <img class="card-img-top" src="https://via.placeholder.com/800x600/c69/f9c/?text=Image%202.2" alt="">
                            <div class="card-body">
                                <p class="card-text">Text line.</p>
                                <a class="btn btn-primary">Button</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 d-none d-md-flex">
                        <div class="card">
                            <img class="card-img-top" src="https://via.placeholder.com/800x600/c69/f9c/?text=Image%202.3" alt="">
                            <div class="card-body">
                                <p class="card-text">Text line. <br>Text line.</p>
                                <a class="btn btn-primary">Button</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--Slide 1.3-->
            <div class="carousel-item">
                <div class="row">
                    <div class="col-md-4 d-flex">
                        <div class="card">
                            <img class="card-img-top" src="https://via.placeholder.com/800x600/9c6/cf9/?text=Image%203.1" alt="">
                            <div class="card-body">
                                <p class="card-text">Text line.</p>
                                <a class="btn btn-primary">Button</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 d-none d-md-flex">
                        <div class="card">
                            <img class="card-img-top" src="https://via.placeholder.com/800x600/9c6/cf9/?text=Image%203.2" alt="">
                            <div class="card-body">
                                <p class="card-text">Text line. <br>Text line.</p>
                                <a class="btn btn-primary">Button</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 d-none d-md-flex">
                        <div class="card">
                            <img class="card-img-top" src="https://via.placeholder.com/800x600/9c6/cf9/?text=Image%203.3" alt="">
                            <div class="card-body">
                                <p class="card-text">Text line.</p>
                                <a class="btn btn-primary">Button</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--Carousel 2-->
    <div id="multi-item-example-2" class="carousel slide carousel-equal-heights my-4" data-ride="carousel">
        <div class="controls-top">
            <a class="btn-floating" href="#multi-item-example-2" data-slide="prev"><i class="fa fa-chevron-left"></i></a>
            <a class="btn-floating" href="#multi-item-example-2" data-slide="next"><i class="fa fa-chevron-right"></i></a>
        </div>
        <div class="carousel-inner" role="listbox">
            <!--Slide 2.1-->
            <div class="carousel-item active">
                <div class="row">
                    <div class="col-md-4 d-flex">
                        <div class="card w-100">
                            <div class="card-body">
                                <h4 class="card-title">Title 1.1</h4>
                                <p class="card-text">Text line. <br>Text line. <br>Text line.</p>
                                <a class="btn btn-primary">Button</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 d-none d-md-flex">
                        <div class="card w-100">
                            <div class="card-body">
                                <h4 class="card-title">Title 1.2</h4>
                                <p class="card-text">Text line. <br>Text line.</p>
                                <a class="btn btn-primary">Button</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 d-none d-md-flex">
                        <div class="card w-100">
                            <div class="card-body">
                                <h4 class="card-title">Title 1.3</h4>
                                <p class="card-text">Text line.</p>
                                <a class="btn btn-primary">Button</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--Slide 2.2-->
            <div class="carousel-item">
                <div class="row">
                    <div class="col-md-4 d-flex">
                        <div class="card w-100">
                            <div class="card-body">
                                <h4 class="card-title">Title 2.1</h4>
                                <p class="card-text">Text line. <br>Text line.</p>
                                <a class="btn btn-primary">Button</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 d-none d-md-flex">
                        <div class="card w-100">
                            <div class="card-body">
                                <h4 class="card-title">Title 2.2</h4>
                                <p class="card-text">Text line.</p>
                                <a class="btn btn-primary">Button</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 d-none d-md-flex">
                        <div class="card w-100">
                            <div class="card-body">
                                <h4 class="card-title">Title 2.3</h4>
                                <p class="card-text">Text line. <br>Text line.</p>
                                <a class="btn btn-primary">Button</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--Slide 2.3-->
            <div class="carousel-item">
                <div class="row">
                    <div class="col-md-4 d-flex">
                        <div class="card w-100">
                            <div class="card-body">
                                <h4 class="card-title">Title 3.1</h4>
                                <p class="card-text">Text line.</p>
                                <a class="btn btn-primary">Button</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 d-none d-md-flex">
                        <div class="card w-100">
                            <div class="card-body">
                                <h4 class="card-title">Title 3.2</h4>
                                <p class="card-text">Text line. <br>Text line.</p>
                                <a class="btn btn-primary">Button</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 d-none d-md-flex">
                        <div class="card w-100">
                            <div class="card-body">
                                <h4 class="card-title">Title 3.3</h4>
                                <p class="card-text">Text line.</p>
                                <a class="btn btn-primary">Button</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Free Frontend</a></div>
<script>
$(document).ready(function () {
    // collect the inner blocks of all desired carousels
    let $carouselInners = $(".carousel-equal-heights").children(".carousel-inner");
    updateItemsHeight();
    $(window).resize(updateItemsHeight);
    function updateItemsHeight() {
        $carouselInners.each(function () {
            // collect the slides contained inside this inner block
            let $carouselItems = $(this).children(".carousel-item");
            // remove old height value
            $carouselItems.height("auto");
            // calculate new one
            let maxHeight = 0;
            $carouselItems.each(function () {
                maxHeight = Math.max(maxHeight, $(this).outerHeight());
            });
            // set new value
            $carouselItems.each(function () {
                $(this).outerHeight(maxHeight);
            });
            // debug it
            console.log("new items height", maxHeight);
        });
    }
});
</script>

</body>
</html>

Preview

Developers Codes
Graphic Photo World
Crypto Best World
Code Free Tutorial
CSS Free Codes
PHP Free Codes
Javascript Codes

TOP CODES

Toggle Switch Button for Changing Language with Bootstrap

Draggable Cards with Bootstrap Grids

Bootstrap Table with Add New Row Button

WHAT IS NEW IN KERIXA?

Glassy Chat Box Code with Reaction Emojis

Dark Neo Brutal Resume Template

Nvidia RTX 3070 Graphic Card Hashrate and Mining Profitability

Nvidia RTX 3080 Graphic Card Hashrate and Mining Profitability

Flat Photo Frame Template

Cute Photo Frame Template

16 React JS Accordions

17 React JS Buttons

RECENT CODES

Bootstrap Timeline with Colorful Lines and Icons

Simple Dark Vertical Timeline with Bootstrap

Colorful Icons for Bootstrap Timeline Joints

Bootstrap Vertical Timeline with Image Cards and Descriptions

Vertical Bootstrap Timeline in Half Page

Drop Down Menu by React JS

Animating React Popup with Float in and Zoom Effects

Popup vs. Alert Code using React JS

React Glassy Gradient Popup Modal

Animating Toggle Popup Menu with React JS