How can I align these product cards to grid? - html

I need to adjust these items to a grid, the first three are aligned but the following are all throughout the webpage the first three are perfectly aligned
I would like to align the rest of the cards like the first three. If someone can help me I would be really grateful.
Thanks. Here is the code below.
<div class="row">
<div class="col-md-4 mb-5">
<h2>Ултразвучни системи:</h2>
</div>
</div>
<!-- /.row -->
<div class="row ">
<div class="col-md-4 mb-5 d-flex align-items-stretch">
<div class="card h-100">
<img class="card-img-top" src="img\herai10.jpg"alt="">
<div class="card-body">
<h4 class="card-title">HERA I10</h4>
<p class="card-text">Акушерство, Гинекологија.</p>
</div>
<div class="card-footer">
Спецификации
</div>
</div>
</div>
<div class="col-md-4 mb-5 d-flex align-items-stretch">
<div class="card h-100">
<img class="card-img-top" src="img\heraw10.jpg" alt="">
<div class="card-body">
<h4 class="card-title">HERA W10</h4>
<p class="card-text">Акушерство, Гинекологија.</p>
</div>
<div class="card-footer">
Спецификации
</div>
</div>
</div>
<div class="col-md-4 mb-5 d-flex align-items-stretch">
<div class="card h-100" >
<img class="card-img-top" src="img\rs85.jpg" alt="">
<div class="card-body">
<h4 class="card-title">RS85</h4>
<p class="card-text">Радиологија.</p>
</div>
<div class="card-footer">
Спецификации
</div>
</div>
</div>
</div>
<div class="col-md-4 mb-5 d-flex align-items-stretch ">
<div class="card h-100">
<img class="card-img-top" src="img\WS80A.jpg" alt="">
<div class="card-body">
<h4 class="card-title">WS80A with Elite</h4>
<p class="card-text">Акушерство, Гинекологија.</p>
</div>
<div class="card-footer">
Спецификации
</div>
</div>
</div>
</div>
<div class="col-md-4 mb-5 d-flex align-items-stretch">
<div class="card h-100">
<img class="card-img-top" src="img\rs80a.jpg" alt="">
<div class="card-body">
<h4 class="card-title">RS80A with Prestige</h4>
<p class="card-text">Радиологија.</p>
</div>
<div class="card-footer">
Спецификации
</div>
</div>
</div>
</div>
<div class="col-md-4 mb-5 d-flex align-items-stretch">
<div class="card h-100">
<img class="card-img-top" src="img\hs70a.jpg" alt="">
<div class="card-body">
<h4 class="card-title">HS70A with Prime</h4>
<p class="card-text">Акушерство, Гинекологија, Кардиоваскуларно, Радиологија.</p>
</div>
<div class="card-footer">
Спецификации
</div>
</div>
</div>
</div>
<div class="col-md-4 mb-5 d-flex align-items-stretch">
<div class="card h-100">
<img class="card-img-top" src="img\hs60.jpg" alt="">
<div class="card-body">
<h4 class="card-title">HS60</h4>
<p class="card-text">Акушерство, Гинекологија, Кардиоваскуларно.</p>
</div>
<div class="card-footer">
Спецификации
</div>
</div>
</div>
</div>
<div class="col-md-4 mb-5 d-flex align-items-stretch">
<div class="card h-100">
<img class="card-img-top" src="img\hs50.jpg" alt="">
<div class="card-body">
<h4 class="card-title">HS50</h4>
<p class="card-text">Акушерство, Гинекологија, Кардиоваскуларно.</p>
</div>
<div class="card-footer">
Спецификации
</div>
</div>
</div>
</div>
<div class="col-md-4 mb-5 d-flex align-items-stretch">
<div class="card h-100">
<img class="card-img-top" src="img\hs40.jpg" alt="">
<div class="card-body">
<h4 class="card-title">HS40</h4>
<p class="card-text">Акушерство, Гинекологија, Кардиоваскуларно.</p>
</div>
<div class="card-footer">
Спецификации
</div>
</div>
</div>
</div>
<div class="col-md-4 mb-5 d-flex align-items-stretch">
<div class="card h-100">
<img class="card-img-top" src="img\hs30.jpg" alt="">
<div class="card-body">
<h4 class="card-title">HS30</h4>
<p class="card-text">Акушерство, Гинекологија, Кардиоваскуларно.</p>
</div>
<div class="card-footer">
Спецификации
</div>
</div>
</div>
</div>
<div class="col-md-4 mb-5 d-flex align-items-stretch">
<div class="card h-100">
<img class="card-img-top" src="img\hm70a.jpg" alt="">
<div class="card-body">
<h4 class="card-title">HM70A with Plus</h4>
<p class="card-text">Акушерство, Гинекологија, Кардиоваскуларно, Точка на Грижење.</p>
</div>
<div class="card-footer">
Спецификации
</div>
</div>
</div>
</div>
<div class="col-md-4 mb-5 d-flex align-items-stretch">
<div class="card h-100">
<img class="card-img-top" src="img\h60.jpg" alt="">
<div class="card-body">
<h4 class="card-title">H60</h4>
<p class="card-text">Акушерство, Гинекологија.</p>
</div>
<div class="card-footer">
Спецификации
</div>
</div>
</div>
</div>
<div class="col-md-4 mb-5 d-flex align-items-stretch">
<div class="card h-100">
<img class="card-img-top" src="img\sonoacer7.jpg" alt="">
<div class="card-body">
<h4 class="card-title">Sonoace R7</h4>
<p class="card-text">Акушерство, Гинекологија.</p>
</div>
<div class="card-footer">
Спецификации
</div>
</div>
</div>
</div>
<!-- /.row -->


There is a extra closing </div> tag that is causing the alignment to break.
<div class="row">
<div class="col-md-4 mb-5">
<h2>Ултразвучни системи:</h2>
</div>
</div>
<!-- /.row -->
<div class="row ">
<div class="col-md-4 mb-5 d-flex align-items-stretch">
<div class="card h-100">
<img class="card-img-top" src="img\herai10.jpg" alt="" />
<div class="card-body">
<h4 class="card-title">HERA I10</h4>
<p class="card-text">Акушерство, Гинекологија.</p>
</div>
<div class="card-footer">
Спецификации
</div>
</div>
</div>
<div class="col-md-4 mb-5 d-flex align-items-stretch">
<div class="card h-100">
<img class="card-img-top" src="img\heraw10.jpg" alt="" />
<div class="card-body">
<h4 class="card-title">HERA W10</h4>
<p class="card-text">Акушерство, Гинекологија.</p>
</div>
<div class="card-footer">
Спецификации
</div>
</div>
</div>
<div class="col-md-4 mb-5 d-flex align-items-stretch">
<div class="card h-100">
<img class="card-img-top" src="img\rs85.jpg" alt="" />
<div class="card-body">
<h4 class="card-title">RS85</h4>
<p class="card-text">Радиологија.</p>
</div>
<div class="card-footer">
Спецификации
</div>
</div>
</div>
<div class="col-md-4 mb-5 d-flex align-items-stretch ">
<div class="card h-100">
<img class="card-img-top" src="img\WS80A.jpg" alt="" />
<div class="card-body">
<h4 class="card-title">WS80A with Elite</h4>
<p class="card-text">Акушерство, Гинекологија.</p>
</div>
<div class="card-footer">
Спецификации
</div>
</div>
</div>
<div class="col-md-4 mb-5 d-flex align-items-stretch">
<div class="card h-100">
<img class="card-img-top" src="img\rs80a.jpg" alt="" />
<div class="card-body">
<h4 class="card-title">RS80A with Prestige</h4>
<p class="card-text">Радиологија.</p>
</div>
<div class="card-footer">
Спецификации
</div>
</div>
</div>
<div class="col-md-4 mb-5 d-flex align-items-stretch">
<div class="card h-100">
<img class="card-img-top" src="img\hs70a.jpg" alt="" />
<div class="card-body">
<h4 class="card-title">HS70A with Prime</h4>
<p class="card-text">
Акушерство, Гинекологија, Кардиоваскуларно, Радиологија.
</p>
</div>
<div class="card-footer">
Спецификации
</div>
</div>
</div>
<div class="col-md-4 mb-5 d-flex align-items-stretch">
<div class="card h-100">
<img class="card-img-top" src="img\hs60.jpg" alt="" />
<div class="card-body">
<h4 class="card-title">HS60</h4>
<p class="card-text">Акушерство, Гинекологија, Кардиоваскуларно.</p>
</div>
<div class="card-footer">
Спецификации
</div>
</div>
</div>
<div class="col-md-4 mb-5 d-flex align-items-stretch">
<div class="card h-100">
<img class="card-img-top" src="img\hs50.jpg" alt="" />
<div class="card-body">
<h4 class="card-title">HS50</h4>
<p class="card-text">Акушерство, Гинекологија, Кардиоваскуларно.</p>
</div>
<div class="card-footer">
Спецификации
</div>
</div>
</div>
<div class="col-md-4 mb-5 d-flex align-items-stretch">
<div class="card h-100">
<img class="card-img-top" src="img\hs40.jpg" alt="" />
<div class="card-body">
<h4 class="card-title">HS40</h4>
<p class="card-text">Акушерство, Гинекологија, Кардиоваскуларно.</p>
</div>
<div class="card-footer">
Спецификации
</div>
</div>
</div>
<div class="col-md-4 mb-5 d-flex align-items-stretch">
<div class="card h-100">
<img class="card-img-top" src="img\hs30.jpg" alt="" />
<div class="card-body">
<h4 class="card-title">HS30</h4>
<p class="card-text">Акушерство, Гинекологија, Кардиоваскуларно.</p>
</div>
<div class="card-footer">
Спецификации
</div>
</div>
</div>
<div class="col-md-4 mb-5 d-flex align-items-stretch">
<div class="card h-100">
<img class="card-img-top" src="img\hm70a.jpg" alt="" />
<div class="card-body">
<h4 class="card-title">HM70A with Plus</h4>
<p class="card-text">
Акушерство, Гинекологија, Кардиоваскуларно, Точка на Грижење.
</p>
</div>
<div class="card-footer">
Спецификации
</div>
</div>
</div>
<div class="col-md-4 mb-5 d-flex align-items-stretch">
<div class="card h-100">
<img class="card-img-top" src="img\h60.jpg" alt="" />
<div class="card-body">
<h4 class="card-title">H60</h4>
<p class="card-text">Акушерство, Гинекологија.</p>
</div>
<div class="card-footer">
Спецификации
</div>
</div>
</div>
<div class="col-md-4 mb-5 d-flex align-items-stretch">
<div class="card h-100">
<img class="card-img-top" src="img\sonoacer7.jpg" alt="" />
<div class="card-body">
<h4 class="card-title">Sonoace R7</h4>
<p class="card-text">Акушерство, Гинекологија.</p>
</div>
<div class="card-footer">
Спецификации
</div>
</div>
</div>
</div>

Related

Bootstrap Card images are not contained perfectly around corners

I'm trying to build a portfolio with bootstrap cards where images are also required to be displayed.
Problem is that images are not contained properly within bootstrap card around corners(with class="card-img-top") like some cards are not rounded or some images are not rounded but cards are rounded(tried class="img-rounded").
Kindly zoom in on the images to see the difference. Below are some snippets (and code is given below the snippets):-
Perfect card with image:-
Yellow-> difference
Bug-1:-
Bug-2:-
Bug-3:-
Bug-4:-
Code:-
<%- include('partials/headHTML') %>
<link rel="stylesheet" href="/css/tourpackageStyles.css">
</head>
<!-- <%- include('partials/header') %> -->
<div class="Container">
<div class="container-fluid">
<div class="row">
<div class="col col-md-4">
<div class="card h-100">
<img src="https://cdn.pixabay.com/photo/2022/06/05/20/24/rome-7244828_960_720.jpg" alt="" class="card-img-top">
<div class="card-body">
<div class="card-title">Title-1</div>
</div>
<a target="_blank" rel="noopener noreffer" href="#" role="button"
class="btn btn-sm btn-secondary">Enquire</a>
</div>
</div>
<div class="col col-md-4">
<div class="card h-100">
<img src="/images/wildlife/wildlife_tour.jpg"
alt=""
class="card-img-top">
<div class="card-body">
<div class="card-title">Title- 2</div>
</div>
<a target="_blank" rel="noopener noreffer" href="#"
class="btn btn-sm btn-secondary">Enquire</a>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row row-cols-1 row-cols-md-3 row-cols-sm-2 gy-3">
<div class="col">
<div class="card h-100">
<img src="https://cdn.pixabay.com/photo/2022/06/05/20/24/rome-7244828_960_720.jpg" alt="" class="card-img-top">
<div class="card-body">
<div class="card-title">
Title- 3
</div>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="https://cdn.pixabay.com/photo/2022/06/05/20/24/rome-7244828_960_720.jpg" alt="" class="card-img-top">
<div class="card-body">
<div class="card-title">
Title- 4
</div>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="https://cdn.pixabay.com/photo/2022/06/05/20/24/rome-7244828_960_720.jpg" alt="" class="card-img-top">
<div class="card-body">
<div class="card-title">
Title- 5
</div>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="" alt="">
<div class="card-body">
<div class="card-title">
Title- 6
</div>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="" alt="">
<div class="card-body">
<div class="card-title">
Title- 7
</div>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="" alt="">
<div class="card-body">
<div class="card-title">
Title- 8
</div>
</div>
</div>
</div>
</div>
</div>
</div>

If you wish to display only image while using card then place image inside card-body to achieve what you want and give card class "overflow-hidden". Because if you use "card-img-top" and then it has only border-top-left-radius and border-top-right-radius so image wouldn't be rounded on bottom.so you have to provide border-radius manually to both bottom side.
<div class="card overflow-hidden">
<div class="card-body">
<img class="img-fluid" src="" alt="">
</div>
</div>
For more information refer official docs https://getbootstrap.com/docs/5.2/components/card/

Break the cards by 2 vertical on small screens with the header above the two

I have cards that breaks incorrectly and would like on wide screens to shot the 4 then smaller bread with two columns but the correct header above them.
My jsfiddle is here:
jsfiddle.net/ad5qa/41tbgk75/
I am not sure how to break them by the columns.
<div class="container m-3">
<div class="row row-cols-1 row-cols-sm-2 g-4 text-center">
<div class="col mb-2">
<div class="card h-100">
<div class="card-text">
<h5 class="card-title">Preparacao</h5>
</div>
</div>
</div>
<div class="col mb-2">
<div class="card h-100">
<div class="card-text">
<h5 class="card-title">Pos</h5>
</div>
</div>
</div>
</div>
<div class="row row-cols-1 row-cols-sm-4 g-4 text-center">
<div class="col">
<div class="card h-100">
<i class="bi bi-wrench-adjustable card-icon"></i>
</div>
</div>
<div class="col">
<div class="card h-100">
<i class="bi bi-shield-lock card-icon"></i>
</div>
</div>
<div class="col">
<div class="card h-100">
<i class="bi bi-heart-pulse card-icon "></i>
</div>
</div>
<div class="col">
<div class="card h-100">
<i class="bi bi-fingerprint card-icon"></i>
</div>
</div>
</div>
</div>

col is pretty vague when it comes to having a responsive Bootstrap layout. You should replace col with col-lg-3 for larger screens to keep the four in a row and then col-md-6 and col-sm-6 for medium and smaller screens to have them be rows of two as desired.
.card-icon {
font-size: 40px;
text-align: center;
color: #e45e24;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.8.1/font/bootstrap-icons.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.3.1/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.3/js/bootstrap.min.js"></script>
<html>
<head>
</head>
<body>
<div class="d-flex justify-content-center">
<div class="container m-3">
<div class="row row-cols-1 row-cols-sm-2 g-4 text-center">
<div class="col mb-2">
<div class="card h-100">
<div class="card-text">
<h5 class="card-title">Preparação</h5>
</div>
</div>
</div>
<div class="col mb-2">
<div class="card h-100">
<div class="card-text">
<h5 class="card-title">Pós</h5>
</div>
</div>
</div>
</div>
<div class="row row-cols-1 row-cols-sm-4 g-4 text-center">
<div class="col-sm-6 col-lg-3 col-md-6">
<div class="card h-100">
<i class="bi bi-wrench-adjustable card-icon"></i>
<div class="card-body">
<h5 class="card-title">Title</h5>
<div class="card-text">
<ul class="subdescription">
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-lg-3 col-md-6">
<div class="card h-100">
<i class="bi bi-shield-lock card-icon"></i>
<div class="card-body">
<h5 class="card-title">Title</h5>
<div class="card-text">
<ul class="subdescription">
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-lg-3 col-md-6">
<div class="card h-100">
<i class="bi bi-heart-pulse card-icon "></i>
<div class="card-body">
<h5 class="card-title">Title</h5>
<div class="card-text">
<ul class="subdescription">
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-lg-3 col-md-6">
<div class="card h-100">
<i class="bi bi-fingerprint card-icon"></i>
<div class="card-body">
<h5 class="card-title">Title</h5>
<div class="card-text">
<ul class="subdescription">
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

The layout you are trying to achieve is a parent grid with 2 columns that stack to one on small. Each of those parent columns have a nested row containing 2 columns at every size (.col-6). The parent grid row can be .row.row-cols-1.row-cols-sm-2 with 2 .col OR just a .row with 2 .col-12.col-sm-6.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="container p-3">
<div class="row row-cols-1 row-cols-sm-2 g-4 text-center">
<div class="col">
<div class="card mb-2">
<div class="card-text">
<h5 class="card-title">One</h5>
</div>
</div>
<div class="row">
<div class="col-6">
<div class="card">
1
</div>
</div>
<div class="col-6">
<div class="card">
2
</div>
</div>
</div>
</div>
<div class="col">
<div class="card mb-2">
<div class="card-text">
<h5 class="card-title">Two</h5>
</div>
</div>
<div class="row">
<div class="col-6">
<div class="card">
3
</div>
</div>
<div class="col-6">
<div class="card">
4
</div>
</div>
</div>
</div>
</div>
</div>

Can you guys help me? Why did the bootstrap card stick left in mobile view

I did anything but it still won't work. Maybe you guys can help me?
Here are some photos.
BEFORE
AFTER
I want the card to stay in the middle when I view it in mobile size.
maybe there are some codes that I miss?
I would like to thank you so much if someone solved it for me.
I'm still new using bootstrap and not really pro at HTML and CSS.
here are the codes.
<!-- Members Card -->
<div class="container my-5">
<h1 class="text-center mb-3"><b>MEMBERS</b></h1>
<div class="d-flex justify-content-around">
<div class="row">
<!-- Jennie -->
<div class="col-md col-sm">
<div class="card" style="width: 15rem;">
<img src="{image}" class="card-img-top" alt="...">
<div class="card-body text-center">
<h5 class="card-title"><b>{Name}</b></h5>
<p class="card-text">{desc}</p>
show more
</div>
</div>
</div>
<!-- Jisoo -->
<div class="col-md col-sm">
<div class="card" style="width: 15rem;">
<img src="{image}" class="card-img-top" alt="...">
<div class="card-body text-center">
<h5 class="card-title"><b>{Name}</b></h5>
<p class="card-text">{desc}</p>
show more
</div>
</div>
</div>
<!-- Lisa -->
<div class="col-md col-sm">
<div class="card" style="width: 15rem;">
<img src="{image}" class="card-img-top" alt="...">
<div class="card-body text-center">
<h5 class="card-title"><b>{Name}</b></h5>
<p class="card-text">{desc}</p>
show more
</div>
</div>
</div>
<!-- Rose -->
<div class="col-md col-sm">
<div class="card" style="width: 15rem;">
<img src="{image}" class="card-img-top" alt="...">
<div class="card-body text-center">
<h5 class="card-title"><b>{Name}</b></h5>
<p class="card-text">{desc}</p>
show more
</div>
</div>
</div>
</div> <!--close tag for row-->
</div> <!--close tag for d-flex -->
</div> <!--close tag for container-->
<!-- End Members Card -->

Just Add classnames d-flex justify-content-center near every col-md col-sm
(i.e) col-md col-sm d-flex justify-content-center
Example:

Add margin-left: auto; margin-right: auto; to the .card inside media query for mobile.

You are using bootstrap, you need add the class mx-auto to each div class="card"and that's it.
Source: bootstrap docs
Copy this code, this is your fixed code:
<h1 class="text-center mb-3"><b>MEMBERS</b></h1>
<div class="d-flex justify-content-around">
<div class="row">
<!-- Jennie -->
<div class="col-md col-sm">
<div class="card mx-auto" style="width: 15rem;">
<img src="{image}" class="card-img-top" alt="...">
<div class="card-body text-center">
<h5 class="card-title"><b>{Name}</b></h5>
<p class="card-text">{desc}</p>
show more
</div>
</div>
</div>
<!-- Jisoo -->
<div class="col-md col-sm">
<div class="card mx-auto" style="width: 15rem;">
<img src="{image}" class="card-img-top" alt="...">
<div class="card-body text-center">
<h5 class="card-title"><b>{Name}</b></h5>
<p class="card-text">{desc}</p>
show more
</div>
</div>
</div>
<!-- Lisa -->
<div class="col-md col-sm">
<div class="card mx-auto" style="width: 15rem;">
<img src="{image}" class="card-img-top" alt="...">
<div class="card-body text-center">
<h5 class="card-title"><b>{Name}</b></h5>
<p class="card-text">{desc}</p>
show more
</div>
</div>
</div>
<!-- Rose -->
<div class="col-md col-sm">
<div class="card mx-auto" style="width: 15rem;">
<img src="{image}" class="card-img-top" alt="...">
<div class="card-body text-center">
<h5 class="card-title"><b>{Name}</b></h5>
<p class="card-text">{desc}</p>
show more
</div>
</div>
</div>
</div> <!--close tag for row-->
</div> <!--close tag for d-flex -->

How to add gap between cards

I need space between the cards as shown in the picture, how do I add spacing so that structure remains the same
<div class="container" style="padding: 16px;">
<div class="row">
<div class="center">
<div class="card text-white bg-primary mb-r" style="width:100px;height:100px;margin: auto;">
<div class="card-body">
<h4 class="card-title">DEL</h4>
<h7 class="card-text" style="align-content:flex-end">916</h7>
</div>
</div>
</div>
<div class="center">
<div class="card text-white bg-primary mb-r" style="width:100px;height:100px;margin: auto;">
<div class="card-body">
<h4 class="card-title">DEL</h4>
<h7 class="card-text" style="align-content:flex-end">916</h7>
</div>
</div>
</div>
<div class="center">
<div class="card text-white bg-primary" style="width:100px;height:100px;margin: auto;">
<div class="card-body">
<h4 class="card-title">DEL</h4>
<h7 class="card-text" style="align-content:flex-end">916</h7>
</div>
</div>
</div>
<div class="center">
<div class="card text-white bg-primary" style="width:100px;height:100px;margin: auto;">
<div class="card-body">
<h4 class="card-title">DEL</h4>
<h7 class="card-text" style="align-content:flex-end">916</h7>
</div>
</div>
</div>
</div>
</div>
The picture below is the code I have written, I need spacing between them.

To have spacing between cards just use standard Bootstrap layout, that is using row and columns. Columns have gutters by default. Read more: https://getbootstrap.com/docs/4.3/layout/overview/
There were many errors like <h7> tags, using incorrect css properties etc. Just go through my code and see the changes I made.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div class="container">
<div class="row">
<div class="col-3">
<div class="card w-100 text-white bg-primary">
<div class="card-body">
<h4 class="card-title">DEL</h4>
<h6 class="card-text">916</h6>
</div>
</div>
</div>
<div class="col-3">
<div class="card w-100 text-white bg-primary">
<div class="card-body">
<h4 class="card-title">DEL</h4>
<h6 class="card-text">916</h6>
</div>
</div>
</div>
<div class="col-3">
<div class="card w-100 text-white bg-primary">
<div class="card-body">
<h4 class="card-title">DEL</h4>
<h6 class="card-text">916</h6>
</div>
</div>
</div>
<div class="col-3">
<div class="card w-100 text-white bg-primary">
<div class="card-body">
<h4 class="card-title">DEL</h4>
<h6 class="card-text">916</h6>
</div>
</div>
</div>
</div>
</div>

I know you asked that the structure didn't change however I believe some edits needed to be made, here is a jsFiddle with some suggestions: https://jsfiddle.net/kcozqd9L/2/
CSS
.container{
padding: 16px;
}
.card{
position: relative;
display: inline-block;
width:100px;
height:100px;
margin: auto;
}
/*.card-body{
}
.card-title{
}*/
.card-text{
align-content:flex-end
}
HTML
<!--
Bootstrap docs: https://getbootstrap.com/docs
-->
<div class="container">
<div class="row">
<div class="center">
<div class="card text-white bg-primary mb-r">
<div class="card-body">
<h4 class="card-title">DEL</h4>
<h6 class="card-text">916</h6>
</div>
</div>
<div class="card text-white bg-primary mb-r">
<div class="card-body">
<h4 class="card-title">DEL</h4>
<h6 class="card-text">916</h6>
</div>
</div>
<div class="card text-white bg-primary">
<div class="card-body">
<h4 class="card-title">DEL</h4>
<h6 class="card-text">916</h6>
</div>
</div>
<div class="card text-white bg-primary">
<div class="card-body">
<h4 class="card-title">DEL</h4>
<h6 class="card-text">916</h6>
</div>
</div>
</div>
</div>
</div>

how to organise the card-deck body

I have card-deck like this
I want to organise these boxs : that the box Total width = Amazon Cost width + BOXI+ width :
below is my code
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-flex flex-column justify-content-center align-items-center h-100">
<div class="card-deck w-55">
<div class="card text-center">
<div class="card-header">
<h5 >Amazon Costs</h5>
</div>
<div class="card-body">
<h5 id="amc" class="card-title"></h5>
</div>
</div>
<div class="card text-center">
<div class="card-header">
<h5 >BOXI+</h5>
</div>
<div class="card-body">
<h5 id="boxiP" class="card-title"></h5>
</div>
</div>
</div>
<div class="card text-center">
<div class="card-header">
<h5 >Total</h5>
</div>
<div class="card-body">
<h5 id="tt" class="card-title"></h5>
</div>
</div>
</div>

Add a full width DIV (<div class="w-100"></div>) before the last card...
<div class="d-flex flex-column justify-content-center align-items-center h-100">
<div class="card-deck">
<div class="card text-center">
<div class="card-header">
<h5>Amazon Costs</h5>
</div>
<div class="card-body">
<h5 id="amc" class="card-title"></h5>
</div>
</div>
<div class="card text-center">
<div class="card-header">
<h5>BOXI+</h5>
</div>
<div class="card-body">
<h5 id="boxiP" class="card-title"></h5>
</div>
</div>
<div class="w-100"></div>
<div class="card text-center">
<div class="card-header">
<h5>Total</h5>
</div>
<div class="card-body">
<h5 id="tt" class="card-title"></h5>
</div>
</div>
</div>
</div>
https://www.codeply.com/go/PaLq3R5eXR