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
Related
i'm creating nav tabs using css, and in the tab i provide a slider ( i use slick carousel ) for some reason when the tab is active all the cards are aligned horizontally, but after i go to other tabs the card changes to vertical, does anyone know Why does this happen ?
thanks
<section>
<style>
.tabs-location {
border-bottom: 3px solid #951942;
padding-bottom: 1rem;
}
.tabs-location>li.active>a,
.tabs-location>li.active>a:focus,
.tabs-location>li.active>a:hover {
color: #fff;
background-color: #951942;
}
</style>
<div class="container">
<div class="row">
<div class="col-md-12">
<h3 align='center'>Testing Location vOffice</h3>
<div class="container">
<ul id="myTabs" class="nav nav-pills nav-justified tabs-location" role="tablist" data-tabs="tabs">
<li class="active">Jakarta</li>
<li>Tangerang</li>
<li>Bekasi</li>
<li>Surabaya</li>
<li>Bali</li>
<li>Medan</li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane fade in active" id="jakarta">
<div class="responsive-location">
<div>
<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<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>
<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<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>
<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<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>
<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<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>
<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<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>
</div>
<div role="tabpanel" class="tab-pane fade" id="tangerang">
<div class="responsive-location">
<div>
<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<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>
<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<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>
<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<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>
<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<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>
<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<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>
</div>
<div role="tabpanel" class="tab-pane fade" id="bekasi">Bekasi</div>
<div role="tabpanel" class="tab-pane fade" id="surabaya">Surabaya</div>
<div role="tabpanel" class="tab-pane fade" id="bali">Bali</div>
<div role="tabpanel" class="tab-pane fade" id="medan">Medan</div>
</div>
</div>
</div>
</div>
</div>
</section>
for my js
<script>
$('.responsive-location').slick({
dots: true,
infinite: false,
speed: 300,
slidesToShow: 4,
slidesToScroll: 4,
responsive: [{
breakpoint: 1024,
settings: {
slidesToShow: 3,
slidesToScroll: 3,
infinite: true,
dots: true
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 2,
slidesToScroll: 2
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
});
</script>
You can see the live code here
https://voffice.co.id/jakarta-virtual-office/index-dummy#testing
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>
I using boostrap card for displaying the content but when i impelement it with backend for looping. Items just added and added on right. I want items is set 3 item in column and continue straight down.
like this
<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<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 class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<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 class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<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>
but how ? i try with pagination on the backend but still not work :(
check out Grid system
in bootstrap 4https://getbootstrap.com/docs/4.0/layout/grid/
if you want each card be in same size on all screens add col-4
if you want on big screen be 3 cards & on small screens displayed separate use col-lg-4 col-md-12
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row"> <!-- if you want no spaces use ('row no-gutters') -->
<div class="col-lg-4 col-md-12"> <!-- card 1 -->
<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<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="col-lg-4 col-md-12"> <!-- card 2 -->
<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<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="col-lg-4 col-md-12"> <!-- card 3 -->
<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<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>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
Put the card divs in a container. You should be using the Bootstrap col property to do layout i.e. col-md-12.
You should also probably put the card divs inside a row tag.
Setting width via inline-css and setting an rem/em value the way you did doesn't make much sense. Bootstrap has a grid system for positioning and you should be using that. Examples of using the Bootstrap grid be can found here.
Here you go with a solution
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<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 class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<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 class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<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>
</div>
After I search "card two" I would like the results to realign to display from the beginning of the results section.
Also I cannot find any documentation on how to paginate cards...I just want to clarify paginate cards. I can find documentation on how to paginate tables. The ones on cards are not using the card class.
I have tried using the card-deck class instead of the card-block class. Here's the codepen: https://codepen.io/dnorton94/pen/NWKGagz
<!-- search bar -->
<div class="container">
<div class="row">
<div class="col-sm-12 mb-3">
<input type="text" id="myFilter" class="form-control" onkeyup="myFunction()" placeholder="Search by MBTI personality type..">
</div>
</div>
<!-- results -->
<div class="container">
<div class="row" id="myItems">
<!-- card one -->
<div class="col-sm-3">
<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 one</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
<!-- card two -->
<div class="col-sm-3">
<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>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
<!-- card three -->
<div class="col-sm-3">
<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 three</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
<!-- card four -->
<div class="col-sm-3">
<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 four</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
var input, filter, cards, cardContainer, h5, title, i;
input = document.getElementById("myFilter");
filter = input.value.toUpperCase();
cardContainer = document.getElementById("myItems");
cards = cardContainer.getElementsByClassName("card");
for (i = 0; i < cards.length; i++) {
title = cards[i].querySelector(".card-block h5.card-title");
if (title.innerText.toUpperCase().indexOf(filter) > -1) {
cards[i].style.display = "";
} else {
cards[i].style.display = "none";
}
}
}
.row {
display: flex;
flex-wrap: wrap;
}
I expect after I type "card two" for the results to reformat and the card two to replace the card ones initial position.
Pagination...I would like to display 12 cards on 1 page then 12 on the next page and so on
You have to select the parent element like follows
if (title.innerText.toUpperCase().indexOf(filter) > -1) {
cards[i].parentElement.style.display = "flex"
} else {
cards[i].parentElement.style.display = "none"
}
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%;
}