How to make div page around the image and icon (Bootstrap 4) - html

Question

I want to try to make a div page with an icon around the text and button but it won't make an icon beside the text just like this(It also affects the button). I already tried using Flex documentation d-flex justify-content-around in div class but it doesn't work. I'm using Bootstrap 4. Here's the result :
The Result:
The Result I wanted:
Here's the coding :
Home.html
div.page {
padding: 10px 20px;
background: #FDFDFD;
width: 280px;
height: 180px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
border-radius: 32px;
}
p.page {
color: #252525;
margin-left: 20px;
font-size: 30px;
font-weight: bold;
font-family: 'Roboto',sans-serif;
}
button.show {
border-radius: 32px;
font-weight:bold;
margin-right: 80px;
margin-top: 30px;
border: 3px solid #3379E4;
text-align:center;
padding: 5px;
background: #3379E4;
width: 50%;
color: #FDFDFD;
font-family:'Roboto', sans-serif;
}
i.page {
font-size: 36px;
color: #3379E4;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />
<div class="container mt-5">
<div class="row">
<div class="col text-center">
<div class="d-flex">
<div class="page mr-auto p-2">
<i class="page fas fa-calculator text-right"></i>
<p class="page text-left">AK</p>
<button class="show">Show</button>
</div>
<div class="page p-2">
<i class="page fas fa-laptop text-right"></i>
<p class="page text-left">TKJ</p>
<button class="show">Show</button>
</div>
</div>
<img src="https://cdn.pixabay.com/photo/2016/09/18/14/21/swimmer-1678307__340.jpg" class="img-fluid" width="500">
<div class="d-flex">
<div class="page mr-auto p-2">
<i class="page fas fa-store text-right"></i>
<p class="page text-left">PM</p>
<button class="show">Show</button>
</div>
</div>
</div>
</div>
</div>
Thank you for helping.

Answer 1

I add custom css that you could see by the bottom of the css:
/**** CSS ADDED ****/
.img-fluid {
margin: -10vh auto;
}
.z-index-1{
z-index:1;
}
I recommand to not use class: .img-fluid as I did but to create another class with this negative margin. Here it is really just for the demo
Then I added classes in follow:
<div class="col text-center">
<div class="d-flex">
To make it like:
<div class="col text-center d-flex flex-column">
<div class="d-flex z-index-1">
Edit:
Rework structure of your card this way by dividing in 2 cols and some correction in CSS for icon font-size :
<div class="page p-2 row">
<div class="col-8">
<p class="page text-left">TKJ</p>
<button class="show">Show</button>
</div>
<div class="col-4 d-flex">
<i class="page fas fa-laptop m-auto"></i>
</div>
</div>
DEMO:
div.page {
padding: 10px 20px;
background: #FDFDFD;
width: 280px;
height: 180px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
border-radius: 32px;
}
p.page {
color: #252525;
margin-left: 20px;
font-size: 30px;
font-weight: bold;
font-family: 'Roboto',sans-serif;
}
button.show {
border-radius: 32px;
font-weight:bold;
margin-right: 80px;
margin-top: 30px;
border: 3px solid #3379E4;
text-align:center;
padding: 5px;
background: #3379E4;
width: 100%; /* CAHNGED FROM 50% TO 100% */
color: #FDFDFD;
font-family:'Roboto', sans-serif;
}
i.page {
font-size: 4em; /* Changed from 36px to 4em */
color: #3379E4;
}
/**** CSS ADDED ****/
.img-fluid {
margin: -10vh auto;
}
.z-index-1{
z-index:1;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />
<div class="container mt-5">
<div class="row">
<div class="col text-center d-flex flex-column">
<div class="d-flex z-index-1">
<div class="page mr-auto p-2 row">
<div class="col-8">
<p class="page text-left">AK</p>
<button class="show">Show</button>
</div>
<div class="col-4 d-flex">
<i class="page fas fa-calculator m-auto"></i>
</div>
</div>
<div class="page p-2 row">
<div class="col-8">
<p class="page text-left">TKJ</p>
<button class="show">Show</button>
</div>
<div class="col-4 d-flex">
<i class="page fas fa-laptop m-auto"></i>
</div>
</div>
</div>
<img src="https://cdn.pixabay.com/photo/2016/09/18/14/21/swimmer-1678307__340.jpg" class="img-fluid" width="500">
<div class="d-flex z-index-1">
<div class="page mr-auto p-2 row">
<div class="col-8">
<p class="page text-left">PM</p>
<button class="show">Show</button>
</div>
<div class="col-4 d-flex">
<i class="page fas fa-store m-auto"></i>
</div>
</div>
</div>
</div>
</div>
</div>