how to organise the card-deck body - html

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

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>

Why does my Bootstrap stretched link extend out several levels?

I am trying to stretched link for my nested div but it is including even parent. I need only listItem to be clickable but this makes entire card div clickable.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<div class="container-fluid">
<div class="row">
<div class="col-xs-8">
<div class="col-xl-12 col-md-12 mb-3 mt-2">
<div class="card custom-bg-2 h-100">
<div class="card-header bg-secondary">
<h3 class="fw-bold text-white text-center">Page Title</h3>
</div>
<div class="card-body">
<div class="listItem">
<img src="https://via.placeholder.com/100" class="rounded" alt="Title">
<p><span class="badge bg-secondary text-light" style="font-size: large;">Title</span></p>
<p><span class="badge bg-secondary ms-2">Views</span></p>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-4">
<div class="row">
<div class="col-xl-12 col-md-8 mb-3 mt-2">
<div class="card custom-bg-2 h-100">
<div class="card-header bg-secondary">
<h3 class="fw-bold text-white">Category</h3>
</div>
<div class="card-body">
....
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Per the Bootstrap docs (and the fundamental rules of absolute positioning), stretched links apply to the nearest element with non-static positioning. You can put the position-relative class on the parent to make that so.
I've also replaced your inline font size styles with the lead class on the parent paragraph. Just don't use inline styles, especially when your style library provides typography classes for that.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<div class="container-fluid">
<div class="row">
<div class="col-xs-8">
<div class="col-xl-12 col-md-12 mb-3 mt-2">
<div class="card custom-bg-2 h-100">
<div class="card-header bg-secondary">
<h3 class="fw-bold text-white text-center">Page Title</h3>
</div>
<div class="card-body">
<div class="listItem position-relative">
<img src="https://via.placeholder.com/100" class="rounded" alt="Title">
<p class="lead"><span class="badge bg-secondary text-light">Title</span></p>
<p><span class="badge bg-secondary ms-2">Views</span></p>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-4">
<div class="row">
<div class="col-xl-12 col-md-8 mb-3 mt-2">
<div class="card custom-bg-2 h-100">
<div class="card-header bg-secondary">
<h3 class="fw-bold text-white">Category</h3>
</div>
<div class="card-body">
....
</div>
</div>
</div>
</div>
</div>
</div>
</div>

How to set the backgroundcolor of a Bootstrap card fo the whole column?

I've got a questtion about the Bootstrap Card Deck.
I create a Card Deck with two cards in a row. On the first card I've got some text under the header and in the second card there is no text under the header. In this case the grey color does not fill the whole card as you can see in the example. How can I fix it, that the hole column is also grey?
Thanks for your help!
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.11.0/css/mdb.min.css">
<div class="card-deck mb-5">
<a href="#" class="card hoverable">
<div class="card-body p-0">
<div class="row mx-0">
<div class="col-md-8 grey lighten-4 rounded-left pt-2">
<h5 class="font-weight-bold">Header</h5>
<p class="font-weight-light text-muted mb-2">Some text</p>
</div>
<div class="col-md-4 text-center pt-3">
<p class="h2 font-weight-normal">60</p>
</div>
</div>
</div>
</a>
<a href="#" class="card hoverable">
<div class="card-body p-0">
<div class="row mx-0">
<div class="col-md-8 grey lighten-4 rounded-left pt-2">
<h5 class="font-weight-bold">Header</h5>
<!-- <p class="font-weight-light text-muted mb-2">No text</p> -->
</div>
<div class="col-md-4 text-center pt-3">
<p class="h2 font-weight-normal">50</p>
</div>
</div>
</div>
</a>
</div>

If you want to have the height be equals the container, you can use h-100 on the div row mx-0.
More information can be found here: https://getbootstrap.com/docs/4.0/utilities/sizing/
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.11.0/css/mdb.min.css">
<div class="card-deck mb-5">
<a href="#" class="card hoverable">
<div class="card-body p-0">
<div class="row mx-0">
<div class="col-md-8 grey lighten-4 rounded-left pt-2">
<h5 class="font-weight-bold">Header</h5>
<p class="font-weight-light text-muted mb-2">Some text</p>
</div>
<div class="col-md-4 text-center pt-3">
<p class="h2 font-weight-normal">60</p>
</div>
</div>
</div>
</a>
<a href="#" class="card hoverable">
<div class="card-body p-0">
<div class="row h-100 mx-0">
<div class="col-md-8 grey lighten-4 rounded-left pt-2">
<h5 class="font-weight-bold">Header</h5>
<!-- <p class="font-weight-light text-muted mb-2">No text</p> -->
</div>
<div class="col-md-4 text-center pt-3">
<p class="h2 font-weight-normal"></p>
</div>
</div>
</div>
</a>
</div>

Ideally you should not play around with left/right margins of row and col in bootstrap. You should use no-gutters class with row to have the effect you want. Additionally, you should add h-100 on the second row to take full height. Also a better way to center align your number is like I have done in the snippet by using justify-content-center d-flex align-items-center.
Also your code was missing a container element so that scrollbar was coming in your snippet. I have added that too.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.11.0/css/mdb.min.css">
<div class="container">
<div class="card-deck mb-5">
<a href="#" class="card hoverable">
<div class="card-body p-0">
<div class="row h-100 no-gutters">
<div class="col-md-8 grey lighten-4 rounded-left">
<h5 class="font-weight-bold p-2">Header</h5>
<p class="font-weight-light text-muted mb-2 px-2">Some text</p>
</div>
<div class="col-md-4 text-center justify-content-center d-flex align-items-center">
<p class="h2 font-weight-normal">60</p>
</div>
</div>
</div>
</a>
<a href="#" class="card hoverable">
<div class="card-body p-0">
<div class="row h-100 no-gutters">
<div class="col-md-8 grey lighten-4 rounded-left">
<h5 class="font-weight-bold p-2">Header</h5>
<!-- <p class="font-weight-light text-muted mb-2 px-2">No text</p> -->
</div>
<div class="col-md-4 text-center justify-content-center d-flex align-items-center">
<p class="h2 font-weight-normal">50</p>
</div>
</div>
</div>
</a>
</div>
</div>
Please check the code differences https://i.stack.imgur.com/0Q2IX.png

Using anchor tag as it will not consider a height and width so you have to set a class in card-body using this class="card-body p-0 grey lighten-4".
Remove the class "grey lighten-4" from class="col-md-8 rounded-left pt-2" & set to class="card-body p-0 grey lighten-4"
.grey {
background-color: #f5f5f5 !important;
}
/*OR*/
.grey.lighten-4 {
background-color: #f5f5f5 !important;
}
<div class="card-deck mb-5">
<a href="#" class="card hoverable">
<div class="card-body p-0 grey lighten-4">
<div class="row mx-0">
<div class="col-md-8 rounded-left pt-2">
...
</div>
<div class="col-md-4 text-center pt-3">
...
</div>
</div>
</div>
</a>
</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>