Guide to adjusting icon placement on top of an image using Bootstrap 4

Is there a way to overlay an icon on top of an image?

.item {
  position: relative;
}

.des {
  color: #fff;
  text-align: left;
}
<div class="card">
    <div class="item">
        <img class="card-img-top" src="images/g33.jpg" alt="Avatar">
        <div class="des">
            <i class="fa fa-plus-square" style="font-size:48px;color:red"></i>
       </div>
    </div>
    <div class="card-body">
        <h5 class="card-title ">Farwa Waheed</h5>
        <p class="card-text" style="font-size:13px;"> Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
   </div>
</div>

I envisioned the icon being positioned at the bottom left corner of the image, but unfortunately it appears below the image instead.

htmlcssbootstrap-4

Answer №1

To adjust the image position using CSS, you can modify the values for the properties left or bottom. Here's an example:

.item {
  position: relative;
}

.des {
  position: absolute;
  bottom: 0;
  left: 0;
}

If this solution doesn't work for you, feel free to reach out for further assistance.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Create a row in React JS that includes both a selection option and a button without using any CSS

My dilemma involves a basic form consisting of a select element and a button. What I want to accomplish is shifting the position of the form to the right directly after the select element https://i.sstatic.net/3gfkO.png Below is the code snippet that I ha ...

javascriptcssreactjsfrontend

Issue with Google Chrome not showing stylesheets on Windows 7

Recently, I've been facing an issue with CSS layers on my website while using Google Chrome. Despite following the code accurately, my browser fails to display the expected result. To troubleshoot, I even copied and pasted code from a reliable source ...

htmlcssgoogle-chrome

How to Use JQuery to Retrieve the Nearest TD Element's Text Content

Hey there, here is some HTML code that I need help with: <tbody> <tr> <td class="text-center"><input type="text" class="form-control cardSerialNumber"></td> <td class="text-center"><button type="button" onc ...

javascriptjqueryhtml

What are some ways to implement smooth scrolling when a navigation link is clicked?

I have a total of 3 links in my navigation bar and every time they are clicked, I want the page to smoothly scroll down to their designated section on the webpage. Although I have already set up the anchors, I lack experience in scripting to create the smo ...

javascripthtmlcssimagemodal-dialog

Styling columns to be inline-flex without taking up the full height

I'm currently working on a project similar to "Trello" or "Zenhub," using a Kanban board with 4 columns placed in a div#board. The columns are set to display: inline flex, creating a neat horizontal alignment. However, I encountered an issue where eac ...

jqueryhtmlcssflexboxmaterialize

Create a regular expression to identify and substitute incorrect HTML properties

It's a harsh reality that my regex skills are lacking. Upon revisiting an old project, I stumbled upon some code that definitely needs attention. Take a look: strDocument = strDocument.Replace("font size=""1""", "font size=0.2") strDocument = strDocu ...

htmlvb.netregex

Can you explain the media breakpoints in Bootstrap 4 for size up, down, and in between

I'm curious to understand the definitions of media-breakpoint-up, media-breakpoint-down, media-breakpoint-between, and media-breakpoint-only in Bootstrap 4. Can anyone provide an explanation? ...

sassbootstrap-4breakpoints

Locating the value of a data attribute from a distant parent div using jQuery

How can I access the closest div from an anchor tag that has a data-id attribute without using multiple parent() methods? Even though .parent().parent().parent() works, I am trying to find a better solution. <div class="panel panel-default" data-id="@ ...

javascriptjqueryhtmljquery-selectors

What is preventing this from being passed to the subsequent component in ReactJS?

I am trying to get the Portfolio class to utilize the this.prompt method from the Title Bar class. Despite extensive research, I have not been able to find a definitive solution for this yet. Currently, my screen is just blank. Below is the content of my ...

javascripthtmlcssreactjs

Is it possible to adjust the height of the navbar in Bootstrap?

Currently, I am in the process of replicating the mac OS navbar and am seeking guidance on resizing the navbar height and adjusting text size to around 12px. This is my first time working with bootstrap, so any assistance would be greatly appreciated. Addi ...

htmlcssmacosbootstrap-4navbar

Drop down menu alignment issue: unable to center menu on the page

My dropdown menu is misaligned and not centering on the page, even after multiple attempts to fix it using HTML and CSS only. I have refrained from using JavaScript or JQuery for this issue. CSS Code: <style type="text/css"> /* STYLING FOR DROPDOWN ...

htmlcssmenudrop-down-menu

The <ul> tag is not receiving the correct styles and is not displaying properly

I have successfully integrated an input control and button into my table within the Angular 7 application. When a user inputs text in the control and clicks the add button, the text is appended to the <ul> list. However, the layout of the <ul> ...

htmlcss

Guide on How to Include data (PDF Base 64) in angular 6 component

Within my Angular 6 application, I am presenting data (a report) in a new window using the following code snippet. *** The 'result' variable contains Base64 data *** if (result != null) { const pdfWindow = window.open(""); ...

htmlangularembed

Is there a reason why Social Bar isn't appearing at the top?

My challenge is to position the bar close to the black footer. It appears correctly in Chrome, but not in Firefox and Opera. The screenshot shows how it looks in Chrome. However, in Firefox and Opera, the social bar is positioned lower and does not align ...

htmlcssfirefoxopera

Angular does not display a loading indicator in the header

When handling service calls, I have implemented a loading indicator to provide feedback to the user. However, it appears that this indicator is not effectively preventing users from interacting with header items before the loading process is complete. My ...

htmlangular

Instructions on placing the bottom of an inline-block element flush with the bottom of a block element

In the scenario where I have the following HTML and CSS code: .something{ width: 200px; } .display-block { display: block; } .req-field{ float: right; font-size: 5px; } <div class="something"> <span class="display-block">First name ...

htmlcss

What are some strategies for dividing a webpage evenly between an image and a text-containing div?

I am currently working on emulating a layout that I came across on another website ( if you scroll down past the video and profiles). The layout involves splitting the page 50/50 with a picture that is responsive and maintains its size when the page is res ...

htmlcssreactjsmaterial-ui

CSS hover effect ceases to function after the button has been clicked once

I am facing a dilemma with styling that I can't seem to resolve. There is a basic toggle feature on my page with two options -- the user can select either Toggle1 or Toggle2, resulting in different data being displayed dynamically based on the active ...

javascripthtmljquerycss

Unable to see or play local mp4 file in Ionic iOS application

I am facing an issue with my Ionic app where I am trying to show a video playing in the background. The Jaeger25 HTMLVideo plugin works perfectly for Android, but when it comes to iOS, the video simply refuses to play. The video file is located in the www/ ...

javascriptioshtmlionic-frameworkhtml5-video

The action to set the 'isRightSidebarExpanded' property is trying to target an undefined element

I'm currently in the process of adapting a template for use with nuxt.js This specific attribute is causing an error to occur When trying to set 'isRightSidebarExpanded', I receive the following error: Cannot set properties of undefined ...

htmlvue.jsnuxt.js