Is there a way to ensure that this image completely fills the container?

I am facing an issue with my code snippet. Whenever I input a large amount of text, it causes the entire row to be pushed down, resulting in extra space underneath the image. How can I ensure that the image always fills its container and adjusts its height based on the content in the adjacent column?

For a better visual understanding, here is an image:

https://i.sstatic.net/o3Baw.png

The framework I am using is Bootstrap4.

.lesson-heading h2 {
    font-size: 24px;
    font-weight: 600;
}
.lesson {
    background-color: #ffffff;
    margin-top: 25px;
}
.lesson-img {
    padding-left: 0px;
    padding-right: 0px;
    position: relative;
}
.trial-badge {
    position: absolute;
    background-color: green;
    top: 10px;
    left: 25px;
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    padding: 3px 10px;
}
.lesson-content-header {
    padding-top: 15px;
    padding-right: 15px;
}
.lesson-content {
    padding-bottom: 15px;
}
.lesson-title h4 a {
    font-size: 22px; 
    font-weight: 600;
    color: #333131;
    text-decoration: none;
}
.lesson-title h4 a:hover {
    color: #ed6310;
    transition: .7s;
}
.lesson-status-completed i {
    color: green;
}
.lesson-status-locked i, .lesson-status-new i {
    color: #ccc;
}
.lesson-desc p {
    font-size: 15px;
    line-height: 20px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/css/all.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <div class="lesson">
        <div class="row">
            <div class="col-lg-4">
                <div class="lesson-img">
                    <img src="https://cdn.pixabay.com/photo/2019/04/07/23/11/content-marketing-4111003__340.jpg" alt=""
                        class="img-fluid">
                </div>
                <div class="trial-badge">
                    <span>Trial</span>
                </div>
            </div>
            <div class="col-lg-8 lesson-content">
                <div class="lesson-content-header d-flex justify-content-between">
                    <div class="lesson-title">
                        <h4><a href="#">This is the title of the lesson</a></h4>
                    </div>
                    <div class="lesson-status-completed"><i class="fas fa-check-circle"></i></div>
                </div>
                <div class="lesson-desc">
                    <p>This is the description of the lesson. Lorem ipsum dolor sit amet consectetur adipisicing elit.
                        Ullam aliquid nam adipisci in quae voluptate sunt fuga impedit. Ullam aliquid nam adipisci in
                        quae voluptate sunt fuga impedit. Ullam aliquid nam adipisci in quae voluptate sunt fuga
                        impedit.</p>
                </div>
            </div>
        </div>
    </div>
</div>

htmlcssbootstrap-4

Answer №1

give this code a shot:

.lesson-heading h2 {
    font-size: 24px;
    font-weight: 600;
}
.lesson {
    background-color: #ffffff;
    margin-top: 25px;
}
.lesson-img {
    padding-left: 0px;
    padding-right: 0px;
    position: relative;
}
.trial-badge {
    position: absolute;
    background-color: green;
    top: 10px;
    left: 25px;
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    padding: 3px 10px;
}
.lesson-content-header {
    padding-top: 15px;
    padding-right: 15px;
}
.lesson-content {
    padding-bottom: 15px;
}
.lesson-title h4 a {
    font-size: 22px; 
    font-weight: 600;
    color: #333131;
    text-decoration: none;
}
.lesson-title h4 a:hover {
    color: #ed6310;
    transition: .7s;
}
.lesson-status-completed i {
    color: green;
}
.lesson-status-locked i, .lesson-status-new i {
    color: #ccc;
}
.lesson-desc p {
    font-size: 15px;
    line-height: 20px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/css/all.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <div class="lesson">
        <div class="row">
            <div class="col-lg-4">
                <div class="lesson-img h-100">
                    <img src="https://cdn.pixabay.com/photo/2019/04/07/23/11/content-marketing-4111003__340.jpg" alt=""
                        class="img-fluid h-100">
                </div>
                <div class="trial-badge">
                    <span>Trial</span>
                </div>
            </div>
            <div class="col-lg-8 lesson-content">
                <div class="lesson-content-header d-flex justify-content-between">
                    <div class="lesson-title">
                        <h4><a href="#">Hey there! This is the title of the lesson</a></h4>
                    </div>
                    <div class="lesson-status-completed"><i class="fas fa-check-circle"></i></div>
                </div>
                <div class="lesson-desc">
                    <p>Behold! This is the description of the lesson. Lorem ipsum dolor sit amet consectetur adipisicing elit.
                        Ullam aliquid nam adipisci in quae voluptate sunt fuga impedit. Ullam aliquid nam adipisci in
                        quae voluptate sunt fuga impedit. Ullam aliquid nam adipisci in quae voluptate sunt fuga
                        impedit.</p>
                </div>
            </div>
        </div>
    </div>
</div>

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

WebpackError: The assignment of the property 'emulateTransitionEnd' to an undefined value cannot be completed

I've been attempting to implement Bootstrap in GatsbyJs, but it just seems to continually let me down. Is there a legitimate method to import Bootstrap without encountering the following error? WebpackError: Cannot set property 'emulateTransitio ...

reactjsbootstrap-4gatsby

Can the background color of a webpage be altered depending on the time of day?

https://jsfiddle.net/8x7p682z/ function initialize() { function setThemeForTimeOfDay() { const body = document.querySelector('body'); const hours = new Date().getHours(); if (9 <= hours && hours <= 12) body.sty ...

javascripthtmlcssbootstrap-4

Is it advisable to switch the doctype from HTML 4.01 or XHTML 1.0 to HTML5 for a web page?

When updating a legacy website to be more modern and "HTML5"-ish, is it considered safe to simply change the heading doctype as shown below? <!doctype html> The original doctype could be: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitiona ...

htmldoctype

Converting JavaScript code into PHP syntax

I'm curious about code organization. The original code in this snippet is functioning properly: <?php if (isset($_POST['submit'])){ ... ... $invalidField = 2; } ?> <!DOCTYPE html PUBLIC "-//W3C//DTD ...

javascriptphphtml

Element in the Middle

I have just started learning HTML and CSS, and I'm curious to know how I can center the links Home, About, and Contact in the header. HTML: <body> <header> <h1><a href="#">HBT</a> </h1& ...

htmlcss

When the window is scrolled to 50%, I would like to load some additional data

Looking to load data when the browser scrollbar reaches 50%... In jQuery, I created the following function: $(window).on('scroll', function () { alert("scrolling"); if ($(window).scrollTop() + $(window).innerHeight() > ...

javascriptjqueryhtml

Designing a patterned rectangle filled with stylish text

I am relatively new to the world of HTML and CSS, and I am encountering a specific challenge with CSS. My goal is to design a section that looks like this: ---Image--- --Text-- ---Image--- --Text-- ---Image--- --Text-- ---Image--- --Text-- The ma ...

htmlcsssass

Unable to animate a second click using jQuery/CSS

I'm having an issue with animating on click using CSS. The animation works fine on the first click, but it doesn't work on the second click. This is because the click event is being overridden by jQuery to enable the dropdown menu to open onClick ...

javascriptjquerycssanimation

Learn how to utilize interpolation within an *ngIf statement in Angular 2 in order to access local template

Consider the following scenario; <div *ngFor="item of items; let i = index;"> <div *ngIf="variable{{i}}">show if variable{{i}} is true</div> </div> Suppose I have variables named "variable0", "variable1",... Is there a way to ac ...

javascripthtmlangular

Tips for showing an image through a button in Angular 4

Currently, I am in the process of creating a simple website and I have encountered an issue. When I click on a button to display an image, it works fine. However, when I click on another button to display a different image, the previous image remains visib ...

htmlangulartypescript

Using Javascript to replace elements with input fields and text areas

I'm currently working on a unique project for my Wordpress blog, where I am developing a custom block editor using JavaScript on the frontend. The goal is to convert all elements from the post content into a series of inputs and textareas. To begin, ...

javascriptphphtmlwordpress

What are some ways to style CSS for links, such as a login button?

Check out this website You may have noticed the login button with a stylish black background created using CSS. How can I achieve a similar look? Some buttons are PHP statements while others are simple play links. I also need the register, lost password, ...

phphtmlcsswordpresshyperlink

Load jQuery to display the Bootstrap modal.ORUse jQuery to load and

My attempt to use the .load() function to display a bootstrap modal immediately on my page isn't working. The modal opens but cannot be closed afterward. The goal is to load a list of players in a modal whenever a team name with the class .team is cl ...

javascriptjqueryhtmltwitter-bootstrap

Why is applying CSS on an li element using .css() in JQuery not functioning?

Hey there! Could you please review my code? I'm attempting to add a top position to the <li> element using a variable in jQuery, but I'm not sure how to do it. Here's the code: <script> $(document).ready(function(){ ...

javascriptjquerycss

What is the best method for incorporating meta data, titles, and other information at dynamic pages using Node.js and Express?

I am currently exploring methods to efficiently pass data to the html head of my project. I require a custom title, meta description, and other elements for each page within my website. Upon initial thought, one method that comes to mind is passing the da ...

javascripthtmlnode.jsexpress

Having trouble retrieving an array element within an HTML table

Currently, I am working on a database project related to bar beer drinkers. To display the results of my queries on a local host website, I am running queries on my database and using Angular. The issue I am facing is that while I can see the query executi ...

htmlangularhtml-table

Trigger Javascript on 'Nearby' input from Html form

I have a JavaScript code that retrieves the latitude and longitude of users from their device for a local search. Although everything works correctly, I want to make sure the script is only executed if the user specifically selects "nearby" as the locatio ...

javascriptjqueryhtmlformsgeolocation

Slideshow feature in Bootstrap 4

Encountering an unusual problem with Bootstrap 4's carousel - it was functioning properly until I made some changes; even after deleting it and re-adding, the issue persists. The arrows seem to be misplaced view image <body> <ul class="nav j ...

htmlcssbootstrap-4

When the canvas is in full screen mode, my div elements are hidden

Currently, I am immersed in a 360-panorama project, utilizing panolens.js and three.js. While Panolens offers fullscreen mode functionality, the problem arises when entering this mode as the canvas conceals all of my div elements. One particular div elemen ...

javascripthtmlcssthree.js

Validation for Flask WTForms SubmitField triggered by form change

Currently, I am working on an update form using flask, wtforms, and bootstrap4. The form pulls values from the database and I want to disable the submit button if no changes are made to these database values. For example, if the username is a StringField ...

htmlflaskbootstrap-4wtforms