'Place SVG in bottom right hand corner of image Bootstrap
I am trying to get an SVG to go in the bottom right-hand corner of an image in a bootstrap card. I tried a solution similar to this: picture on the bottom right cornor of image but using the CSS for the icon makes my SVG disappear completely. I did not include the SVG tags in my code snippet because it was very long. But the full SVG I am using can be found here: https://communityloaves.org/wp-content/uploads/2022/03/breadherobadge.svg
Using the included code the cards look like this:
I would like them instead to have the SVG in the bottom right corner of the all green image. like in the second picture.
.image{
height:100%;
position:relative;
background-color:green;
background-size: cover;
background-image: url(https://communityloaves.org/wp-content/uploads/2021/05/Avatar-2-450x450.jpg);
}
.image .icon {
position:absolute;
bottom:0px;
right:0px;
}
p.dash-intro.nav-btns {
padding-top: 3rem;
}
.col-md-4.padding-1 {
padding-left: 5px;
padding-right: 5px;
}
.ann-text {
margin-bottom: 0px !important;
}
.ann-img {
max-height: 40rem;
}
.dash-intro {
color: black;
font-size: 18px;
margin-top: 35px;
}
.member-img {
max-height: 7rem;
margin-bottom: 6px;
padding-left: 15px;
}
p.card-text {
font-size: 11px;
padding: 9px 15px 9px 0px;
}
.special {
color: black;
font-size: 19px;
font-weight: bold;
}
.card-header {
padding: 0.75rem 1.25rem;
margin-bottom: 0;
background-color: #D4E1D4;
border-bottom: 1px solid rgba(0,0,0,0.125);
}
.hide {
display: none;
}<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container-fluid">
<br>
<hr>
<div class="row mt-3">
<div class="col-md-12">
<h4 class="font-weight-bold mb-3" id="members">Hub Members</h4>
</div>
</div>
<div class="row">
<div class="col-md-4 padding-1">
<div class="card border-success mb-5">
<div class="row g-2">
<div class="col-md-5 col-12 text-center padding-0">
<div class="image">
<div class="icon"><svg goes here. I didnt inlcude the full svg because it was too long> </div>
</div>
</div>
<div class="col-md-7 col-12 padding-0">
<p class="card-text">
<span class="font-weight-bold">Jane D <br></span>
<span class="font-weight-bold">Member Since: </span> Apr 13, 2022 <br>
<span class="font-weight-bold">First Donation: </span> Feb 27, 2022 <br>
<span class="email-text"><span class="font-weight-bold"><i class="fa fa-envelope"></i></span> [email protected]</span>
<br><span class="font-weight-bold"><i class="fa fa-phone"></i></span> 555 555 555 (cell) <br><span class="font-weight-bold">Loaves to date: </span> 5
</p>
</div>
</div>
</div>
</div>
<div class="col-md-4 padding-1">
<div class="card border-success mb-5">
<div class="row g-2">
<div class="col-md-5 col-12 text-center padding-0">
<div class="image" stlye="background-image: url();">
<div class="icon">><svg goes here. I didnt inlcude the full svg because it was too long></div>
</div>
</div>
<div class="col-md-7 col-12 padding-0">
<p class="card-text">
<span class="font-weight-bold">Jane D <br></span>
<span class="font-weight-bold">Member Since: </span> Apr 13, 2022 <br>
<span class="font-weight-bold">First Donation: </span> Feb 27, 2022 <br>
<span class="email-text"><span class="font-weight-bold"><i class="fa fa-envelope"></i></span> [email protected]</span>
<br><span class="font-weight-bold"><i class="fa fa-phone"></i></span> 555 555 555 (cell) <br><span class="font-weight-bold">Loaves to date: </span> 5
</p>
</div>
</div>
</div>
</div>
<div class="col-md-4 padding-1">
<div class="card border-success mb-5">
<div class="row g-2">
<div class="col-md-5 col-12 text-center padding-0">
<div class="image" stlye="background-image: url();">
<div class="icon">><svg goes here. I didnt inlcude the full svg because it was too long></div>
</div>
</div>
<div class="col-md-7 col-12 padding-0">
<p class="card-text">
<span class="font-weight-bold">Jane D <br></span>
<span class="font-weight-bold">Member Since: </span> Apr 13, 2022 <br>
<span class="font-weight-bold">First Donation: </span> Feb 27, 2022 <br>
<span class="email-text"><span class="font-weight-bold"><i class="fa fa-envelope"></i></span> [email protected]</span>
<br><span class="font-weight-bold"><i class="fa fa-phone"></i></span> 555 555 555 (cell) <br><span class="font-weight-bold">Loaves to date: </span> 5
</p>
</div>
</div>
</div>
</div>
</div>
</div>
Solution 1:[1]
I add an image inside .icon class you can add your svg.
Basically you need to give parent class which is .icon a position:relative and your svg (child) position:absolute than you can play inside with
bottom, left, right and top properties which in this situation need
bottom:0;
right: 0;
Here is your code
*,
*::before,
*::after {
box-sizing: border-box;
}
.image{
height:100%;
position:relative;
background-color:green;
background-size: cover;
}
.image .icon {
position:relative;
width: 100%;
height: 100%;
}
.image .icon img{
position: absolute;
bottom:0;
right: 0;
border-radius: 100%;
width: 80px;
}
p.dash-intro.nav-btns {
padding-top: 3rem;
}
.col-md-4.padding-1 {
padding-left: 5px;
padding-right: 5px;
}
.ann-text {
margin-bottom: 0px !important;
}
.ann-img {
max-height: 40rem;
}
.dash-intro {
color: black;
font-size: 18px;
margin-top: 35px;
}
.member-img {
max-height: 7rem;
margin-bottom: 6px;
padding-left: 15px;
}
p.card-text {
font-size: 11px;
padding: 9px 15px 9px 0px;
}
.special {
color: black;
font-size: 19px;
font-weight: bold;
}
.card-header {
padding: 0.75rem 1.25rem;
margin-bottom: 0;
background-color: #D4E1D4;
border-bottom: 1px solid rgba(0,0,0,0.125);
}
.hide {
display: none;
}<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous"
/>
<div class="container-fluid">
<br />
<hr />
<div class="row mt-3">
<div class="col-md-12">
<h4 class="font-weight-bold mb-3" id="members">Hub Members</h4>
</div>
</div>
<div class="row">
<div class="col-md-4 padding-1">
<div class="card border-success mb-5">
<div class="row g-2">
<div class="col-md-5 col-12 text-center padding-0">
<div class="image">
<div class="icon">
<img
src="https://source.unsplash.com/random/100x100"
alt=""
/>
</div>
</div>
</div>
<div class="col-md-7 col-12 padding-0">
<p class="card-text">
<span class="font-weight-bold">Jane D <br /></span>
<span class="font-weight-bold">Member Since: </span> Apr 13,
2022 <br />
<span class="font-weight-bold">First Donation: </span> Feb 27,
2022 <br />
<span class="email-text"
><span class="font-weight-bold"
><i class="fa fa-envelope"></i
></span>
[email protected]</span
>
<br /><span class="font-weight-bold"
><i class="fa fa-phone"></i
></span>
555 555 555 (cell) <br /><span class="font-weight-bold"
>Loaves to date:
</span>
5
</p>
</div>
</div>
</div>
</div>
</div>
</div>Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | UPinar |