Develop Reference

How to fix slideshow?

I'm trying to have a slideshow (carousel) of cards on my index.html.
The code I currently have presents all five cards vertically stacked, with clickable arrows that don't do anything. Anyone know how to make it so one card is shown at a time and can be clicked on to the next?
<div id="carouselExample" class="carousel slide">
<div class="carousel-inner">
<div class="card active" style="width: 12rem;">
<img src="https://static.americasbestracing.net/s3fs-public/styles/large/public/reylu-gutierrez.jpg?KHONSa1SS2GQbZtqmIed8QZzxaE.XX.4&itok=AKl_nQxN" class="card-img-top" alt="...">
<div class="card-body">
<p class="card-text">Reylu Gutierrez.</p>
</div>
</div>
<div class="card" style="width: 12rem;">
<img src="https://www.nyra.com/uploads/profile-images/eric-cancel.jpg" class="card-img-top" alt="...">
<div class="card-body">
<p class="card-text">Eric Cancel.</p>
</div>
</div>
<div class="card" style="width: 12rem;">
<img src="https://www.nyra.com/uploads/profile-images/manuel-franco.jpg" class="card-img-top" alt="...">
<div class="card-body">
<p class="card-text">Manuel Franco.</p>
</div>
</div>
<div class="card" style="width: 12rem;">
<img src="https://www.nyra.com/uploads/profile-images/joel-rosario.jpg" class="card-img-top" alt="...">
<div class="card-body">
<p class="card-text">Joel Rosario.</p>
</div>
</div>
<div class="card" style="width: 12rem;">
<img src="https://live.staticflickr.com/65535/43429236045_546119af43_b.jpg" class="card-img-top" alt="...">
<div class="card-body">
<p class="card-text">Andre Worrie.</p>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
I have the CSS and JS sources. My js file has these lines
const myCarouselElement = document.querySelector('#myCarousel')
const carousel = new bootstrap.Carousel(myCarouselElement, {
interval: 2000,
touch: false
})
Console log says bootstrap is not defined in the const carousel line?

okay in bootstrap you must follow template provide ,see this https://getbootstrap.com/docs/5.2/components/carousel/
you forget take class= "carousel-item"
so like this
<div class="card carousel-item " style="width: 12rem;">
<img src="https://www.nyra.com/uploads/profile-images/joel-rosario.jpg" class="card-img-top" alt="...">
<div class="card-body">
<p class="card-text">Joel Rosario.</p>
</div>
</div>

Multi item carousel with same height cards [duplicate]

This question already has answers here:
How can I make Bootstrap columns all the same height?
(34 answers)
Closed last year.
Expected behavior: same height for all cards
(all cards should adjust their height to the highest card)
Actual behavior: height depends on text length
Snippet: https://mdbootstrap.com/snippets/jquery/temp/3565823
IMAGE THAT NOT EACH SLIDE IS SAME HEIGHT

Adding style="min-height:300px" to each of the card-text
Please use this code:
<div class="container my-4">
<p class="font-weight-bold">Bootstrap carousel multiple items is an improved version of the standard bootstrap
carousel which allows you to put inside more than one element.</p>
<p><strong>Detailed documentation and more examples of Bootstrap grid you can find in our <a href="https://mdbootstrap.com/docs/standard/components/carousel/"
target="_blank">Bootstrap Carousel Docs</a>.</p>
<p>See also <a target="_blank" href="https://mdbootstrap.com/docs/standard/plugins/multi-item-carousel/"><strong>Advanced mutli item carousel plugin</strong></a> or <a target="_blank" href="https://mdbootstrap.com/snippets/standard/mdbootstrap/2904002"><strong>multi-item carousel example for the newest Bootstrap 5</strong></a>.</p>
<hr class="mt-5">
<p>Built with <a target="_blank" href="https://mdbootstrap.com/docs/standard/">Material Design for Bootstrap</a> - free and powerful Bootstrap UI KIT</p>
<a class="btn btn-primary me-2" href="https://mdbootstrap.com/docs/standard/getting-started/installation/" target="_blank" role="button">Download MDB UI KIT <i class="fa fa-download"></i></a>
<a class="btn btn-danger me-2" target="_blank" href="https://mdbootstrap.com/docs/standard/" role="button">Learn more</a>
<a class="btn btn-success me-2" target="_blank" href="https://mdbootstrap.com/docs/standard/getting-started/" role="button">Tutorials</a>
<a class="btn btn-dark me-2" target="_blank" href="https://github.com/mdbootstrap/mdb-ui-kit" role="button">GitHub <i class="fa fa-github ms-2"></i></a>
<hr class="mb-5"/>
<!--Carousel Wrapper-->
<div id="multi-item-example" class="carousel slide carousel-multi-item" data-ride="carousel">
<!--Controls-->
<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>
<!--/.Controls-->
<!--Indicators-->
<ol class="carousel-indicators">
<li data-target="#multi-item-example" data-slide-to="0" class="active"></li>
<li data-target="#multi-item-example" data-slide-to="1"></li>
<li data-target="#multi-item-example" data-slide-to="2"></li>
</ol>
<!--/.Indicators-->
<!--Slides-->
<div class="carousel-inner" role="listbox">
<!--First slide-->
<div class="carousel-item active">
<div class="row">
<div class="col-md-4">
<div class="card mb-2">
<img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(34).jpg"
alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text" style="min-height:300px">Some quick example text to build on the card title and make up the bulk of the
card's content.Some quick example text to build on the card title and make up the bulk of the
card's content.Some quick example text to build on the card title and make up the bulk of the
card's content.</p>
<a class="btn btn-primary">Button</a>
</div>
</div>
</div>
<div class="col-md-4 clearfix d-none d-md-block">
<div class="card mb-2">
<img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(18).jpg"
alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text" style="min-height:300px">Some quick example text to build on the card title and make up the bulk of the
card's content.</p>
<a class="btn btn-primary">Button</a>
</div>
</div>
</div>
<div class="col-md-4 clearfix d-none d-md-block">
<div class="card mb-2">
<img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(35).jpg"
alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text" style="min-height:300px">Some quick example text to build on the card title and make up the bulk of the
card's content.</p>
<a class="btn btn-primary">Button</a>
</div>
</div>
</div>
</div>
</div>
<!--/.First slide-->
<!--Second slide-->
<div class="carousel-item">
<div class="row">
<div class="col-md-4">
<div class="card mb-2">
<img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Horizontal/City/4-col/img%20(60).jpg"
alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text" style="min-height:300px">Some quick example text to build on the card title and make up the bulk of the
card's content.</p>
<a class="btn btn-primary">Button</a>
</div>
</div>
</div>
<div class="col-md-4 clearfix d-none d-md-block">
<div class="card mb-2">
<img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Horizontal/City/4-col/img%20(47).jpg"
alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text" style="min-height:300px">Some quick example text to build on the card title and make up the bulk of the
card's content.Some quick example text to build on the card title and make up the bulk of the
card's content.</p>
<a class="btn btn-primary">Button</a>
</div>
</div>
</div>
<div class="col-md-4 clearfix d-none d-md-block">
<div class="card mb-2">
<img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Horizontal/City/4-col/img%20(48).jpg"
alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text" style="min-height:300px">Some quick example text to build on the card title and make up the bulk of the
card's content.</p>
<a class="btn btn-primary">Button</a>
</div>
</div>
</div>
</div>
</div>
<!--/.Second slide-->
<!--Third slide-->
<div class="carousel-item">
<div class="row">
<div class="col-md-4">
<div class="card mb-2">
<img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Horizontal/Food/4-col/img%20(53).jpg"
alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text" style="min-height:300px">Some quick example text to build on the card title and make up the bulk of the
card's content.Some quick example text to build on the card title and make up the bulk of the
card's content.</p>
<a class="btn btn-primary">Button</a>
</div>
</div>
</div>
<div class="col-md-4 clearfix d-none d-md-block">
<div class="card mb-2">
<img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Horizontal/Food/4-col/img%20(45).jpg"
alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text" style="min-height:300px">Some quick example text to build on the card title and make up the bulk of the
card's content.Some quick example text to build on the card title and make up the bulk of the
card's content.Some quick example text to build on the card title and make up the bulk of the
card's content.</p>
<a class="btn btn-primary">Button</a>
</div>
</div>
</div>
<div class="col-md-4 clearfix d-none d-md-block">
<div class="card mb-2">
<img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Horizontal/Food/4-col/img%20(51).jpg"
alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text" style="min-height:300px">Some quick example text to build on the card title and make up the bulk of the
card's content.</p>
<a class="btn btn-primary">Button</a>
</div>
</div>
</div>
</div>
</div>
<!--/.Third slide-->
</div>
<!--/.Slides-->
</div>
<!--/.Carousel Wrapper-->
</div>

Note: Here in the snippets I'm using the sm breakpoint to make the result visible without the full screen mode. The code in the MDB and CodePen sandboxes uses the original md breakpoint.
Step 1. Adjust the height of cards on one slide
Turn nested blocks .card and .card-body into flex-boxes with a column direction.
Add the flex-grow: 1; property to the .card-body block so that it occupies all the available height.
Assign the same property to the .card-text block so that it presses the buttons to the bottom edge of the cards and thus aligns them.
I prefer to achieve this with CSS so that I don't have to repeat the same utility classes for all the blocks involved. But for the .col-... blocks I have used the utility classes .d-flex, .d-none and .d-sm-flex, because they play here one more role: they also change the cards visibility according to the screen width.
Also I've removed the .clearfix class because it creates extra pseudo-elements and I see no reason to use this hear.
.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;
}
<div class="container my-4">
<div class="carousel-equal-heights">
<div class="carousel-item active">
<!--Content of a slide-->
<div class="row">
<div class="col-sm-4 d-flex">
<div class="card mb-2">
<img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(34).jpg" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
</p>
<a class="btn btn-primary">Button</a>
</div>
</div>
</div>
<div class="col-sm-4 d-none d-sm-flex">
<div class="card mb-2">
<img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(18).jpg" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a class="btn btn-primary">Button</a>
</div>
</div>
</div>
<div class="col-sm-4 d-none d-sm-flex">
<div class="card mb-2">
<img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(35).jpg" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a class="btn btn-primary">Button</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css">
Step 2. Adjust the height of the slides
Unfortunately, this approach doesn't work for slides. Inactive slides get the display: none; property and the .carousel-inner container always changes its height to match the height of the active slide.
In this situation we can use JS:
Calculate the height of the highest and set it for all carousel slides.
Update these values if the browser window resizes.
Also add the height: 100%; property to the .row block on each slide.
Check the solution on MDB and CodePen.
$(document).ready(function() {
let $carouselItems = $('.carousel-equal-heights').find('.carousel-item');
updateItemsHeight();
$(window).resize(updateItemsHeight);
function updateItemsHeight() {
// remove old 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);
}
});
.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;
}
<div class="container my-4">
<!--Carousel Wrapper-->
<div id="multi-item-example" class="carousel slide carousel-multi-item carousel-equal-heights" data-ride="carousel">
<!--Controls-->
<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>
<!--/.Controls-->
<!--Slides-->
<div class="carousel-inner" role="listbox">
<!--First slide-->
<div class="carousel-item active">
<div class="row">
<div class="col-sm-4 d-flex">
<div class="card mb-2">
<img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(34).jpg" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
</p>
<a class="btn btn-primary">Button</a>
</div>
</div>
</div>
<div class="col-sm-4 d-none d-sm-flex">
<div class="card mb-2">
<img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(18).jpg" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a class="btn btn-primary">Button</a>
</div>
</div>
</div>
<div class="col-sm-4 d-none d-sm-flex">
<div class="card mb-2">
<img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(35).jpg" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a class="btn btn-primary">Button</a>
</div>
</div>
</div>
</div>
</div>
<!--/.First slide-->
<!--Second slide-->
<div class="carousel-item">
<div class="row">
<div class="col-sm-4 d-flex">
<div class="card mb-2">
<img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Horizontal/City/4-col/img%20(60).jpg" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a class="btn btn-primary">Button</a>
</div>
</div>
</div>
<div class="col-sm-4 d-none d-sm-flex">
<div class="card mb-2">
<img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Horizontal/City/4-col/img%20(47).jpg" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
</p>
<a class="btn btn-primary">Button</a>
</div>
</div>
</div>
<div class="col-sm-4 d-none d-sm-flex">
<div class="card mb-2">
<img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Horizontal/City/4-col/img%20(48).jpg" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a class="btn btn-primary">Button</a>
</div>
</div>
</div>
</div>
</div>
<!--/.Second slide-->
<!--Third slide-->
<div class="carousel-item">
<div class="row">
<div class="col-sm-4 d-flex">
<div class="card mb-2">
<img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Horizontal/Food/4-col/img%20(53).jpg" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
</p>
<a class="btn btn-primary">Button</a>
</div>
</div>
</div>
<div class="col-sm-4 d-none d-sm-flex">
<div class="card mb-2">
<img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Horizontal/Food/4-col/img%20(45).jpg" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
</p>
<a class="btn btn-primary">Button</a>
</div>
</div>
</div>
<div class="col-sm-4 d-none d-sm-flex">
<div class="card mb-2">
<img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Horizontal/Food/4-col/img%20(51).jpg" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a class="btn btn-primary">Button</a>
</div>
</div>
</div>
</div>
</div>
<!--/.Third slide-->
</div>
<!--/.Slides-->
</div>
<!--/.Carousel Wrapper-->
</div>
<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.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.min.js"></script>

How to fix bootstrap card formatting?

I want to put my cards in a row as seen here https://codepen.io/dnorton94/pen/VwZdRzG I would normal use the bootstrap row class but when I do that on my code below it shrinks the card horizontally.
I am using bootstrap 4.3 & JQuery 3.4
I have tried using the col class to increase the width
<div id='filters' class='sections'>
<div class='filter-attributes'>
<h4>Type</h4>
<input type='checkbox' name='type' id='skill' value='skill' >Skill</input>
<input type='checkbox' name='type' id='passion' value='passion' >Passion</input>
<input type='checkbox' name='type' id='course' value='course' >Course</input>
<input type='checkbox' name='type' id='job' value='education' >Education</input>
</div>
<div class='filter-attributes'>
<h4>Personality</h4>
<input type='checkbox' name='personality' id='large' value='istj' >ISTJ</input>
<input type='checkbox' name='personality' id='small' value='esfj' >ESFJ</input>
</div>
<div>
<br>
<input type='button' id='none' value='Clear all'></input>
</div>
</div>
<div class="container">
<div class='sections'>
<div class="col-sm-3 mt-3 grid-products" data-type='skill' data-personality='istj'>
<div class="card">
<div class="card-block">
<img class="card-img-top img-fluid" src="//placehold.it/500x200" alt="Card image cap">
<h5 class="card-title">Card A</h5>
<h6 class- "card-personalityType">Subtitle</h6>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content</p>
</div>
</div>
</div>
<div class="col-sm-3 mt-3 grid-products" data-type='passion' data-personality='istj'>
<div class="card">
<div class="card-block">
<img class="card-img-top img-fluid" src="//placehold.it/500x200" alt="Card image cap">
<h5 class="card-title">Card Two</h5>
<h6 class- "card-personalityType">Subtitle</h6>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
</div>
$(document).ready(function() {
var $products = $('.grid-products'),
$filters = $("#filters input[type='checkbox']"),
product_filter = new ProductFilterLevel2($products, $filters);
product_filter.init();
});
function ProductFilterLevel2(products, filters) {
var _this = this;
this.init = function() {
this.products = products;
this.filters = filters;
this.bindEvents();
};
this.bindEvents = function() {
this.filters.click(this.filterGridProducts);
$('#none').click(this.removeAllFilters);
};
this.filterGridProducts = function() {
//hide all
_this.products.hide();
var filteredProducts = _this.products;
//filter by colour, size, shape etc
var filterAttributes = $('.filter-attributes');
// for each attribute check the corresponding attribute filters selected
filterAttributes.each(function(){
var selectedFilters = $(this).find('input:checked');
// if selected filter by the attribute
if (selectedFilters.length) {
var selectedFiltersValues = [];
selectedFilters.each(function() {
var currentFilter = $(this);
selectedFiltersValues.push("[data-" + currentFilter.attr('name') + "='" + currentFilter.val() + "']");
});
filteredProducts = filteredProducts.filter(selectedFiltersValues.join(','));
}
});
filteredProducts.show();
};
this.removeAllFilters = function() {
_this.filters.prop('checked', false);
_this.products.show();
}
}
I expect the cards to line up horizontally at the default card width

Change
<div class="container">
<div class='sections'>
<div class="col-sm-3 mt-3 grid-products" data-type='skill' data-personality='istj'>
<div class="card">
<div class="card-block">
<img class="card-img-top img-fluid" src="//placehold.it/500x200" alt="Card image cap">
<h5 class="card-title">Card A</h5>
<h6 class- "card-personalityType">Subtitle</h6>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content</p>
</div>
</div>
</div>
<div class="col-sm-3 mt-3 grid-products" data-type='passion' data-personality='istj'>
<div class="card">
<div class="card-block">
<img class="card-img-top img-fluid" src="//placehold.it/500x200" alt="Card image cap">
<h5 class="card-title">Card Two</h5>
<h6 class- "card-personalityType">Subtitle</h6>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
</div>
to
<div class="container">
<div class='sections row'>
<div class="col-sm-3 mt-3 grid-products" data-type='skill' data-personality='istj'>
<div class="card">
<div class="card-block">
<img class="card-img-top img-fluid" src="//placehold.it/500x200" alt="Card image cap">
<h5 class="card-title">Card A</h5>
<h6 class- "card-personalityType">Subtitle</h6>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content</p>
</div>
</div>
</div>
<div class="col-sm-3 mt-3 grid-products" data-type='passion' data-personality='istj'>
<div class="card">
<div class="card-block">
<img class="card-img-top img-fluid" src="//placehold.it/500x200" alt="Card image cap">
<h5 class="card-title">Card Two</h5>
<h6 class- "card-personalityType">Subtitle</h6>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
</div>
No need to add a new div to create a row simply add the class to the second div

Card Img Overlay, Overflows Card Body

I have a page with cards. There is a thumbnail at the top and an overlay.
The body of the card must be outside of the overlay but it overflows onto the body
Check demo
https://codepen.io/snarex/pen/NWKbgZM
This is a sample from my card design
<div class="card shadow bg-white rounded">
<a href="#">
<img src="https://placeimg.com/640/360/any" class="card-img-top" alt="...">
<div class="card-img-overlay text-center d-flex">
<img src="http://wptf.com/wp-content/uploads/2014/05/play-button.png"
class="w-25 align-self-center mx-auto "
alt="">
</div>
</a>
<div class="card-body">
<h5 class="card-title">
*</h5>
</div>
I am looking forward to have something like this, but with play button as I have in codepen demo

You should add "position: relative" to the link element() so that the overlay connects to it instead of the higher parent
<div class="card shadow bg-white rounded">
<a href="#" class = "position-relative">
<img src="https://placeimg.com/640/360/any" class="card-img-top" alt="...">
<div class="card-img-overlay text-center d-flex">
<img src="http://wptf.com/wp-content/uploads/2014/05/play-button.png"
class="w-25 align-self-center mx-auto "
alt="">
</div>
</a>
<div class="card-body">
<h5 class="card-title">
Hızlı olan kazansın: SEO’nun gizli kahramanı “Page Speed”</h5>
</div>

Bootstrap 4 Cards Component As A Fleckity Groups Cells Together In Slides

Today I started with Bootstrap 4 and still exploring with it and I' still new with using Flickity. Now I tried to create a Flickity carousel, a groups cells using the cards component of Bootstrap 4 instead of usual images using the following codes below. But error happening. Is this possible or not??
HTML
<div class="gallery js-flickity carousel-card" id="card">
<div class="gallery-cell">
<div class="card">
<img class="card-img-top" src="news1.jpeg" alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div>
</div>
<div class="gallery-cell">
<div class="card">
<img class="card-img-top" src="news2.jpeg" alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div>
</div>
<div class="gallery-cell">
<div class="card">
<img class="card-img-top" src="news3.jpeg" alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div>
</div>
<div class="gallery-cell">
<div class="card">
<img class="card-img-top" src="news4.jpeg" alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div>
</div>
<div class="gallery-cell">
<div class="card">
<img class="card-img-top" src="news1.jpeg" alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div>
</div>
<div class="gallery-cell">
<div class="card">
<img class="card-img-top" src="news1.jpeg" alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div>
</div>
<div class="gallery-cell">
<div class="card">
<img class="card-img-top" src="news1.jpeg" alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div>
</div>
<div class="gallery-cell">
<div class="card">
<img class="card-img-top" src="news1.jpeg" alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div>
</div>
<div class="gallery-cell">
<div class="card">
<img class="card-img-top" src="news1.jpeg" alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div>
</div>
</div>
SCRIPT
<script type="text/javascript">
$('.carousel-ace').flickity({
pageDots: true,
autoPlay: true,
groupCells: 4
});
</script>
STYLES
/*Flickity*/
.gallery-cell {
width: 28%;
height: 200px;
margin-right: 10px;
counter-increment: gallery-cell;
overflow: hidden;
}
.gallery-cell:before {
display: block;
text-align: center;
line-height: 200px;
font-size: 80px;
color: white;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}