I like to make a card-desk with Bootstrap 4 that contains internal list-groups or card-block's (whatever sections) and this sections should have the same horizontal height.
I tried with d-flex flex-column and list-groups. nothing worked as expected. set a fixed height to each section is not an option.
Example:
https://jsfiddle.net/7kvktrh5/
Code:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<div class="container py-4">
<div class="card-deck">
<div class="card">
<div class="card-body">
<h4 class="card-title">Product 1</h4>
<p class="card-text"></p>
</div>
<hr>
<div class="card-body">
<p class="card-text">Some description</p>
</div>
<hr>
<div class="card-body">
<p class="card-text">Price</p>
</div>
</div>
<div class="card">
<div class="card-body">
<h4 class="card-title">Product 2</h4>
<p class="card-text">Some Text</p>
</div>
<hr>
<div class="card-body">
<p class="card-text">Some description: This card has supporting text belosupporting textporting text belosuppal content.</p>
</div>
<hr>
<div class="card-body">
<p class="card-text">Price</p>
</div>
</div>
<div class="card">
<div class="card-body">
<h4 class="card-title">Product 3</h4>
<p class="card-text">This is a wider card little bit longer.</p>
</div>
<hr>
<div class="card-body">
<p class="card-text">Some description: This card textporting text belosuppal content.</p>
</div>
<hr>
<div class="card-body">
<p class="card-text">Price</p>
</div>
</div>
</div>
I hope here is your solution
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<div class="container py-4">
<div class="card-deck">
<div class="card border-bottom-0 rounded-top" style="border-radius:0;">
<div class="card-body">
<h4 class="card-title">Product 1</h4>
<p class="card-text"></p>
</div>
</div>
<div class="card border-bottom-0 " style="border-radius:0;">
<div class="card-body">
<h4 class="card-title">Product 2</h4>
<p class="card-text">Some Text</p>
</div>
</div>
<div class="card border-bottom-0" style="border-radius:0;">
<div class="card-body">
<h4 class="card-title">Product 3</h4>
<p class="card-text">This is a wider card little bit longer.</p>
</div>
</div>
</div>
<div class="card-deck">
<div class="card rounded-0">
<div class="card-body">
<h4 class="card-title">Product 1</h4>
<p class="card-text">Some description: This card has supporting text belosupporting textporting text belosuppal content.</p>
</div>
</div>
<div class="card rounded-0">
<div class="card-body">
<h4 class="card-title">Product 2</h4>
<p class="card-text">Some Text</p>
</div>
</div>
<div class="card rounded-0">
<div class="card-body">
<h4 class="card-title">Product 3</h4>
<p class="card-text">This is a wider card little bit longer. </p>
</div>
</div>
</div>
<div class="card-deck">
<div class="card border-top-0 rounded-bottom" style="border-radius:0;">
<div class="card-body">
<h4 class="card-title">Product 1</h4>
<p class="card-text"></p>
</div>
</div>
<div class="card border-top-0 rounded-bottom" style="border-radius:0;">
<div class="card-body">
<h4 class="card-title">Product 2</h4>
<p class="card-text">Some Text</p>
</div>
</div>
<div class="card border-top-0 rounded-bottom" style="border-radius:0;">
<div class="card-body">
<h4 class="card-title">Product 3</h4>
<p class="card-text">This is a wider card little bit longer. </p>
</div>
</div>
</div>
</div>
Related
The section I am doing is just 6 cards, 3 cards in a row of 2. When the screen goes to small (mobile phone size) I want each card just to be on their own row. Each card showing one by one as the user scrolls.
It functions this way when I resize the screen however, when I go to google tools, it does not show my desired outcome.
.row {
padding: 4rem;
background-color: #F8F8FF;
border: 4px black;
colour: red;
}
.card {
background-color: #ddf;
padding: 30px;
margin: 20px;
transition: 0.40s;
}
.card:hover {
transform: scale(1.05);
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<div class="container ">
<h1 class="display-4">My Projects/Work</h1>
<div class="row g-3">
<div class="col-12 col-md-6 col-lg-4">
<div class="card" id="proj1">
<img src="https://via.placeholder.com/300x200" class="card-img-top" alt="project_1" />
<div class="card-body">
<h5 class="card-title">Blog Project</h5>
<p class="card-text">
A simple blog website which I made from scratch using html , css and javascript for the frontend.The backend was done with Django and SQL.
</p>
Click to see
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-4">
<div class="card" id="proj2">
<img src="https://via.placeholder.com/300x200" class="card-img-top" alt="project_2" />
<div class="card-body">
<h5 class="card-title">Social media clone </h5>
<p class="card-text">
A social media clone with all the main features of a social media site such as Facebook.In order to achieve this I used Django and React.
</p>
Click to see
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-4">
<div class="card" id="proj3">
<img src="https://via.placeholder.com/300x200" class="card-img-top" alt="project_3" />
<div class="card-body">
<h5 class="card-title">E-commence site</h5>
<p class="card-text">
This is a website I build for a small tech company in my local area that specialized in databases .
</p>
Click to see
</div>
</div>
</div>
</div>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-12 col-md-6 col-lg-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text.</p>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text.</p>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text.</p>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text.</p>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text.</p>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text.</p>
</div>
</div>
</div>
</div>
</div>
You can put classes on "row" or "column" https://getbootstrap.com/docs/4.6/utilities/flex/#align-items
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<section class="bg-light pt-5 pb-5 shadow-sm">
<div class="container">
<div class="row pt-5">
<div class="col-12">
<h3 class="text-uppercase border-bottom mb-4">Bootstrap Responsive</h3>
</div>
</div>
<div class="row">
<div class="col-lg-4 mb-3 d-flex align-items-stretch">
<div class="card">
<img src="https://via.placeholder.com/300x200" class="card-img-top" alt="Card Image">
<div class="card-body d-flex flex-column">
<h5 class="card-title">Blog Project</h5>
<p class="card-text mb-4">A simple blog website which I made from scratch using html , css and javascript for the frontend.The backend was done with Django and SQL.</p>
Click to see
</div>
</div>
</div>
<div class="col-lg-4 mb-3 d-flex align-items-stretch">
<div class="card">
<img src="https://via.placeholder.com/300x200" class="card-img-top" alt="Card Image">
<div class="card-body d-flex flex-column">
<h5 class="card-title">Blog Project</h5>
<p class="card-text mb-4">A simple blog website which I made from scratch using html , css and javascript for the frontend.The backend was done with Django and SQL.</p>
Click to see
</div>
</div>
</div>
<div class="col-lg-4 mb-3 d-flex align-items-stretch">
<div class="card">
<img src="https://via.placeholder.com/300x200" class="card-img-top" alt="Card Image">
<div class="card-body d-flex flex-column">
<h5 class="card-title">Blog Project</h5>
<p class="card-text mb-4">A simple blog website which I made from scratch using html , css and javascript for the frontend.The backend was done with Django and SQL.</p>
Click to see
</div>
</div>
</div>
</div>
</div>
</section>
how can I fix these cards so that they are the same size and width?
Because if I add more text to a product on a card, the body goes lower, but the edges of the card remain the same.
I would like the body to be aligned regardless of content
It's possible?
<div class="card-body">
<div class="product-name col-12 no-padding">
<a
class="unset"
:title="product.name"
:href="`${baseUrl}/${product.slug}`">
<span class="fs16">{{ product.name.substring(0,20) }} <br> {{ product.name.substring(21,40) }} <br> {{ product.name.substring(41,60) }} <br> {{ product.name.substring(61,81) }} </span>
</a>
</div>
<div class="sticker new" v-if="product.new">
{{ product.new }}
</div>
<div class="product-price fs16" v-html="product.priceHTML"></div>
<div
class="product-rating col-12 no-padding"
v-if="product.totalReviews && product.totalReviews > 0">
<star-ratings :ratings="product.avgRating"></star-ratings>
<a class="fs14 align-top unset active-hover" :href="`${$root.baseUrl}/reviews/${product.slug}`">
{{ __('products.reviews-count', {'totalReviews': product.totalReviews}) }}
</a>
</div>
<div class="product-rating col-12 no-padding" v-else>
<span class="fs14" v-text="product.firstReviewText"></span>
</div>
<vnode-injector :nodes="getDynamicHTML(product.addToCartHtml)"></vnode-injector>
</div>
</div>
I am presenting a case with pure CSS + HTML. The idea is that you can see how to format the cards so that the bodies are the same size.
HTML
<div class="container">
<!-- Page Features -->
<div class="row text-center">
<div class="col-lg-4 col-md-6 mb-4">
<div class="card h-100">
<img class="card-img-top" src="https://dummyimage.com/600x400/000/fff&text=1" >
<div class="card-body">
<h4 class="card-title">card 1</h4>
<p class="card-text">product1 </p>
<p class="card-text">product1 </p>
<p class="card-text">product1 </p>
</div>
<div class="card-footer">
+info
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 mb-4">
<div class="card h-100">
<img class="card-img-top" src="https://dummyimage.com/600x400/000/fff&text=2" >
<div class="card-body">
<h4 class="card-title">card 1</h4>
<p class="card-text">product1 </p>
<p class="card-text">product1 </p>
<p class="card-text">product1 </p>
<p class="card-text">product1 </p>
<p class="card-text">product1 </p>
</div>
<div class="card-footer">
+info
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 mb-4">
<div class="card h-100">
<img class="card-img-top" src="https://dummyimage.com/600x400/000/fff&text=3" >
<div class="card-body">
<h4 class="card-title">card 1</h4>
<p class="card-text">product1 </p>
<p class="card-text">product1 </p>
<p class="card-text">product1 </p>
<p class="card-text">product1 </p>
<p class="card-text">product1 </p>
<p class="card-text">product1 </p>
<p class="card-text">product1 </p>
</div>
<div class="card-footer">
+info
</div>
</div>
</div>
</div>
</div>
run # codeply
The key class is h-100 # card tag.
Good luck!
So I'm trying to have multiple Card Carousels, But when I click the second card carousel button, The first one moves but the second one doesn't, Same is the case with multiple, For example if i have 4 card carousels but only 1 works or moves, when i try to click the carousel next or previous buttons, only the first carousel moves.
code for two card carousels
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css">
<link rel="stylesheet" href="https://static.pingendo.com/bootstrap/bootstrap-4.3.1.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Oswald:wght#600&display=swap" rel="stylesheet">
</head>
<section class="pt-5 pb-5">
<div class="container">
<div class="row">
<div class="col-6">
<h3 class="mb-3">Carousel cards title </h3>
</div>
<div class="col-6 text-right">
<a class="btn btn-primary mb-3 mr-1" href="#carouselExampleIndicators2" role="button" data-slide="prev">
<i class="fa fa-arrow-left"></i>
</a>
<a class="btn btn-primary mb-3 " href="#carouselExampleIndicators2" role="button" data-slide="next">
<i class="fa fa-arrow-right"></i>
</a>
</div>
<div class="col-12">
<div id="carouselExampleIndicators2" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="row">
<div class="col-md-4 mb-3">
<div class="card">
<img class="img-fluid" alt="100%x280" src="https://images.unsplash.com/photo-1532781914607-2031eca2f00d?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjMyMDc0fQ&s=7c625ea379640da3ef2e24f20df7ce8d">
<div class="card-body">
<h4 class="card-title">Special title treatment</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
<div class="col-md-4 mb-3">
<div class="card">
<img class="img-fluid" alt="100%x280" src="https://images.unsplash.com/photo-1517760444937-f6397edcbbcd?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjMyMDc0fQ&s=42b2d9ae6feb9c4ff98b9133addfb698">
<div class="card-body">
<h4 class="card-title">Special title treatment</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
<div class="col-md-4 mb-3">
<div class="card">
<img class="img-fluid" alt="100%x280" src="https://images.unsplash.com/photo-1532712938310-34cb3982ef74?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjMyMDc0fQ&s=3d2e8a2039c06dd26db977fe6ac6186a">
<div class="card-body">
<h4 class="card-title">Special title treatment</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="row">
<div class="col-md-4 mb-3">
<div class="card">
<img class="img-fluid" alt="100%x280" src="https://images.unsplash.com/photo-1532771098148-525cefe10c23?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjMyMDc0fQ&s=3f317c1f7a16116dec454fbc267dd8e4">
<div class="card-body">
<h4 class="card-title">Special title treatment</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
<div class="col-md-4 mb-3">
<div class="card">
<img class="img-fluid" alt="100%x280" src="https://images.unsplash.com/photo-1532715088550-62f09305f765?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjMyMDc0fQ&s=ebadb044b374504ef8e81bdec4d0e840">
<div class="card-body">
<h4 class="card-title">Special title treatment</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
<div class="col-md-4 mb-3">
<div class="card">
<img class="img-fluid" alt="100%x280" src="https://images.unsplash.com/photo-1506197603052-3cc9c3a201bd?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjMyMDc0fQ&s=0754ab085804ae8a3b562548e6b4aa2e">
<div class="card-body">
<h4 class="card-title">Special title treatment</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="row">
<div class="col-md-4 mb-3">
<div class="card">
<img class="img-fluid" alt="100%x280" src="https://images.unsplash.com/photo-1507525428034-b723cf961d3e?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjMyMDc0fQ&s=ee8417f0ea2a50d53a12665820b54e23">
<div class="card-body">
<h4 class="card-title">Special title treatment</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
<div class="col-md-4 mb-3">
<div class="card">
<img class="img-fluid" alt="100%x280" src="https://images.unsplash.com/photo-1532777946373-b6783242f211?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjMyMDc0fQ&s=8ac55cf3a68785643998730839663129">
<div class="card-body">
<h4 class="card-title">Special title treatment</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
<div class="col-md-4 mb-3">
<div class="card">
<img class="img-fluid" alt="100%x280" src="https://images.unsplash.com/photo-1532763303805-529d595877c5?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjMyMDc0fQ&s=5ee4fd5d19b40f93eadb21871757eda6">
<div class="card-body">
<h4 class="card-title">Special title treatment</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="pt-5 pb-5">
<div class="container">
<div class="row">
<div class="col-6">
<h3 class="mb-3">Carousel cards title </h3>
</div>
<div class="col-6 text-right">
<a class="btn btn-primary mb-3 mr-1" href="#carouselExampleIndicators2" role="button" data-slide="prev">
<i class="fa fa-arrow-left"></i>
</a>
<a class="btn btn-primary mb-3 " href="#carouselExampleIndicators2" role="button" data-slide="next">
<i class="fa fa-arrow-right"></i>
</a>
</div>
<div class="col-12">
<div id="carouselExampleIndicators2" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="row">
<div class="col-md-4 mb-3">
<div class="card">
<img class="img-fluid" alt="100%x280" src="https://images.unsplash.com/photo-1532781914607-2031eca2f00d?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjMyMDc0fQ&s=7c625ea379640da3ef2e24f20df7ce8d">
<div class="card-body">
<h4 class="card-title">Special title treatment</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
<div class="col-md-4 mb-3">
<div class="card">
<img class="img-fluid" alt="100%x280" src="https://images.unsplash.com/photo-1517760444937-f6397edcbbcd?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjMyMDc0fQ&s=42b2d9ae6feb9c4ff98b9133addfb698">
<div class="card-body">
<h4 class="card-title">Special title treatment</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
<div class="col-md-4 mb-3">
<div class="card">
<img class="img-fluid" alt="100%x280" src="https://images.unsplash.com/photo-1532712938310-34cb3982ef74?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjMyMDc0fQ&s=3d2e8a2039c06dd26db977fe6ac6186a">
<div class="card-body">
<h4 class="card-title">Special title treatment</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="row">
<div class="col-md-4 mb-3">
<div class="card">
<img class="img-fluid" alt="100%x280" src="https://images.unsplash.com/photo-1532771098148-525cefe10c23?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjMyMDc0fQ&s=3f317c1f7a16116dec454fbc267dd8e4">
<div class="card-body">
<h4 class="card-title">Special title treatment</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
<div class="col-md-4 mb-3">
<div class="card">
<img class="img-fluid" alt="100%x280" src="https://images.unsplash.com/photo-1532715088550-62f09305f765?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjMyMDc0fQ&s=ebadb044b374504ef8e81bdec4d0e840">
<div class="card-body">
<h4 class="card-title">Special title treatment</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
<div class="col-md-4 mb-3">
<div class="card">
<img class="img-fluid" alt="100%x280" src="https://images.unsplash.com/photo-1506197603052-3cc9c3a201bd?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjMyMDc0fQ&s=0754ab085804ae8a3b562548e6b4aa2e">
<div class="card-body">
<h4 class="card-title">Special title treatment</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="row">
<div class="col-md-4 mb-3">
<div class="card">
<img class="img-fluid" alt="100%x280" src="https://images.unsplash.com/photo-1507525428034-b723cf961d3e?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjMyMDc0fQ&s=ee8417f0ea2a50d53a12665820b54e23">
<div class="card-body">
<h4 class="card-title">Special title treatment</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
<div class="col-md-4 mb-3">
<div class="card">
<img class="img-fluid" alt="100%x280" src="https://images.unsplash.com/photo-1532777946373-b6783242f211?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjMyMDc0fQ&s=8ac55cf3a68785643998730839663129">
<div class="card-body">
<h4 class="card-title">Special title treatment</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
<div class="col-md-4 mb-3">
<div class="card">
<img class="img-fluid" alt="100%x280" src="https://images.unsplash.com/photo-1532763303805-529d595877c5?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjMyMDc0fQ&s=5ee4fd5d19b40f93eadb21871757eda6">
<div class="card-body">
<h4 class="card-title">Special title treatment</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
code for only one
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css">
<link rel="stylesheet" href="https://static.pingendo.com/bootstrap/bootstrap-4.3.1.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Oswald:wght#600&display=swap" rel="stylesheet">
</head>
<section class="pt-5 pb-5">
<div class="container">
<div class="row">
<div class="col-6">
<h3 class="mb-3">Carousel cards title </h3>
</div>
<div class="col-6 text-right">
<a class="btn btn-primary mb-3 mr-1" href="#carouselExampleIndicators2" role="button" data-slide="prev">
<i class="fa fa-arrow-left"></i>
</a>
<a class="btn btn-primary mb-3 " href="#carouselExampleIndicators2" role="button" data-slide="next">
<i class="fa fa-arrow-right"></i>
</a>
</div>
<div class="col-12">
<div id="carouselExampleIndicators2" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="row">
<div class="col-md-4 mb-3">
<div class="card">
<img class="img-fluid" alt="100%x280" src="https://images.unsplash.com/photo-1532781914607-2031eca2f00d?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjMyMDc0fQ&s=7c625ea379640da3ef2e24f20df7ce8d">
<div class="card-body">
<h4 class="card-title">Special title treatment</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
<div class="col-md-4 mb-3">
<div class="card">
<img class="img-fluid" alt="100%x280" src="https://images.unsplash.com/photo-1517760444937-f6397edcbbcd?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjMyMDc0fQ&s=42b2d9ae6feb9c4ff98b9133addfb698">
<div class="card-body">
<h4 class="card-title">Special title treatment</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
<div class="col-md-4 mb-3">
<div class="card">
<img class="img-fluid" alt="100%x280" src="https://images.unsplash.com/photo-1532712938310-34cb3982ef74?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjMyMDc0fQ&s=3d2e8a2039c06dd26db977fe6ac6186a">
<div class="card-body">
<h4 class="card-title">Special title treatment</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="row">
<div class="col-md-4 mb-3">
<div class="card">
<img class="img-fluid" alt="100%x280" src="https://images.unsplash.com/photo-1532771098148-525cefe10c23?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjMyMDc0fQ&s=3f317c1f7a16116dec454fbc267dd8e4">
<div class="card-body">
<h4 class="card-title">Special title treatment</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
<div class="col-md-4 mb-3">
<div class="card">
<img class="img-fluid" alt="100%x280" src="https://images.unsplash.com/photo-1532715088550-62f09305f765?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjMyMDc0fQ&s=ebadb044b374504ef8e81bdec4d0e840">
<div class="card-body">
<h4 class="card-title">Special title treatment</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
<div class="col-md-4 mb-3">
<div class="card">
<img class="img-fluid" alt="100%x280" src="https://images.unsplash.com/photo-1506197603052-3cc9c3a201bd?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjMyMDc0fQ&s=0754ab085804ae8a3b562548e6b4aa2e">
<div class="card-body">
<h4 class="card-title">Special title treatment</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="row">
<div class="col-md-4 mb-3">
<div class="card">
<img class="img-fluid" alt="100%x280" src="https://images.unsplash.com/photo-1507525428034-b723cf961d3e?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjMyMDc0fQ&s=ee8417f0ea2a50d53a12665820b54e23">
<div class="card-body">
<h4 class="card-title">Special title treatment</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
<div class="col-md-4 mb-3">
<div class="card">
<img class="img-fluid" alt="100%x280" src="https://images.unsplash.com/photo-1532777946373-b6783242f211?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjMyMDc0fQ&s=8ac55cf3a68785643998730839663129">
<div class="card-body">
<h4 class="card-title">Special title treatment</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
<div class="col-md-4 mb-3">
<div class="card">
<img class="img-fluid" alt="100%x280" src="https://images.unsplash.com/photo-1532763303805-529d595877c5?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjMyMDc0fQ&s=5ee4fd5d19b40f93eadb21871757eda6">
<div class="card-body">
<h4 class="card-title">Special title treatment</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
You are using same ID for both carusels (carouselExampleIndicators2), so your buttons are triggering the first one. By changing the ID of the second one it will work just fine.
In my example i change the ID of the second one to carouselExampleIndicators3
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css">
<link rel="stylesheet" href="https://static.pingendo.com/bootstrap/bootstrap-4.3.1.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Oswald:wght#600&display=swap" rel="stylesheet">
</head>
<section class="pt-5 pb-5">
<div class="container">
<div class="row">
<div class="col-6">
<h3 class="mb-3">Carousel cards title </h3>
</div>
<div class="col-6 text-right">
<a class="btn btn-primary mb-3 mr-1" href="#carouselExampleIndicators2" role="button" data-slide="prev">
<i class="fa fa-arrow-left"></i>
</a>
<a class="btn btn-primary mb-3 " href="#carouselExampleIndicators2" role="button" data-slide="next">
<i class="fa fa-arrow-right"></i>
</a>
</div>
<div class="col-12">
<div id="carouselExampleIndicators2" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="row">
<div class="col-md-4 mb-3">
<div class="card">
<img class="img-fluid" alt="100%x280" src="https://images.unsplash.com/photo-1532781914607-2031eca2f00d?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjMyMDc0fQ&s=7c625ea379640da3ef2e24f20df7ce8d">
<div class="card-body">
<h4 class="card-title">Special title treatment</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
<div class="col-md-4 mb-3">
<div class="card">
<img class="img-fluid" alt="100%x280" src="https://images.unsplash.com/photo-1517760444937-f6397edcbbcd?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjMyMDc0fQ&s=42b2d9ae6feb9c4ff98b9133addfb698">
<div class="card-body">
<h4 class="card-title">Special title treatment</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
<div class="col-md-4 mb-3">
<div class="card">
<img class="img-fluid" alt="100%x280" src="https://images.unsplash.com/photo-1532712938310-34cb3982ef74?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjMyMDc0fQ&s=3d2e8a2039c06dd26db977fe6ac6186a">
<div class="card-body">
<h4 class="card-title">Special title treatment</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="row">
<div class="col-md-4 mb-3">
<div class="card">
<img class="img-fluid" alt="100%x280" src="https://images.unsplash.com/photo-1532771098148-525cefe10c23?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjMyMDc0fQ&s=3f317c1f7a16116dec454fbc267dd8e4">
<div class="card-body">
<h4 class="card-title">Special title treatment</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
<div class="col-md-4 mb-3">
<div class="card">
<img class="img-fluid" alt="100%x280" src="https://images.unsplash.com/photo-1532715088550-62f09305f765?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjMyMDc0fQ&s=ebadb044b374504ef8e81bdec4d0e840">
<div class="card-body">
<h4 class="card-title">Special title treatment</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
<div class="col-md-4 mb-3">
<div class="card">
<img class="img-fluid" alt="100%x280" src="https://images.unsplash.com/photo-1506197603052-3cc9c3a201bd?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjMyMDc0fQ&s=0754ab085804ae8a3b562548e6b4aa2e">
<div class="card-body">
<h4 class="card-title">Special title treatment</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="row">
<div class="col-md-4 mb-3">
<div class="card">
<img class="img-fluid" alt="100%x280" src="https://images.unsplash.com/photo-1507525428034-b723cf961d3e?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjMyMDc0fQ&s=ee8417f0ea2a50d53a12665820b54e23">
<div class="card-body">
<h4 class="card-title">Special title treatment</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
<div class="col-md-4 mb-3">
<div class="card">
<img class="img-fluid" alt="100%x280" src="https://images.unsplash.com/photo-1532777946373-b6783242f211?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjMyMDc0fQ&s=8ac55cf3a68785643998730839663129">
<div class="card-body">
<h4 class="card-title">Special title treatment</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
<div class="col-md-4 mb-3">
<div class="card">
<img class="img-fluid" alt="100%x280" src="https://images.unsplash.com/photo-1532763303805-529d595877c5?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjMyMDc0fQ&s=5ee4fd5d19b40f93eadb21871757eda6">
<div class="card-body">
<h4 class="card-title">Special title treatment</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="pt-5 pb-5">
<div class="container">
<div class="row">
<div class="col-6">
<h3 class="mb-3">Carousel cards title </h3>
</div>
<div class="col-6 text-right">
<a class="btn btn-primary mb-3 mr-1" href="#carouselExampleIndicators3" role="button" data-slide="prev">
<i class="fa fa-arrow-left"></i>
</a>
<a class="btn btn-primary mb-3 " href="#carouselExampleIndicators3" role="button" data-slide="next">
<i class="fa fa-arrow-right"></i>
</a>
</div>
<div class="col-12">
<div id="carouselExampleIndicators3" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="row">
<div class="col-md-4 mb-3">
<div class="card">
<img class="img-fluid" alt="100%x280" src="https://images.unsplash.com/photo-1532781914607-2031eca2f00d?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjMyMDc0fQ&s=7c625ea379640da3ef2e24f20df7ce8d">
<div class="card-body">
<h4 class="card-title">Special title treatment</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
<div class="col-md-4 mb-3">
<div class="card">
<img class="img-fluid" alt="100%x280" src="https://images.unsplash.com/photo-1517760444937-f6397edcbbcd?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjMyMDc0fQ&s=42b2d9ae6feb9c4ff98b9133addfb698">
<div class="card-body">
<h4 class="card-title">Special title treatment</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
<div class="col-md-4 mb-3">
<div class="card">
<img class="img-fluid" alt="100%x280" src="https://images.unsplash.com/photo-1532712938310-34cb3982ef74?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjMyMDc0fQ&s=3d2e8a2039c06dd26db977fe6ac6186a">
<div class="card-body">
<h4 class="card-title">Special title treatment</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="row">
<div class="col-md-4 mb-3">
<div class="card">
<img class="img-fluid" alt="100%x280" src="https://images.unsplash.com/photo-1532771098148-525cefe10c23?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjMyMDc0fQ&s=3f317c1f7a16116dec454fbc267dd8e4">
<div class="card-body">
<h4 class="card-title">Special title treatment</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
<div class="col-md-4 mb-3">
<div class="card">
<img class="img-fluid" alt="100%x280" src="https://images.unsplash.com/photo-1532715088550-62f09305f765?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjMyMDc0fQ&s=ebadb044b374504ef8e81bdec4d0e840">
<div class="card-body">
<h4 class="card-title">Special title treatment</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
<div class="col-md-4 mb-3">
<div class="card">
<img class="img-fluid" alt="100%x280" src="https://images.unsplash.com/photo-1506197603052-3cc9c3a201bd?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjMyMDc0fQ&s=0754ab085804ae8a3b562548e6b4aa2e">
<div class="card-body">
<h4 class="card-title">Special title treatment</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="row">
<div class="col-md-4 mb-3">
<div class="card">
<img class="img-fluid" alt="100%x280" src="https://images.unsplash.com/photo-1507525428034-b723cf961d3e?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjMyMDc0fQ&s=ee8417f0ea2a50d53a12665820b54e23">
<div class="card-body">
<h4 class="card-title">Special title treatment</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
<div class="col-md-4 mb-3">
<div class="card">
<img class="img-fluid" alt="100%x280" src="https://images.unsplash.com/photo-1532777946373-b6783242f211?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjMyMDc0fQ&s=8ac55cf3a68785643998730839663129">
<div class="card-body">
<h4 class="card-title">Special title treatment</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
<div class="col-md-4 mb-3">
<div class="card">
<img class="img-fluid" alt="100%x280" src="https://images.unsplash.com/photo-1532763303805-529d595877c5?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjMyMDc0fQ&s=5ee4fd5d19b40f93eadb21871757eda6">
<div class="card-body">
<h4 class="card-title">Special title treatment</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
I need to arrange some cards, in a web page with Boostrap 4.
Can you help me?
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div class="row">
<div class="col-md-12">
<div class="row">
<div class=" col-xl-3 col-lg-6 "><div class="card shadow-sm mb-0 bg-primary">
card 01
</div>
</div>
<div class=" col-xl-3 col-lg-4 ">
<div class=" col-xl-3 col-lg-6 "><div class="card shadow-sm mb-0 bg-primary">
card 01
</div>
<div class=" col-xl-3 col-lg-4 ">
<div class=" col-xl-3 col-lg-6 "><div class="card shadow-sm mb-0 bg-primary">
card 03
</div>
<div class=" col-xl-3 col-lg-4 ">
<div class=" col-xl-3 col-lg-6 "><div class="card shadow-sm mb-0 bg-primary">
card 04
</div>
</div>
</div>
</div>
I'm Tried to make bootstrap 4 card like a below image , but my card is not perfect, any idea for how to do correctly this one?
My code:
<div class="row">
<div class="col-md-12 ">
<div class="row">
<div class=" col-xl-3 col-lg-6 "><div class="card shadow-sm mb-0 bg-primary">
card 01
</div>
</div>
<div class=" col-xl-3 col-lg-4 ">
<div class=" col-xl-3 col-lg-6 "><div class="card shadow-sm mb-0 bg-primary">
card 01
</div>
</div>
</div>
</div>
You can try as below snippet in Bootstrap-v4.
[Check on Full Page]
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
<div class="container py-3">
<div class="row">
<div class="col-sm-12 col-md-4 col-lg-3 py-3">
<div class="card text-white bg-primary h-100 rounded-0 shadow-sm">
<div class="card-body">
<h5 class="card-title">Primary 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>
</div>
</div>
</div>
<div class="col-sm-12 col-md-8 col-lg-9">
<div class="row">
<div class="col-sm-6 col-lg-4 py-3">
<div class="card text-white bg-primary rounded-0 shadow-sm">
<div class="card-body">
<h5 class="card-title">Primary 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>
</div>
</div>
</div>
<div class="col-sm-6 col-lg-4 py-3">
<div class="card text-white bg-primary rounded-0 shadow-sm">
<div class="card-body">
<h5 class="card-title">Primary 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>
</div>
</div>
</div>
<div class="col-sm-6 col-lg-4 py-3">
<div class="card text-white bg-primary rounded-0 shadow-sm">
<div class="card-body">
<h5 class="card-title">Primary 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>
</div>
</div>
</div>
<div class="col-sm-6 col-lg-4 py-3">
<div class="card text-white bg-primary rounded-0 shadow-sm">
<div class="card-body">
<h5 class="card-title">Primary 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>
</div>
</div>
</div>
<div class="col-sm-6 col-lg-4 py-3">
<div class="card text-white bg-primary rounded-0 shadow-sm">
<div class="card-body">
<h5 class="card-title">Primary 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>
</div>
</div>
</div>
<div class="col-sm-6 col-lg-4 py-3">
<div class="card text-white bg-primary rounded-0 shadow-sm">
<div class="card-body">
<h5 class="card-title">Primary 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>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
You should use container and row which based bootstrap grid system. To makes sure your cards are placed right position, Here my sample code (Please run as full screen) the result should be like this image
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<body>
<div class="container" style="width: 1240px !important; max-width: 960px !important;">
<div class="row">
<div class="col">
<div class="card" style="width: 18rem; height: 100%">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">text</p>
Go somewhere
</div>
</div>
</div>
<div class="col">
<div class="row">
<div class="card" style="width: 200px;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">text</p>
Go somewhere
</div>
</div>
</div>
<div class="row">
<div class="card" style="width: 200px;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">text</p>
Go somewhere
</div>
</div>
</div>
</div>
<div class="col">
<div class="row">
<div class="card" style="width: 200px;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">text</p>
Go somewhere
</div>
</div>
</div>
<div class="row">
<div class="card" style="width: 200px;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">text</p>
Go somewhere
</div>
</div>
</div>
</div>
<div class="col">
<div class="row">
<div class="card" style="width: 200px;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">text</p>
Go somewhere
</div>
</div>
</div>
<div class="row">
<div class="card" style="width: 200px;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">text</p>
Go somewhere
</div>
</div>
</div>
</div>
</div>
</div>
</body>
If I understand correctly, you can use flex classes to achieve what you described.
<style>
.box-1 {
width: 100px;
height: 100px;
border: 1px solid red;
margin-bottom: 10px;
}
.box-2 {
width: 200px;
height: 210px;
border: 1px solid red;
}
</style>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="d-flex">
<div class="mr-3">
<div class="box-2">card 01</div>
</div>
<div class="d-flex">
<div class="mr-3">
<div class="box-1">card 02</div>
<div class="box-1 mb-0">card 05</div>
</div>
<div class="mr-3">
<div class="box-1">card 03</div>
<div class="box-1 mb-0">card 06</div>
</div>
<div>
<div class="box-1">card 04</div>
<div class="box-1 mb-0">card 07</div>
</div>
</div>
</div>
</div>
</div>
</div>
You should refer the grid system of bootstrap
(Run as full size)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.5.4/umd/popper.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container p-5">
<div class="row">
<div class="col-md-3">
<div class="card text-white bg-primary h-100 p-2 m-1">
<div class="card-body">
<h5 class="card-title">Primary 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>
</div>
</div>
</div>
<div class="col-md-9">
<div class="row">
<div class="col-md-4">
<div class="card text-white bg-primary p-2 m-1">
<div class="card-body">
<h5 class="card-title">Primary 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>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card text-white bg-primary p-2 m-1">
<div class="card-body">
<h5 class="card-title">Primary 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>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card text-white bg-primary p-2 m-1">
<div class="card-body">
<h5 class="card-title">Primary 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>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="card text-white bg-primary p-2 m-1">
<div class="card-body">
<h5 class="card-title">Primary 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>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card text-white bg-primary p-2 m-1">
<div class="card-body">
<h5 class="card-title">Primary 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>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card text-white bg-primary p-2 m-1">
<div class="card-body">
<h5 class="card-title">Primary 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>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
To get that grid system you will need to create a grid of your own. You can do this with columns and rows. You can have columns inside of rows, and move each column or row to where you want it. I outlined the basic structure in the snippet below (I used some sample content from G.W Kalpa Sathjana De Silva's code)
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container p-5">
<div class="row">
<div class="col-md-3">
<div class="card text-white bg-primary h-100 p-2 m-1">
<div class="card-body">
<h5 class="card-title">Primary 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>
</div>
</div>
</div>
<div class="col-md-9">
<div class="row">
<div class="col-md-4">
<div class="card text-white bg-primary p-2 m-1">
<div class="card-body">
<h5 class="card-title">Primary 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>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card text-white bg-primary p-2 m-1">
<div class="card-body">
<h5 class="card-title">Primary 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>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card text-white bg-primary p-2 m-1">
<div class="card-body">
<h5 class="card-title">Primary 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>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="card text-white bg-primary p-2 m-1">
<div class="card-body">
<h5 class="card-title">Primary 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>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card text-white bg-primary p-2 m-1">
<div class="card-body">
<h5 class="card-title">Primary 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>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card text-white bg-primary p-2 m-1">
<div class="card-body">
<h5 class="card-title">Primary 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>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I am trying to create the following component using Bootstrap
What I tried:
<style>
.card-container {
height:150px;
overflow-y: scroll;
}
</style>
<div class="jumbletron">
<div class="card card-inverse">
<div class="card-block">
<h3 class="card-title text">Alerts Card</h3>
<div class="card-container">
<div class="card card-inverse">
<div class="card-block">
<h3 class="card-title text">Alert 1</h3>
</div>
</div>
</div>
<div class="card card-inverse">
<div class="card-block">
<h3 class="card-title text">Alert 2</h3>
</div>
</div>
</div>
</div>
</div>
http://jsfiddle.net/rp51o4se/1/
But unfortunately couldn't figure out a way how to properly do it. How can I accomplish this?
In your example you used jumbletron instead of jumbotron for the class and place one of the cards outside the container.
Updated example here - http://jsfiddle.net/rp51o4se/5/
I also added a padding of 1rem to the card container to make it closer to your attached image.
You have your divs a bit mixed up and not wrapping properly.
.card-container {
height:150px;
overflow-y: scroll;
}
<div class="jumbotron">
<h1>My alert center</h1>
<div class="card-container">
<div class="card card-inverse">
<div class="card-body">
<h3 class="card-title text">Alerts Card</h3>
</div>
</div>
<div class="card card-inverse">
<div class="card-body">
<h3 class="card-title text">Alert 1</h3>
</div>
</div>
<div class="card card-inverse">
<div class="card-body">
<h3 class="card-title text">Alert 2</h3>
</div>
</div>
</div>
</div>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
</head>
<style>
.jumbotron{
height: 200px;
overflow-y: scroll;
}
.mb-10{
margin-bottom: 20px;
}
</style>
<body>
<div class="jumbotron">
<div class="card-container">
<div class="card w-50 mb-10">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
<div class="card w-50 mb-10">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
<div class="card w-50 mb-10">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div></div>
</body>
</html>
Try this