How can I showcase a Bootstrap Badge directly onto an image in HTML?

I have a collection of images displayed in a grid format, and underneath each image there are two figcaption elements acting as badges. I also have a third figcaption that is properly rendered as a hyperlink. My goal is to position the badges at the bottom of each image, but I am unsure how to accomplish this.

<div style="display:grid;grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));grid-gap: 5px;">
    <div>
        <figure class="figure">
            <a href="FixSongsReport00277_changes00041.html">
                <img src="../images/Antonin Dvorak; Itzhak Perlman, Daniel Barenboim, Samuel Sanders.jpg" class="figure-img" width="200" height="200">
            </a>
            <figcaption class="badge badge-secondary">
                12 files 
            </figcaption>
            <figcaption class="badge badge-secondary">
                0 files modified
            </figcaption>
            <figcaption class="figure-caption">
                <a href="FixSongsReport00277_changes00041.html">
                    Antonin Dvorak; Itzhak Perlman, Daniel Barenboim, Samuel Sanders
                </a>
            </figcaption>
        </figure>
    </div>
    <div>
        <figure class="figure">
            <a href="FixSongsReport00277_changes00029.html">
                <img src="../style/images/folder.jpg" class="figure-img" width="200" height="200">
            </a>
            <figcaption class="badge badge-secondary">
                27 files 
            </figcaption>
            <figcaption class="badge badge-secondary">
                0 files modified
            </figcaption>
            <figcaption class="figure-caption">
                <a href="FixSongsReport00277_changes00029.html">
                    Choir of Trinity College
                </a>
            </figcaption>
        </figure>
    </div>

For example:

https://i.sstatic.net/TxAHX.jpg

Following Oleg's suggestion, I have now achieved:

https://i.sstatic.net/MubSR.jpg

htmlcssbootstrap-4

Answer №1

Using CSS, you have the ability to position elements on top of an image.

.badge{
   position: relative;
   top: -3em;        
}

.figure-caption {
  position: relative;
  top: -2em
}

For a visual representation, check out this JSFiddle demo

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

"Enhance Your Website Navigation with Bootstrap Navbar Links Extensions

I'm stuck on nesting a "navbar" in a Bootstrap row. The issue I'm facing is how to get the links to expand across the entire column. https://i.sstatic.net/9QbSN.png The code for this problem looks like: <div class="col-6 p-3 ...

cssasp.net-corerazorbootstrap-4

What is the best way to align the logo image in the center of the header vertically?

I am trying to vertically center my logo, but I have not been successful with using margin: auto or margin: center. Here is what I have tried so far: ・text-align: center; ・margin: auto; ・margin: center: ・navbar-brand-center The logo currently app ...

htmlcssvue.js

What is the best way to horizontally center a div with the layout attribute set to "row"?

I am currently working with a grid composed of cards from the Angular Material library. The issue I am facing is that the cards have a fixed size, which results in extra space on the right immediately after wrapping. My goal is to eliminate this space by ...

cssangularjsangular-material

Tips for properly positioning and rotating text in CSS and HTML!

My goal is to place a rotated headline next to some text, but I'm facing challenges with positioning when the page is resized. While absolute positioning works easily in a static scenario (left picture), it fails when the page size changes (right pict ...

htmlcss

Utilizing the text field feature within Twitter Bootstrap 3.0 in-line styling

I am attempting to create a horizontal form with an inline text field split into two sections: one on the left and one on the right. The left side will contain horizontal text fields, some of which are inline, while the right side will have a mix of inline ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

What significance do the blank quotes hold in terms of value?

Is it possible to enter multiple values for the "favoriteCities" field since the value is empty? <input name="favoriteCities[]" value=""/> ...

html

Guidelines on transforming XML files into HTML tables using C++ programming language

Is there a C++ library available that can help me convert an XML file into an HTML table using my C++ application? For example: <breakfast_menu> <food> <name>Belgian Waffles</name> <price>$5.95</price> <d ...

htmlc++xmlc++11

Excess space noted at the bottom of tablet and mobile versions of the page

I'm struggling to troubleshoot an issue with the mobile and tablet versions of a web-shop I'm designing for university. Some pages have excessive space after the HTML tag, but only on certain pages. I've tried commenting out CSS lines relate ...

javascripthtmljquerycssbootstrap-5

Ways to secure a floating item onto a backdrop picture

Currently I am working on editing this page. When you hover over the cat, its eyes blink or two black dots randomly appear. My goal is to prevent the random blinking dots from appearing. I want to keep the hover object attached to the cat/background image ...

csshoverpositionbackground-imagemousehover

Build a table with consistent columns and flexible rows utilizing CSS and HTML

Just starting out with CSS/HTML and looking for guidance on creating a table with a variable number of rows. Any tips on how to achieve this using CSS? I'm aiming to replicate a table with a similar structure, but struggling to figure out how to defin ...

htmlcss

Alignment issue with content within bootstrap grid

.course-card{ background: white; border-radius: 0.25rem; padding: 1rem 1rem 1rem 1rem; text-align: center; } <div class="row d-flex align-items-center course-card"> <div class="col-md-6 course-progress"> <p>test</p> ...

htmlcsstwitter-bootstrapbootstrap-4

Unable to interact with the page while executing printing functionality in

component: <div class="container" id="customComponent1"> New Content </div> <div class="container" id="customComponent2"> different content </div> ...

javascripthtmlangularprinting

Emphasize text within the input field

Is there a way to create an input textarea that can detect words from an array in this.state and highlight those words as the user types text? Here is what I'm aiming for: The list of words: https://i.sstatic.net/eOx7G.png The input textarea examp ...

javascriptcssreactjsinputtextarea

Struggling with integrating vue pagination

I am looking to add pagination functionality to my website and stumbled upon a visually appealing example that is compatible with Vue. However, despite my lack of experience with Vue, I am struggling to get the demo to work properly. The pagination compon ...

htmlvue.jspagination

The ID is specifically assigned to the anchor element produced by React Bootstrap, rather than the surrounding div

Previously, I utilized the 'ml-auto' class in my navbar to push the dropdown all the way to the left. However, I encountered a problem when the screen size decreased and the navbar orientation changed to vertical. To address this issue, I attemp ...

reactjsbootstrap-4next.jsreact-bootstrap

Creating a table with a fixed width that matches the dimensions of a textarea

Is it possible to have a textarea box with fixed dimensions, followed by a table of the same size that does not dynamically resize when the window is resized? I attempted to achieve this by styling the table with table{ table-layout: fixed; width: 100px; } ...

htmlcssbootstrap-4

What are the challenges associated with using replaceChild?

function getLatestVideos(url) { var http = new XMLHttpRequest(); http.open("GET", url, false); // false for synchronous request http.send(null); return http.responseText; } var videosText = getLatestVideos("https://www.googleapis.com/youtube/v3/se ...

javascripthtmlbootstrap-5

Maintain the button's color when clicked UNTIL it is clicked again

I am facing a challenge where I need to dynamically select multiple buttons that change color upon click. Once a button is clicked, it should change color and if clicked again, revert back to its original color. Unfortunately, I cannot rely on HTML attribu ...

javascripthtmlvue.jsbuttonbootstrap-4

Multiline text that appears inline

Is there a way to achieve this output in HTML or using CSS? This is the text: A very long piece of content that wraps automatically onto multiple lines Take note of how the text wraps and aligns on the left side. I am aware that tables can be used for t ...

htmlcss

How can I apply the -ms-word-break: break-all; CSS property to a hyperlink element?

For some reason, the anchor tag is only functional when enclosed within a different element. However, my intention is to incorporate it as a style for the entire webpage since I am parsing the html content. ...

htmlcss