horizontal scroll for cards items - html

I am using a tempalte downloaded from tabler and you can see the demo of that template at https://preview.tabler.io/ and i want to scroll small cards left and right at present they are 6 if i will increased its count then they are displaying below but i want them in a row that can be scrollable horizontally.
<div class="row row-cards">
<div class="col-6 col-sm-4 col-lg-2">
<div class="card">
<div class="card-body p-3 text-center">
<div class="text-right text-green">
6%
<i class="fe fe-chevron-up"></i>
</div>
<div class="h1 m-0">43</div>
<div class="text-muted mb-4">New Tickets</div>
</div>
</div>
</div>
<div class="col-6 col-sm-4 col-lg-2">
<div class="card">
<div class="card-body p-3 text-center">
<div class="text-right text-red">
-3%
<i class="fe fe-chevron-down"></i>
</div>
<div class="h1 m-0">17</div>
<div class="text-muted mb-4">Closed Today</div>
</div>
</div>
</div>
<div class="col-6 col-sm-4 col-lg-2">
<div class="card">
<div class="card-body p-3 text-center">
<div class="text-right text-green">
9%
<i class="fe fe-chevron-up"></i>
</div>
<div class="h1 m-0">7</div>
<div class="text-muted mb-4">New Replies</div>
</div>
</div>
</div>
<div class="col-6 col-sm-4 col-lg-2">
<div class="card">
<div class="card-body p-3 text-center">
<div class="text-right text-green">
3%
<i class="fe fe-chevron-up"></i>
</div>
<div class="h1 m-0">27.3K</div>
<div class="text-muted mb-4">Followers</div>
</div>
</div>
</div>
<div class="col-6 col-sm-4 col-lg-2">
<div class="card">
<div class="card-body p-3 text-center">
<div class="text-right text-red">
-2%
<i class="fe fe-chevron-down"></i>
</div>
<div class="h1 m-0">$95</div>
<div class="text-muted mb-4">Daily Earnings</div>
</div>
</div>
</div>
<div class="col-6 col-sm-4 col-lg-2">
<div class="card">
<div class="card-body p-3 text-center">
<div class="text-right text-red">
-1%
<i class="fe fe-chevron-down"></i>
</div>
<div class="h1 m-0">621</div>
<div class="text-muted mb-4">Products</div>
</div>
</div>
</div>
</div>


I would suggest that you use the tag containing images, within an IFrame, to allow scrolling:
Index.htm
<iframe src="images.htm"></iframe>
images.htm
<span><img src="IMAGE.png"></img><img src="IMAGE.png"></img><img src="IMAGE.png"></img></span>
This is just a thing I wrote off the top of my head, it may have problems


Based on Overflow-x not working
.row {
width: 100%; /* Your choice*/
overflow-x: auto;
white-space: nowrap;
}
.row>div {
border: 1px solid;
min-width: 150px; /* Your choice*/
display: inline-block;
}
<div class="row row-cards">
<div class="col-6 col-sm-4 col-lg-2">
<div class="card">
<div class="card-body p-3 text-center">
<div class="text-right text-green">
6%
<i class="fe fe-chevron-up"></i>
</div>
<div class="h1 m-0">43</div>
<div class="text-muted mb-4">New Tickets</div>
</div>
</div>
</div>
<div class="col-6 col-sm-4 col-lg-2">
<div class="card">
<div class="card-body p-3 text-center">
<div class="text-right text-red">
-3%
<i class="fe fe-chevron-down"></i>
</div>
<div class="h1 m-0">17</div>
<div class="text-muted mb-4">Closed Today</div>
</div>
</div>
</div>
<div class="col-6 col-sm-4 col-lg-2">
<div class="card">
<div class="card-body p-3 text-center">
<div class="text-right text-green">
9%
<i class="fe fe-chevron-up"></i>
</div>
<div class="h1 m-0">7</div>
<div class="text-muted mb-4">New Replies</div>
</div>
</div>
</div>
<div class="col-6 col-sm-4 col-lg-2">
<div class="card">
<div class="card-body p-3 text-center">
<div class="text-right text-green">
3%
<i class="fe fe-chevron-up"></i>
</div>
<div class="h1 m-0">27.3K</div>
<div class="text-muted mb-4">Followers</div>
</div>
</div>
</div>
<div class="col-6 col-sm-4 col-lg-2">
<div class="card">
<div class="card-body p-3 text-center">
<div class="text-right text-red">
-2%
<i class="fe fe-chevron-down"></i>
</div>
<div class="h1 m-0">$95</div>
<div class="text-muted mb-4">Daily Earnings</div>
</div>
</div>
</div>
<div class="col-6 col-sm-4 col-lg-2">
<div class="card">
<div class="card-body p-3 text-center">
<div class="text-right text-red">
-1%
<i class="fe fe-chevron-down"></i>
</div>
<div class="h1 m-0">621</div>
<div class="text-muted mb-4">Products</div>
</div>
</div>
</div>
</div>

Related

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>

how to disable auto scrolling when going to a section using anchor links?

I made these vertical tabs using HTML + CSS only (because I'm challenging myself not to use ANY SCRIPTING AT ALL). It works but I can't disable the automatic scrolling when I open a section and click on a different section.
I know it's a natural behavior to jump on a different section when using anchor links, but I want to disable this so it would look like normal vertical tabs with scripts on it.
Here's my CodePen for this.
https://codepen.io/bosskeito/pen/qBXzdpX
I'm working on Drupal CMS with Bootstrap 4.6.1
.cstmTabTargetVertical:not(:target) {
display: none;
}
.cstmTabTargetVertical:target {
display: block;
}
.cstmTabBtn {
border-radius: 0 !important;
}
.cstmTabVertical .cstmTabBtn {
width: 100%;
}
.cstmTabTargetVertical:before {
content: "";
display: block;
height: 100px;
margin: -100px 0 0 0;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.1/css/bootstrap-grid.min.css" integrity="sha512-Xj2sd25G+JgJYwo0cvlGWXoUekbLg5WvW+VbItCMdXrDoZRWcS/d40ieFHu77vP0dF5PK+cX6TIp+DsPfZomhw==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.1/css/bootstrap-reboot.min.css" integrity="sha512-ioOlrrQQ3fZN/A7N2rZVm6JXp/Lg7xtda9OaRKornjBcuTW/UqIhTlPyngcGQGrQTOhJgmSltKM4v3Ne03WPug==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.1/css/bootstrap.min.css" integrity="sha512-T584yQ/tdRR5QwOpfvDfVQUidzfgc2339Lc8uBDtcp/wYu80d7jwBgAxbyMh0a9YM9F8N3tdErpFI8iaGx6x5g==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<div class="dFullWidth">
<div class="row">
<div class="col-lg-12 px-0 dBGLightGray">
<div class="container-fluid px-0">
<div class="dContainer1270">
<div class="row mx-auto cstmMobileNarrow">
<div class="col-md-12 my-3">
<p class="dh2 dFontDarkGray mb-0 pb-4">General Information Sheet 1</p>
</div>
<div class="col-md-2 cstmTabVertical">
<a href="#GSI_2021" class="cstmTabBtn mb-2 animButtonSlide animSlideLeft animHover dButtonWhite">
<p class="dh5 mb-0 dFontOrange animHover">2021</p>
</a>
<a href="#GSI_2020" class="cstmTabBtn mb-2 animButtonSlide animSlideLeft animHover dButtonWhite">
<p class="dh5 mb-0 dFontOrange animHover">2020</p>
</a>
</div>
<div class="col-md-10">
<div class="cstmTabTargetVertical" id="GSI_2021">
<div class="row container-fluid px-3">
<div class="col-lg-12">
<p class="dh2 dFontDarkGray pb-4 mb-0">2021</p>
</div>
<div class="col-md-6">
<div class="row container-fluid px-0">
<div class="col-md-12 py-3 px-0">
<div class="row cstmMobileNarrow">
<div class="col-md">
<p class="m-0 dh5"><a class="dLinkOrange animHover" href="https://www.facebook.com/" target="_blank">placeholder link 1</a></p>
<p class="m-0 dp">November 18, 2021</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="cstmTabTargetVertical" id="GSI_2020">
<div class="row container-fluid px-3">
<div class="col-lg-12">
<p class="dh2 dFontDarkGray pb-4 mb-0">2020</p>
</div>
<div class="col-md-6">
<div class="row container-fluid px-0">
<div class="col-md-12 py-3 px-0">
<div class="row cstmMobileNarrow">
<div class="col-md">
<p class="m-0 dh5"><a class="dLinkOrange animHover" href="https://www.facebook.com/" target="_blank">placeholder link 2</a></p>
<p class="m-0 dp">November 18, 2021</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="dFullWidth">
<div class="row">
<div class="col-lg-12 px-0 dBGLightGray">
<div class="container-fluid px-0">
<div class="dContainer1270 py-5">
<div class="row mx-auto py-5 cstmMobileNarrow">
<div class="col-md-12 my-3">
<p class="dh2 dFontDarkGray mb-0 pb-4">General Information Sheet 2</p>
</div>
<div class="col-md-2 cstmTabVertical">
<a href="#GSA_2021" class="cstmTabBtn mb-2 animButtonSlide animSlideLeft animHover dButtonWhite">
<p class="dh5 mb-0 dFontOrange animHover">2021</p>
</a>
<a href="#GSA_2020" class="cstmTabBtn mb-2 animButtonSlide animSlideLeft animHover dButtonWhite">
<p class="dh5 mb-0 dFontOrange animHover">2020</p>
</a>
</div>
<div class="col-md-10">
<div class="cstmTabTargetVertical" id="GSA_2021">
<div class="row container-fluid px-3">
<div class="col-lg-12">
<p class="dh2 dFontDarkGray pb-4 mb-0">2021</p>
</div>
<div class="col-md-6">
<div class="row container-fluid px-0">
<div class="col-md-12 py-3 px-0">
<div class="row cstmMobileNarrow">
<div class="col-md">
<p class="m-0 dh5"><a class="dLinkOrange animHover" href="https://www.facebook.com/" target="_blank">placeholder link 1</a></p>
<p class="m-0 dp">November 18, 2021</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="cstmTabTargetVertical" id="GSA_2020">
<div class="row container-fluid px-3">
<div class="col-lg-12">
<p class="dh2 dFontDarkGray pb-4 mb-0">2020</p>
</div>
<div class="col-md-6">
<div class="row container-fluid px-0">
<div class="col-md-12 py-3 px-0">
<div class="row cstmMobileNarrow">
<div class="col-md">
<p class="m-0 dh5"><a class="dLinkOrange animHover" href="https://www.facebook.com/" target="_blank">placeholder link 2</a></p>
<p class="m-0 dp">November 18, 2021</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="dFullWidth">
<div class="row">
<div class="col-lg-12 px-0 dBGLightGray">
<div class="container-fluid px-0">
<div class="dContainer1270">
<div class="row mx-auto cstmMobileNarrow">
<div class="col-md-12 my-3">
<p class="dh2 dFontDarkGray mb-0 pb-4">General Information Sheet 3</p>
</div>
<div class="col-md-2 cstmTabVertical">
<a href="#GSB_2021" class="cstmTabBtn mb-2 animButtonSlide animSlideLeft animHover dButtonWhite">
<p class="dh5 mb-0 dFontOrange animHover">2021</p>
</a>
<a href="#GSB_2020" class="cstmTabBtn mb-2 animButtonSlide animSlideLeft animHover dButtonWhite">
<p class="dh5 mb-0 dFontOrange animHover">2020</p>
</a>
</div>
<div class="col-md-10">
<div class="cstmTabTargetVertical" id="GSB_2021">
<div class="row container-fluid px-3">
<div class="col-lg-12">
<p class="dh2 dFontDarkGray pb-4 mb-0">2021</p>
</div>
<div class="col-md-6">
<div class="row container-fluid px-0">
<div class="col-md-12 py-3 px-0">
<div class="row cstmMobileNarrow">
<div class="col-md">
<p class="m-0 dh5"><a class="dLinkOrange animHover" href="https://www.facebook.com/" target="_blank">placeholder link 1</a></p>
<p class="m-0 dp">November 18, 2021</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="cstmTabTargetVertical" id="GSB_2020">
<div class="row container-fluid px-3">
<div class="col-lg-12">
<p class="dh2 dFontDarkGray pb-4 mb-0">2020</p>
</div>
<div class="col-md-6">
<div class="row container-fluid px-0">
<div class="col-md-12 py-3 px-0">
<div class="row cstmMobileNarrow">
<div class="col-md">
<p class="m-0 dh5"><a class="dLinkOrange animHover" href="https://www.facebook.com/" target="_blank">placeholder link 2</a></p>
<p class="m-0 dp">November 18, 2021</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Why button is overlapping with images in css?

I am new to web devlopment and stuck on this issue for quite some time now.
I wish to make a table(in 2nd col-6) with buttons at top and than changing content(scrollable cards) below it based on button click.
I tried to implement it but my cards and buttons overlap how to tackle this and overlapping makes buttons non reactive.
<div class="Container">
<div class="row">
<div class="col-md-6 ">
<div > this is the table</div>
</div>
<div class="col-md-6 ">
<div class="container">
<div >
<div v-for="(eachbutton, index) in getbuttons" :key="index" style="color:#ffff">
<button class="tablink" style="margin-bottom:12px" #click="changeList(eachWidget.displayTitle)" id="defaultOpen">{{eachbutton.displayTitle}}</button>
</div>
</div>
<div v-for="(each, index) in getCarddata" :key="index" style="color:#ffff">
<div class="col-md-4 col-12 " style="width: 200px; height:90px margin-top: 90px">
<div class="card mb-6" style="background-color: #050b06;">
<div class="row g-0 ">
<div class="col-md-6 col-6 w-100 h-100">
<img class="w-100 h-100" style="margin:11px" :src="each.ImageUrl" alt="..." />
</div>
<div class="col-md-6 col-6">
<p class="card-text text-episode" style="text-align: left; color:#fff;">
<small class="text-muted"> card</small>
</p>
<p class="card-text text-start" style="text-align: left;">
<small class="text-muted">text</small
>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

I hope you are using bootstrap 4 or higher, Try this
<div class="Container">
<div class="row">
<div class="col-md-6 ">
<div > this is the table</div>
</div>
<div class="col-md-6 ">
<div class="row">
<div class="col-md-12">
<div v-for="(eachbutton, index) in getbuttons" :key="index" style="color:#ffff">
<button class="tablink" style="margin-bottom:12px" #click="changeList(eachWidget.displayTitle)" id="defaultOpen">{{eachbutton.displayTitle}}</button>
</div>
</div>
<div class="col-md-12">
<div v-for="(each, index) in getCarddata" :key="index" style="color:#ffff">
<div class="col-md-4 col-12 " style="width: 200px; height:90px margin-top: 90px">
<div class="card mb-6" style="background-color: #050b06;">
<div class="row g-0 ">
<div class="col-md-6 col-6 w-100 h-100">
<img class="w-100 h-100" style="margin:11px" :src="each.ImageUrl" alt="..." />
</div>
<div class="col-md-6 col-6">
<p class="card-text text-episode" style="text-align: left; color:#fff;">
<small class="text-muted"> card</small>
</p>
<p class="card-text text-start" style="text-align: left;">
<small class="text-muted">text</small
>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

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 can I align these product cards to grid?

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>