<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="row">
<div class="card bg-light col-sm-3">
<div class="row">
<div class="card-header col-6 border">
<img src="https://cdn.pixabay.com/photo/2016/12/19/08/39/mobile-phone-1917737__340.jpg" class="img-fluid" />
</div>
<div class="card-body col-6 border">
<h5 class="card-title">1234567899</h5>
</div>
<div class="card-body col-12 border">
<h5 class="card-title">Go somewhere</h5>
</div>
</div>
</div>
<div class="card bg-light col-sm-3">
<div class="row">
<div class="card-header col-6 border">
<img src="https://cdn.pixabay.com/photo/2016/12/19/08/39/mobile-phone-1917737__340.jpg" class="img-fluid" />
</div>
<div class="card-body col-6 border">
<h5 class="card-title">1234567899</h5>
</div>
<div class="card-body col-12 border">
<h5 class="card-title">Go somewhere</h5>
</div>
</div>
</div>
<div class="card bg-light col-sm-3">
<div class="row">
<div class="card-header col-6 border">
<img src="https://cdn.pixabay.com/photo/2016/12/19/08/39/mobile-phone-1917737__340.jpg" class="img-fluid" />
</div>
<div class="card-body col-6 border">
<h5 class="card-title">1234567899</h5>
</div>
<div class="card-body col-12 border">
<h5 class="card-title">Go somewhere</h5>
</div>
</div>
</div>
<div class="card bg-light col-sm-3">
<div class="row">
<div class="card-header col-6 border">
<img src="https://cdn.pixabay.com/photo/2016/12/19/08/39/mobile-phone-1917737__340.jpg" class="img-fluid" />
</div>
<div class="card-body col-6 border">
<h5 class="card-title">1234567899</h5>
</div>
<div class="card-body col-12 border">
<h5 class="card-title">Go somewhere</h5>
</div>
</div>
</div>
</div>
There's a lot of empty space in card. I need it as:
You can do that by adding class="p-0 my-auto" to remove padding and to center vertical. Below is the working snippet for the same
.card-body {
display: flex;
align-items: center;
justify-content: center;
}
.card-body.col-6 {
background: red
}
#media(min-width:768px) {
.card-title {
font-size: 3vw;
text-align: center;
word-break: break-all;
}
.img-container {
height: 63px;
width: 100%;
object-fit: cover;
}
}
#media(max-width:767px) {
.card-title {
font-size: 8.5vw;
text-align: center;
word-break: break-all;
}
.img-container {
height: 80px;
width: 100%;
object-fit: cover;
}
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="container-fluid">
<div class="row">
<div class="card bg-light col-md-4">
<div class="row">
<div class="card-header col-6 border p-0">
<img src="https://cdn.pixabay.com/photo/2016/12/19/08/39/mobile-phone-1917737__340.jpg" class="img-container" />
</div>
<div class="card-body col-6 border p-0 ">
<h5 class="card-title text-center">1234567899</h5>
</div>
<div class="card-body col-12 border p-0">
Go somewhere
</div>
</div>
</div>
<div class="card bg-light col-md-4">
<div class="row">
<div class="card-header col-6 border p-0">
<img src="https://cdn.pixabay.com/photo/2016/12/19/08/39/mobile-phone-1917737__340.jpg" class="img-container" />
</div>
<div class="card-body col-6 border p-0 ">
<h5 class="card-title text-center">1234567899</h5>
</div>
<div class="card-body col-12 border p-0">
Go somewhere
</div>
</div>
</div>
<div class="card bg-light col-md-4">
<div class="row">
<div class="card-header col-6 border p-0">
<img src="https://cdn.pixabay.com/photo/2016/12/19/08/39/mobile-phone-1917737__340.jpg" class="img-container" />
</div>
<div class="card-body col-6 border p-0 ">
<h5 class="card-title text-center">1234567899</h5>
</div>
<div class="card-body col-12 border p-0">
Go somewhere
</div>
</div>
</div>
</div>
Solution-2: Answered as per the question in the comment.Giving fixed height to col. Below is the solution for the same
.card-body {
display: flex;
align-items: center;
justify-content: center;
}
.card-body.col-6 {
background: red
}
#media(min-width:768px) {
.card-title {
font-size: 3vw;
text-align: center;
word-break: break-all;
}
}
#media(max-width:767px) {
.card-title {
font-size: 8.5vw;
text-align: center;
word-break: break-all;
}
}
.col-6 {
height:65px;
}
.img-fluid {
height:100%!important;
}
.card-header.col-6{
background: black
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="container-fluid">
<div class="row">
<div class="card bg-light col-md-4">
<div class="row">
<div class="card-header col-6 border p-0 text-center">
<img src="https://cdn.pixabay.com/photo/2016/12/19/08/39/mobile-phone-1917737__340.jpg" class="img-fluid" />
</div>
<div class="card-body col-6 border p-0 ">
<h5 class="card-title text-center">1234567899</h5>
</div>
<div class="card-body col-12 border p-0">
Go somewhere
</div>
</div>
</div>
<div class="card bg-light col-md-4">
<div class="row">
<div class="card-header col-6 border p-0 text-center">
<img src="https://cdn.pixabay.com/photo/2016/12/19/08/39/mobile-phone-1917737__340.jpg" class="img-fluid" />
</div>
<div class="card-body col-6 border p-0 ">
<h5 class="card-title text-center">1234567899</h5>
</div>
<div class="card-body col-12 border p-0">
Go somewhere
</div>
</div>
</div>
<div class="card bg-light col-md-4">
<div class="row">
<div class="card-header col-6 border p-0 text-center">
<img src="https://cdn.pixabay.com/photo/2016/12/19/08/39/mobile-phone-1917737__340.jpg" class="img-fluid" />
</div>
<div class="card-body col-6 border p-0 ">
<h5 class="card-title text-center">1234567899</h5>
</div>
<div class="card-body col-12 border p-0">
Go somewhere
</div>
</div>
</div>
</div>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<style>
.card-title {
margin-bottom: 0;
}
</style>
<div class="row">
<div class="card bg-light col-sm-3">
<div class="row">
<div class="col-4 p-0 border">
<img src="https://cdn.pixabay.com/photo/2016/12/19/08/39/mobile-phone-1917737__340.jpg" class="img-fluid" />
</div>
<div class="col p-0 border text-center">
<h5 class="card-title">1234567899</h5>
</div>
<div class=" col-12 p-0 border">
<h5 class="card-title">Go somewhere</h5>
</div>
</div>
</div>
<div class="card bg-light col-sm-3">
<div class="row">
<div class="col-4 p-0 border">
<img src="https://cdn.pixabay.com/photo/2016/12/19/08/39/mobile-phone-1917737__340.jpg" class="img-fluid" />
</div>
<div class="col p-0 border text-center">
<h5 class="card-title">1234567899</h5>
</div>
<div class=" col-12 p-0 border">
<h5 class="card-title">Go somewhere</h5>
</div>
</div>
</div>
<div class="card bg-light col-sm-3">
<div class="row">
<div class="col-4 p-0 border">
<img src="https://cdn.pixabay.com/photo/2016/12/19/08/39/mobile-phone-1917737__340.jpg" class="img-fluid" />
</div>
<div class="col p-0 border text-center">
<h5 class="card-title">1234567899</h5>
</div>
<div class=" col-12 p-0 border">
<h5 class="card-title">Go somewhere</h5>
</div>
</div>
</div>
<div class="card bg-light col-sm-3">
<div class="row">
<div class="col-4 p-0 border">
<img src="https://cdn.pixabay.com/photo/2016/12/19/08/39/mobile-phone-1917737__340.jpg" class="img-fluid" />
</div>
<div class="col p-0 border text-center">
<h5 class="card-title">1234567899</h5>
</div>
<div class=" col-12 p-0 border">
<h5 class="card-title">Go somewhere</h5>
</div>
</div>
</div>
</div>
<section class="test">
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-4 col-sm-6 mb-3 ">
<div class="card bg-light">
<div class="card-body p-0">
<div class="row no-gutters">
<div class="col-lg-5 border">
<img src="https://cdn.pixabay.com/photo/2016/12/19/08/39/mobile-phone-1917737__340.jpg" class="img-fluid" />
</div>
<div class="col-lg-7 border px-3 pt-2">
<h5 class="card-title">1234567899</h5>
</div>
</div>
</div>
<div class="card-footer">
<h5 class="card-title">Go somewhere</h5>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 mb-3 ">
<div class="card bg-light">
<div class="card-body p-0">
<div class="row no-gutters">
<div class="col-lg-5 border">
<img src="https://cdn.pixabay.com/photo/2016/12/19/08/39/mobile-phone-1917737__340.jpg" class="img-fluid" />
</div>
<div class="col-lg-7 border px-3 pt-2">
<h5 class="card-title">1234567899</h5>
</div>
</div>
</div>
<div class="card-footer">
<h5 class="card-title">Go somewhere</h5>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 mb-3">
<div class="card bg-light">
<div class="card-body p-0">
<div class="row no-gutters">
<div class="col-lg-5 border">
<img src="https://cdn.pixabay.com/photo/2016/12/19/08/39/mobile-phone-1917737__340.jpg" class="img-fluid" />
</div>
<div class="col-lg-7 border px-3 pt-2">
<h5 class="card-title">1234567899</h5>
</div>
</div>
</div>
<div class="card-footer">
<h5 class="card-title">Go somewhere</h5>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 mb-3 ">
<div class="card bg-light">
<div class="card-body p-0">
<div class="row no-gutters">
<div class="col-lg-5 border">
<img src="https://cdn.pixabay.com/photo/2016/12/19/08/39/mobile-phone-1917737__340.jpg" class="img-fluid" />
</div>
<div class="col-lg-7 border px-3 pt-2">
<h5 class="card-title">1234567899</h5>
</div>
</div>
</div>
<div class="card-footer">
<h5 class="card-title">Go somewhere</h5>
</div>
</div>
</div>
</div>
</div>
</section>
Related
I am new to front end and struggling when resizing the screen .
I am using 4 cards(Performance,Quality,Availability,Availability) in a card-group class and wants to place two cards in a row when screen is on medium and 1 card in a row when screen is on small .
Below is my code
<div class="row">
<div class="card-group col-lg-8 col-md-12 col-sm-12">
<div class="card mb-4 mr-2 ml-2">
<div class="card-header">
<h4 class="mb-0">Performance</h4>
</div>
<div class="card-body">
<div id="gauge1"></div>
</div>
</div>
<div class="card mb-4 mr-2 ml-2">
<div class="card-header">
<h4 class="mb-0">Quality</h4>
</div>
<div class="card-body">
<div id="gauge2"></div>
</div>
</div>
<div class="card mb-4 mr-2 ml-2">
<div class="card-header">
<h4 class="mb-0">Availability</h4>
</div>
<div class="card-body">
<div id="gauge3"></div>
</div>
</div>
<div class="card mb-4 mr-2 ml-2">
<div class="card-header">
<h4 class="mb-0">OEE
</h4>
</div>
<div class="card-body">
<div id="gauge4" style="text-align: center"></div>
<div id="dvLabel" style="text-align: center; position: absolute; top: 52%; right: 48%; font-size: 25px">
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-12 col-sm-12">
<div class="card mb-4 mr-2" style="height: 119px">
<div class="card-header mt-4">
<h4 class="mb-0">Breakdown Hours</h4>
</div>
<div class="card-body ml-3 mr-3 text-center" style="background-color: #FFFFFF; color: #081A51; height: 50%">
<div>
<h3 class="mb-0"><%= Breakdown_Hours %></h3>
</div>
</div>
</div>
<div class="card mb-4 mr-2" style="height: 119px">
<div class="card-header mt-4">
<h4 class="mb-0">MTBF</h4>
</div>
<div class="card-body ml-3 mr-3 text-center" style="background-color: #FFFFFF; color: #081A51; height: 50%">
<div>
<h3 class="mb-0"><%= MTBF %></h3>
</div>
</div>
</div>
<div class="card mb-4 mr-2" style="height: 119px">
<div class="card-header mt-4">
<h4 class="mb-0">MTTR</h4>
</div>
<div class="card-body ml-3 mr-3 text-center" style="background-color: #FFFFFF; color: #081A51; height: 50%">
<div>
<h3 class="mb-0"><%= MTTR %></h3>
</div>
</div>
</div>
</div>
</div>
It is looking like this in a small screen
wherein I wanted to have these 4 cards placed below one other on small screen and 2 cards in case of medium. I am struggling to find the missing link .
Your second group misses the card-group class. Add it and the last three cards will be positioned side by side. If you want them be aligned with the ones on first row, you can just insert and empty card.
I'd like to order my bootstrap cards thus:
My code is this:
<div class="row ">
<div class="col-12 col-md-6 mb-1" style="height: 75vh;">
<div class="map svelte-xu5vn1" id="map">
...
</div>
<div class="col-12 col-md-6">
<div class="col-6">
<a rel="prefetch" href="communes/xxx/objects/Cykelhus">
<div class="card mr-1 mb-1">
<div class="card-body text-center">
<img class="card-img-top" src="img/300x300/cykelhus.thumb.jpg" alt="(image)">
<p class="card-text">Cykelhus</p>
</div>
</div>
</a>
</div>
<div class="col-6">
<a rel="prefetch" href="communes/brf_masthugget/objects/Sedumtak">
<div class="card mr-1 mb-1">
... as per the above
But I get this result:
What do I need to change?
Fixed it, I needed to add a <div class="row"> before the first of the cards:
<div class="row">
<div class="col-6">
<a rel="prefetch" href="communes/xxx/objects/Cykelhus">
...
And close it of course.
hmm, sure I'd already tried that ...
I'm struggling on how to level this card equally to each other:
As you can see in the picture below. The card for the top reason for downtime doesn't match what is on the other cards or vice-versa. I want them to on the same height with each other regardless of what is inside on them.
Below is my code:
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<div class="card shadow mb-4">
<h5 class="card-header">
Top Reason for downtime
</h5>
<div class="card-body">
<ul id="top5Downtime">
</ul>
</div>
</div>
</div>
<div class="col-md-5">
<div class="card shadow mb-4">
<h5 class="card-header">
Top Down Terminals:
</h5>
<div class="card-body">
<ol id="mostDown">
</ol>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card shadow mb-4">
<h5 class="card-header">
Top Up Terminals:
</h5>
<div class="card-body">
<ol id="mostUp">
</ol>
</div>
</div>
</div>
</div>
<!--End of div.row-->
<div class="row">
<div class="col-12">
<div class="card shadow mb-5">
<div class="card-body">
<div id="bar-chart">
</div>
</div>
</div>
</div>
</div>
<!--End of div.row-->
<div class="row">
<div class="col-12">
<div class="card shadow mb-5">
<div class="card-body">
<div id="lineChart">
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="card shadow mb-3">
<h5 class="card-header">
Planned vs Unplanned Event
</h5>
<div class="card-body">
<div id="pieChart"></div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card shadow mb-3">
<h5 class="card-header">
Downtime vs Uptime
</h5>
<div class="card-body">
<div id="pieChart2"></div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="card shadow mb-5">
<div class="card-body">
<div id="barChart2">
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="card shadow mb-5">
<div class="card-body">
<div id="barChart3">
</div>
</div>
</div>
</div>
</div>
<!--END OF div.row-->
<!--END OF div.row-->
</div>
I've tried using the align-self-stretch but it only broke my design. How could I proceed?
Applying display: flex (or .d-flex class) to each of the .cols in same row will make them have equal height:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-md-3 d-flex">
<div class="card shadow mb-4 w-100">
<h5 class="card-header">
Top Reason for downtime
</h5>
<div class="card-body">
<ul id="top5Downtime">
</ul>
</div>
</div>
</div>
<div class="col-md-5 d-flex">
<div class="card shadow mb-4 w-100">
<h5 class="card-header">
Top Down Terminals:
</h5>
<div class="card-body">
<ol id="mostDown">
</ol>
</div>
</div>
</div>
<div class="col-md-4 d-flex">
<div class="card shadow mb-4 w-100">
<h5 class="card-header">
Top Up Terminals:
</h5>
<div class="card-body">
<ol id="mostUp">
</ol>
</div>
</div>
</div>
</div>
<!--End of div.row-->
<div class="row">
<div class="col-12">
<div class="card shadow mb-5">
<div class="card-body">
<div id="bar-chart">
</div>
</div>
</div>
</div>
</div>
<!--End of div.row-->
<div class="row">
<div class="col-12">
<div class="card shadow mb-5">
<div class="card-body">
<div id="lineChart">
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 d-flex">
<div class="card shadow mb-3 w-100">
<h5 class="card-header">
Planned vs Unplanned Event
</h5>
<div class="card-body">
<div id="pieChart"></div>
</div>
</div>
</div>
<div class="col-md-6 d-flex">
<div class="card shadow mb-3 w-100">
<h5 class="card-header">
Downtime vs Uptime
</h5>
<div class="card-body">
<div id="pieChart2"></div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="card shadow mb-5">
<div class="card-body">
<div id="barChart2">
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="card shadow mb-5">
<div class="card-body">
<div id="barChart3">
</div>
</div>
</div>
</div>
</div>
<!--END OF div.row-->
<!--END OF div.row-->
</div>
You also have to apply .w-100 to cards inside .d-flex cols, to make them stretch to full column width on smaller responsiveness intervals.
Important note: this solution relies on the fact you only have 1 card in each .col. If you have more than one, you'll need to add .flex-column to your .col as well.
But, for your example, .d-flex to .cols is enough.
I have applied the solution from this question: Bootstrap 4 vertical center - equal height cards
But, my issue is not getting solved. I can't achieve the equal height & vertically centered together though I have applied these:
<div class="cycle-des h-100 justify-content-center">Product Cycle</div>
Here is the screenshot of my issue:
Here is my Demo
Here you go,
<div class="container">
<div class="row">
<div class="col-md-4 mb-3 pr-md-0">
<div class="cycle-des h-100 align-items-center justify-content-center">Product Cycle</div>
</div>
<div class="col-md-4 mb-3 pr-md-0">
<div class="row no-gutters h-100">
<div class="col-4 col-lg-3">
<div class="cycle-num h-100 align-items-center justify-content-center">01</div>
</div>
<div class="col-8 col-lg-9">
<div class="cycle-des h-100 align-items-center justify-content-center">handloom: 4-7days</div>
</div>
</div>
</div>
<div class="col-md-4 mb-3 pr-md-0">
<div class="row no-gutters h-100">
<div class="col-4 col-lg-3">
<div class="cycle-num h-100 align-items-center justify-content-center">02</div>
</div>
<div class="col-8 col-lg-9">
<div class="cycle-des h-100 align-items-center justify-content-center">S/S MQ: 50M</div>
</div>
</div>
</div>
<div class="col-md-4 mb-3 pr-md-0">
<div class="row no-gutters h-100">
<div class="col-4 col-lg-3">
<div class="cycle-num h-100 align-items-center justify-content-center">03</div>
</div>
<div class="col-8 col-lg-9">
<div class="cycle-des h-100 align-items-center justify-content-center">S/S: 25-30days</div>
</div>
</div>
</div>
<div class="col-md-4 mb-3 pr-md-0">
<div class="row no-gutters h-100">
<div class="col-4 col-lg-3">
<div class="cycle-num h-100 align-items-center justify-content-center">04</div>
</div>
<div class="col-8 col-lg-9">
<div class="cycle-des h-100 align-items-center justify-content-center">Order MQ: 2000M</div>
</div>
</div>
</div>
<div class="col-md-4 mb-3 pr-md-0">
<div class="row no-gutters h-100">
<div class="col-4 col-lg-3">
<div class="cycle-num h-100 align-items-center justify-content-center">05</div>
</div>
<div class="col-8 col-lg-9">
<div class="cycle-des h-100 align-items-center justify-content-center">Order delivery date: 35-50 days</div>
</div>
</div>
</div>
</div>
</div>
.cycle-num, .cycle-des {
color: #fff;
text-align: center;
padding: 20px 10px;
display: flex;
}
.cycle-num {
background-color: #666;
}
.cycle-des {
background-color: #333;
}
But I believe you can reduce the div's and can do it much better. Just a suggestion, you don't have to use grid classes everywhere. Just use it for the layout.
https://jsfiddle.net/mdsebans/yhcb30L5/5/
Im tried to create some UI for the my university project, But its not working correctly , anyone know how to do that correctly or any ideas (look my sample image) using bootstrap 4
I tried to design like this structure
This is my code
.icn-img {border-radius: 50%; display: block; width: 50px; height: 50px; background: white; border: 1px solid lightgray;}
.st-rgt-img{ display: block; width: 20px; height: 20px; background: lightgray}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<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.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" 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>
<div class="container">
<div class="card">
<div class="card-body">
<!----------- details------------>
<div class="row">
<div class="col">
<div class="d-flex flex-row">
<div class=""><span class="icn-img"></span></div>
<div class="ml-2">No </div>
<div class=" ml-3 mt-1"> <span style="font-weight: bold;">Salon</span></div>
<div class=" ml-3"> have been created yet</div>
</div>
</div>
<div class="col">
<div class="api-lst">
<div class="card border-danger border-bottom" >
<div class="card-body ">
<div class="row">
<div class="col-sm">
<div class="d-flex flex-row">
<div class=""><span class="st-rgt-img"></span> </div>
<div class="p-2"> <h6 class="card-subtitle mb-2 text-muted">location</h6></div>
</div>
</div>
<div class="col-sm">
<div class="d-flex flex-row">
<div class=""><span class="st-rgt-img"></span> </div>
<div class="p-2"> <h6 class="card-subtitle mb-2 text-muted">34 salon</h6></div>
</div>
</div>
<div class="col-sm">
0:32
</div>
<div class="col-sm">
<div class="card border-success ">
<div class="card-body text-success">
<h5 class="card-title">5</h5>
</div>
<div class="card-footer bg-success border-success">text</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="w-100"></div>
</div>
<!----------- details------------>
</div></div>
</div>
</div>
you can check the link
https://codepen.io/Xenio/pen/OqwxZa
.icn-img {
border-radius: 50%;
display: block;
width: 50px;
height: 50px;
background: white;
border: 1px solid lightgray;
}
.st-rgt-img {
display: block;
width: 20px;
height: 20px;
background: lightgray
}
.api-lst .card:hover{
transform: scale(1.04);
position:relative;
z-index:1;
transition: 0.5s;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<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.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" 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>
<div class="container">
<div class="card">
<div class="card-body">
<!----------- details------------>
<div class="row">
<div class="col-sm-6">
<div class="">
<div class="d-flex align-items-center ">
<span class="icn-img"></span>
<div class="ml-2">No </div>
</div>
<div class=" ml-3 mt-1"> <span style="font-weight: bold;">Salon</span></div>
<div class=" ml-3"> have been created yet</div>
</div>
</div>
<div class="col-sm-6">
<div class="api-lst">
<div class="card data border-danger border-bottom">
<div class="card-body ">
<div class="row">
<div class="col-sm">
<div class="d-flex flex-row">
<div class=""><span class="st-rgt-img"></span> </div>
<div class="p-2">
<h6 class="card-subtitle mb-2 text-muted">location</h6>
</div>
</div>
</div>
<div class="col-sm">
<div class="d-flex flex-row">
<div class=""><span class="st-rgt-img"></span> </div>
<div class="p-2">
<h6 class="card-subtitle mb-2 text-muted">34 salon</h6>
</div>
</div>
</div>
<div class="col-sm">
0:32
</div>
<div class="col-sm">
<div class="card border-success ">
<h5 class="">5</h5>
<div class="bg-success border-success">text</div>
</div>
</div>
</div>
</div>
</div>
<div class="card border-danger border-bottom">
<div class="card-body ">
<div class="row">
<div class="col-sm">
<div class="d-flex flex-row">
<div class=""><span class="st-rgt-img"></span> </div>
<div class="p-2">
<h6 class="card-subtitle mb-2 text-muted">location</h6>
</div>
</div>
</div>
<div class="col-sm">
<div class="d-flex flex-row">
<div class=""><span class="st-rgt-img"></span> </div>
<div class="p-2">
<h6 class="card-subtitle mb-2 text-muted">34 salon</h6>
</div>
</div>
</div>
<div class="col-sm">
0:32
</div>
<div class="col-sm">
<div class="card border-success ">
<h5 class="">5</h5>
<div class="bg-success border-success">text</div>
</div>
</div>
</div>
</div>
</div>
<div class="card border-danger border-bottom">
<div class="card-body ">
<div class="row">
<div class="col-sm">
<div class="d-flex flex-row">
<div class=""><span class="st-rgt-img"></span> </div>
<div class="p-2">
<h6 class="card-subtitle mb-2 text-muted">location</h6>
</div>
</div>
</div>
<div class="col-sm">
<div class="d-flex flex-row">
<div class=""><span class="st-rgt-img"></span> </div>
<div class="p-2">
<h6 class="card-subtitle mb-2 text-muted">34 salon</h6>
</div>
</div>
</div>
<div class="col-sm">
0:32
</div>
<div class="col-sm">
<div class="card border-success ">
<h5 class="">5</h5>
<div class="bg-success border-success">text</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="w-100"></div>
</div>
<!----------- details------------>
</div>
</div>
</div>
</div>