Placing an object inside a bootstrap column

Looking to enhance my gallery-style display by adding titles within the display boxes for each item.

See the scenario on jsfiddle: https://jsfiddle.net/xry7ezb9/5/

The issue arises from using bootstrap's col class, which includes padding that affects element size and child elements inheriting this width as 100%.

The desired outcome mimics the second gallery item but the process feels somewhat "hacky" as it relies on hardcoded values assuming Bootstrap remains consistent. There must be a more elegant solution.

The last div element achieves correct width independently; however, positioning challenges prevent proper alignment. Any suggestions on implementation?

Uncertain about the feasibility of the third tile approach due to fixed gallery item height assumptions.

How can I address these concerns while maintaining responsiveness?

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}

.gallery-item-container {
height: 200px;
max-height: 200px;
cursor: pointer;
}

.gallery-item-logo {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
border: unset;
border-radius: unset;
background: unset;
border: solid 1px #929292;
  border-radius: 5px;
  background-color:#fff;
}

.gallery-item-logo:hover{
    background-color:#c7c7c7;
    transition: 0.5s;
}

.gallery-item-logo > img {
    max-height: 70%;
    max-width: 90%;
}

.speaker-name, .item-title {
    position: absolute;
    text-align: center;
    bottom: 0px;
    left: 0px;
    width: 100%;
    z-index: 1000;
    padding: 5px;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.5);
}
.no-absolute {
    /* position: absolute; */
    text-align: center;
    bottom: 0px;
    left: 0px;
    width: 100%;
    z-index: 1000;
    padding: 5px;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.5);
}

.no-absolute-top-margin-test{
    height: 15%;
    margin-top: -30px;
}

/* Offsetting bootstrap col class padding on the parent (it expands parent body by 15px on each side thus children inherit that extra width) */
.col-padding-offset {
    max-width: calc(100% - 30px);
    margin-left: 15px;
    max-height: 15%; // Separate this
    height: 15%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">

    <div class="gallery-item-container mb-3 col-lg-3 col-md-6 col-sm-6 col-xs-6">

        <div class="gallery-item-logo" data-toggle="modal" data-target="#participant_modal_8">
            <img class="img-fluid" src="https://vignette.wikia.nocookie.net/lotr/images/8/8d/Gandalf-2.jpg/revision/latest?cb=20130209172436">
            <span class="icon-focus"></span>
        </div>

        <div class="item-title">
            <p><b>test title</b></p>
        </div>

    </div>

    <div class="gallery-item-container mb-3 col-lg-3 col-md-6 col-sm-6 col-xs-6">

        <div class="gallery-item-logo" data-toggle="modal" data-target="#participant_modal_16">
            <img class="img-fluid" src="https://vignette.wikia.nocookie.net/lotr/images/8/8d/Gandalf-2.jpg/revision/latest?cb=20130209172436">
            <span class="icon-focus"></span>

        </div>

        <div class="item-title col-padding-offset">
            <p><b>test title</b></p>
        </div>

    </div>

    <div class="gallery-item-container mb-3 col-lg-3 col-md-6 col-sm-6 col-xs-6">

        <div class="gallery-item-logo" data-toggle="modal" data-target="#participant_modal_11">
            <img class="img-fluid" src="https://vignette.wikia.nocookie.net/lotr/images/8/8d/Gandalf-2.jpg/revision/latest?cb=20130209172436">
            <span class="icon-focus"></span>
        </div>

        <div class="no-absolute no-absolute-top-margin-test">
            <p><b>test title</b></p>
        </div>

    </div>

    <div class="gallery-item-container mb-3 col-lg-3 col-md-6 col-sm-6 col-xs-6">

        <div class="gallery-item-logo" data-toggle="modal" data-target="#participant_modal_2">
            <img class="img-fluid" src="https://vignette.wikia.nocookie.net/lotr/images/8/8d/Gandalf-2.jpg/revision/latest?cb=20130209172436">
            <span class="icon-focus"></span>
        </div>

        <div class="no-absolute">
            <p><b>test title</b></p>
        </div>

    </div>
    
</div>

htmlcssbootstrap-4

Answer №1

The margin is set to 15px at all times, allowing you to implement the following solution:

.speaker-name, .item-title {
    position: absolute;
    text-align: center;
    bottom: 0px;
    left: 15px;
    width: calc(100% - 30px);
    z-index: 1000;
    padding: 5px;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.5);
}

Take a look at this fiddle sample

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

What is the best way to populate an HTML array using my AWK script?

In my CGI script written in bash and HTML, I am attempting to display information from multiple CSV files in an HTML array. The following is the script I am using: #!/bin/bash echo "Content-type: text/html" echo "" echo ' <html> <he ...

htmlarraysbashcgi

How to align an unordered list vertically in the center using Bootstrap?

Trying to figure out why the ul within this parent div is not centered vertically. Here is a screenshot of the issue: https://i.sstatic.net/ZOc9M.png <div className=" d-flex align-items-center bg-primary "> <ul ...

javascriptcssreactjsfrontendbootstrap-5

Filtering dynamically generated table rows using Jquery

I'm currently working on a project that involves filtering a dynamic table based on user input in a search bar. The table contains information such as name, surname, phone, and address of users. Using jQuery, I have created a form that dynamically ad ...

javascriptjqueryhtml

Background color set for only half of the div

Is it possible to achieve a design similar to this using CSS, with a Half-background color for a div? ...

htmlcssbootstrap-4

The full background width is not being displayed as 100% on the

Unexpectedly, the "full left secondary-bg" background division on this particular page (http://goo.gl/OU4MkW) is no longer spanning the full width of the screen and I am unable to figure out why. This website is WordPress-based and constructed using the sk ...

phphtmlcsswordpress

The transition effect does not seem to be functioning correctly when adding a class

It seems like a common issue, but none of the solutions I've come across so far have helped. Everything appears to be standard and simple code, yet I can't seem to get it to work properly. I'm trying to create a dropdown menu where a hidden ...

javascriptjqueryhtmlcss

Get rid of the dashed outline surrounding the selected button

One of my divs has a button inside that, when clicked, creates an outline around it. Here is what it looks like: https://i.sstatic.net/pEr53.png **Code: ** .slide-arrow { color: #fff; background-color: #9E9997; border: none; padding: 16px 10px ...

htmlcss

Learn the best way to utilize a stylus in Vue files to interact with JavaScript variables

For instance: <script> export default { data() { return{ varinjs: 1, } } } </script> <style lang="stylus"> varincss = varinjs body if varincss == 0 ba ...

cssvue.jssasslessstylus

Assignment of Microsoft Avatar Colors

What method does Microsoft utilize to assign colors to contacts in their applications? I've searched online with no luck in finding an answer. In programs like Outlook or Android, when a new contact is added without an image for the avatar, Microsof ...

androidhtmlcssoutlookangular-material

How can I programmatically adjust the center of a Google Maps v3 map?

I have a table with 2 columns. The first column contains a div with a Google map, while the second column has a panel that changes its width after a few seconds. On the map, there is a marker placed. Issue: When I click on a button that triggers setCente ...

javascripthtmlgoogle-mapsgoogle-maps-api-3

Can you explain the difference between dots-per-CSS-inch and dots-per-physical-inch?

When accessing jsfiddle.net, I received the following message in the Chrome Developer Tools console tab: The message suggests using 'dppx' units instead of 'dpi' in CSS, as 'dpi' does not correspond to the actual screen den ...

javascripthtmlcssjsfiddle

Tips for emphasizing the current element without disrupting existing styles

Is there a way to highlight an element with a border without causing it to shift? The script seems a bit glitchy when detecting mouse leaving the area. I'm unable to override parent element properties like border or outline. I also can't use pse ...

javascripthtmlcss

Is the "position: sticky" feature functioning correctly, or is there a slight vibrating or dancing effect when users scroll through the Ionic app? How can we eliminate this issue specifically on iOS

Looking for suggestions on this problem - the position sticky is functioning correctly, but there seems to be a slight vibration or dancing effect when users scroll in the Ionic app. Any ideas on how to eliminate this issue specifically on iOS devices? & ...

htmlcssuser-interfaceionic-frameworksass

Tips for inserting the <a> HTML tag into a JSON array object

I am relatively new to creating array objects and I am unsure on how to add a link within a <a> tag in a JSON file. Here is the JSON object code: powerUpList: [ { id: 8, name: 'Automate your API column type ', description: & ...

javascripthtmljquerynode.jsejs

Troubleshooting Problem: Adjusting the hover border color for TextField in ReactJS Material UI

I'm having trouble setting the hover border color of a TextField to a theme variable. It seems that in order for the hover borderColor to work, it needs the "!important" tag. However, I am unsure of how to incorporate this into the theme variable. Th ...

cssreactjsmaterial-ui

Set tab navigation widget with a fixed height

I am struggling with setting a fixed height for my tabs widget so that when I add more content, it will display a scrollbar instead of expanding endlessly. I have checked the CSS and JS files but cannot figure it out. It is important for me to contain this ...

javascriptjqueryhtmlcssjquery-ui

How can you resolve redefinition warnings detected by the CSS Validator?

After running my site through the W3C CSS Validator, I was surprised to see that it returned a total of 3146 warnings. The majority of these warnings are redefinition alerts, such as: .fa.fa-check Redefinition of color .fa.fa-check Redefinition of ...

csswarningsw3c-validationredefinition

Transforming HTML into a Document Object Model (DOM) for manipulation within a Node

Is it possible to convert raw HTML into a DOM/NodeList object and manipulate elements within that NodeList before converting it back into a string? Here's an example: request( url, function ( err, response, body ) { var bodyDOM = DOM.parse( body ...

javascripthtmlnode.jsparsingdom

Bootstrap: Easily align elements to the right with the .pull-right class, avoiding the need to manually adjust margins

This is the code snippet I am working with (you can view the fiddle here): <div class='container'> <div class='hero-unit'> <h2>Welcome</h2> <p>Please log in</p> <div i ...

htmlcsstwitter-bootstrap

Make sure that bootstrap is set to disregard the taller column heights

Is there a method to manipulate Bootstrap so that the first column of the second row is positioned just below the height of its corresponding column in the previous row? At present, each row adjusts its height based on the tallest column. <div class=&q ...

htmlbootstrap-4bootstrap-5