Is there a way to have a content's columns adjust to the size of an image?

I'm currently struggling with a layout issue. I have an image on the left and want the content columns on the right (title, lorem...) to adjust their height to match the image. How can I achieve this?

I'm using Bootstrap v5.1.1

Current image:

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

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="56343939222522243726166378677867">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<div class="container">
  <div class="row">
      <div class="col-md-4">
        <div class="col-md-4 black h-100">
          <img src="https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/domestic-cat-lies-in-a-basket-with-a-knitted-royalty-free-image-1592337336.jpg" alt="" style="width:300px;">
        </div>
      </div>
      <div class="col-8">
        <h1>Title </h1>
        <h6>Content</h6>
        <p>Date: June 23, 2021</p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos assumenda odio impedit, nobis, delectus suscipit nam atque sint maxime voluptates molestias dignissimos blanditiis numquam aperiam asperiores dolorem ad veniam. Vel.
        <br>Read more
      </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0e6c61617a7d7a7c6f7e4e3b203f203f">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>

htmlcsstwitter-bootstrapbootstrap-5

Answer №1

  1. Embrace Bootstrap's flex grid system, rather than manually setting column sizes.
  2. Utilize the col-auto class on image columns to allow them to adjust to the image's width.
  3. Avoid inline styling for grids and content as it can complicate development and maintenance. Instead, use semantic class names for elements like images to easily modify size values in the future.

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0b6964647f787f796a7b4b3e253a253a">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">

<style>
  .size-medium {
    width: 200px;
  }
</style>

<div class="container">
  <div class="row">
    <div class="col col-auto">
      <div class="col-md-4 black h-100">
        <img class="size-medium" src="https://via.placeholder.com/300" alt="">
      </div>
    </div>

    <div class="col">
      <h1>Title </h1>
      <h6>Content</h6>
      <p>Date:june 23 2021</p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos assumenda odio impedit, nobis, delectus suscipit nam atque sint maxime voluptates molestias dignissimos blanditiis numquam aperiam asperiores dolorem ad veniam. Vel.
      <br>Read more
    </div>
  </div>
</div>

Answer №2

you have misplaced the col-md-4 class

 <div class="row">
         <img class="col-md-4 p-0" src="https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/domestic-cat-lies-in-a-basket-with-a-knitted-royalty-free-image-1592337336.jpg" alt="">
      <div class="col-8">
        <h1>Title </h1>
        <h6>Content</h6>
        <p>Date:june 23 2021</p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos assumenda odio impedit, nobis, delectus suscipit nam atque sint maxime voluptates molestias dignissimos blanditiis numquam aperiam asperiores dolorem ad veniam. Vel.
        <br>Read more
      </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

There seems to be a glitch with the email validation process

The validation issue in the email field is causing the is-valid effect to appear incorrectly. Although the email format is not valid (not 'gmail.com' format), a green outline and checkmark are displayed. How can I adjust this to work properly lik ...

htmlcssvalidationbootstrap-4

Some elements are not responding to margin-top properly

I am facing a problem where 2 elements are not responding to the specified margins of margin: 260px 0 0 0; or margin-top: 260px;. Despite inspecting the elements in IE's dev tools and confirming that the margin is set, the elements appear at the top o ...

htmlcsslayout

Organize group data by month in a visually appealing table using HTML/PHP with

I have successfully implemented a code that prints HTML table rows from a database table and sorts them by date. The challenge lies in the fact that the date is stored as VARCHAR (due to a pre-existing project with an active database used in a PHP web app ...

phphtmlsql

CSS Troubleshooting: Error in Outlining When Using Block Display

I am attempting to create a combobox using HTML and CSS where each item is displayed on a separate line and lights up blue when hovered over, similar to Google's design. The basic setup is simple. I have a div with links (a) inside, and each link is s ...

htmlcss

The parent div's height is not compatible with the CSS grid

I created a CSS grid layout featuring a header, side menu, and scrollable content. My goal is to test this layout in a container div where I've specified the width and height. The layout adjusts well according to the container's width, but seem ...

htmlcsslayoutcss-grid

Is it possible to utilize Javascript instead of PHP Curl to present JSON API data?

After successfully displaying JSON API data from openweathermap.org on my HTML webpage using PHP Curl, I am now seeking help to achieve the same output using Javascript. My PHP script retrieves JSON data from the source, and here is a snippet of that PHP c ...

javascriptphphtmljsoncurl

Triggering scroll snapping in CSS based on a different user action than just scrolling

Take a look at this example: https://codesandbox.io/s/spring-wood-0bikbb?file=/src/styles.css Try this to recreate the issue: Click on the input at the top Scroll to the bottom, then click on an empty area Observe how the screen jumps back up to the top ...

css

Looking for assistance with accessing elements using the "document.getElementById" method in Javascript

Below is the code snippet I am working with: <html> <head> <script> function adjustSelection(option) { var selectList = document.getElementById("catProdAttributeItem"); if (option == 0) { ...

javascripthtml

Tips on extracting the value from an HTML input control

Looking for some assistance with a table generated by a 3rd party control. The table consists of only one row and one column containing HTML text like this: <p> this is a test</p> <p> <input name="amount" type="text" value="th ...

c#.netasp.nethtml

What is the best way to have a single item in a list displayed in two columns?

Can the angular repeat achieve this functionality? I am looking to loop the two elements together. Any assistance would be greatly appreciated! Controller: $scope.date=[ {ID:1,Date:'2016-11-12'}, {ID:2,Date:'2016-11-15'}, ...

javascripthtmlangularjsangularjs-ng-repeat

What is the best way to dynamically adjust the size of a grid of divs to perfectly fit within the boundaries of a container div without surpassing them?

Currently, I am working on a project for "The Odin Project" that involves creating a web page similar to an etch-a-sketch. I have made some progress, but I am facing a challenge with dynamically resizing a grid of divs. The issue lies with the container d ...

javascriptjqueryhtmlcss

What is the correct way to show a PHP script as an HTML page following an AJAX call?

Attempting to utilize AJAX to call a php file that will display an html page from my js. Below is the php file in question: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv=& ...

javascriptphphtmljquery

Enhance a link using jQuery to allow it to expand and collapse

I am currently working on an MVC view that features a 3-column table showcasing a list of products. The first column, which contains the product names, is clickable and directs users to a specific product page. I am looking to implement functionality where ...

javascriptjqueryhtmlcss

Ways to display content exclusively to logged-in users

Currently, I am working on a website and facing a challenge in displaying certain elements on the navbar only if the user is logged in. The structure of my project involves using inheritance, which means that the navbar is included in my layout.html file. ...

pythonhtmlinheritanceflaskconditional-statements

Clicking to close tabs

I am currently working on implementing a tab functionality on my website and I want these tabs to be responsive. Here is the code snippet I have been using: function openCity(evt, cityName) { var i, tabcontent, tablinks; tabcontent = document.ge ...

javascriptjqueryhtmlcss

Position two div elements so that the second div expands to occupy the entire available space

I am struggling with aligning two divs within a container div, one on the left and one on the right. I am using flexbox for alignment purposes, as shown in the code snippet below. .box { display: flex; align-items: center; just ...

htmlcssflexbox

What is the process for including body text in a Bootstrap tooltip?

I am attempting to enhance a Bootstrap tooltip by adding body text, as it typically only includes a basic title. After reviewing the Bootstrap 5 documentation, it seems that the simplest approach is to utilize the template option: template Base HTML used ...

javascripthtmlcssbootstrap-5twitter-bootstrap-tooltip

Introducing a new div element completely disrupts the overall layout

Take a look at the code I have provided below. http://jsfiddle.net/xymgwonu/3/ Everything was working perfectly fine until I introduced a new div with the class name <div class="bubble"></div>. This caused some issues with the overall design. ...

htmlcssbootstrap-4

What is the process for extracting the time value from a jQuery timepicker?

I have been attempting to retrieve values from my time picker when a selection is made, but I am not seeing any values returned nor displayed in my HTML timepicker input field. Despite trying various methods, none have proven successful thus far. Method ...

javascriptjqueryhtmltimepicker

Generating PDF files from HTML documents using Angular

I am currently working on an Angular 11 application and I have a specific requirement to download a PDF file from a given HTML content. The challenge is that the HTML content exists independent of my Angular app and looks something like this: < ...

javascripthtmlangularpdfpdfmake