How to arrange images of different sizes within a Bootstrap grid

My challenge involves incorporating 3 images with different sizes into a Bootstrap grid of 3 x 4 columns:

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

This is causing disruption in my layout. My desired outcome looks like this:

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

How can I achieve this desired result using CSS?

 <div class="row text-center">

        <div class="col-md-4 mb-3 mb-md-0">
          <div class="image-1">
           <img src="assets/img/image_1.svg" class="mb-3">                      
            <h4>Lorem Ipsum</h4>
            <p>
              Autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae.
            </p>
          </div> 
          </div>
        </div>
        <div class="col-md-4 mb-md-0">
          <div class="image-2">
            <img src="assets/img/image_2.svg" class="mb-3">
            <h4>Dolor Sit Amet</h4>
            <p>
                Autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae.
            </p>
          </div>
        </div>
        <div class="col-md-4 mb-md-0">
          <div class="image-3">
              <img src="assets/img/image_3.svg" class="mb-3">
            <h4>consetetur sadipscing</h4>
            <p>
                Autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae.
            </p>
          </div>
        </div>
      </div>

Answer №1

To enhance the appearance of boxes with varying heights, consider incorporating a top padding on the smallest boxes while maintaining the box-sizing attribute set to border-box. By utilizing the box-sizing property in this manner, the internal content will appear compacted towards the bottom without disrupting the overall layout.

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

Issue with compiling Tailwindcss in nextjs JIT mode

Our current project involves using tailwindcss and things were going smoothly until the clients requested a "pixel perfect" design. This meant that every element needed to be set in pixels instead of rem units. Instead of adding countless classes like h-1p ...

How to apply custom styling to a specific element within an Angular Material 2 component using CSS based on its Id or

My EntryComponent features a material button menu where I attempted to customize the default style using ::ng-deep. However, the changes affected all button components in the parent Component as well. <style> ::ng-deep .mat-button{ max-width: 50 ...

Utilize a jQuery selector to target the initial element of every alphabet character

I'm seeking some assistance with jQuery selectors and have a specific scenario that I need help with. Here is the HTML structure I am working with: <ul> <li class="ln-a"></li> <li class="ln-b"></li> <li cl ...

Enable the automatic resizing of a div element

This div features inside: <div class="PF"> <img src="img" class="FollowerPic"> <span>Name</span> <div class="Text"></div> <div class="readURL"> ...

Accessing the facebox feature within a dropdown menu

Looking for assistance in creating a function to open a facebox when an option from a drop down list is selected. Here is what I have so far: <select><option value="www.google.com/" id="xxx"></option></select> In the header sectio ...

Is there an issue with this website link?

What is causing the Xul app to display the error message: XML Parsing Error: not well-formed when encountering this code snippet: <browser class="AppBar" type="content" src="test.html?img1=img1.jpg&img2=img2.jpg" flex="4"/> specifically ...

What is the best way to customize the appearance of the elements in the hamburger menu within a Bootstrap navigation bar?

I have successfully implemented a responsive navbar using Bootstrap 4. When the screen size is large, there are 2 buttons displayed, and when it's small, a hamburger menu appears. [insert image description here][1][insert image description here][2] ...

Automate the login process for a website and programmatically fill out and submit a form

I am currently trying to automate the login process on Skype's website using Selenium in C#. Everything goes smoothly until I reach the password field, which seems to be elusive to Selenium. I have tried various methods to locate the password field bu ...

Stable element placement in relation to its container

While dragging an element, it obtains a position: fixed. This particular element is located within a modal that is directly nested inside the body element. In the image below, the modal appears in gray, while the rest of the body is black, and the button ...

Stop the text from wrapping to the full width of its parent when it overflows onto the following line

When I shrink the width in responsive design, the text overflows to the next line and the text wrapper expands to fit the parent container. Is there a way to prevent this behavior so that it looks like the red container? I could add padding to the contain ...

Having trouble getting SCSS to function properly? (Updated Code)

Transitioning from CSS to SCSS is my current project. I decided to make the switch because of SCSS's nesting capabilities, which I find more convenient for coding. However, I'm facing some challenges getting it to work properly. In my regular CSS ...

Positioning a span to be below an input field

Below is the code for a Blazor component that includes a textbox which can be edited with the click of a button. @if (_editing) { <div class="floatingbox position-relative"> ...

The absence of an eye icon in the password field when using bootstrap 5

I'm having trouble positioning the eyeball icon to the right side of my form when using Bootstrap v5 and FontAwesome v5. Instead, the password field is being shifted further to the right compared to the username field, and the eye icon is not displayi ...

Organize a list using custom span values with JavaScript

<ul id="CoreWebsiteTopHeader_6_list"><li><a class="navigation" href="/seller"><span class="editableLinks" data-id="32638" data-sort="110">Seller</span></a></li><li><a class="navigation" href="/about">&l ...

Optimal placement and size for the slick slider

I am new to CSS and currently experimenting with the Slick slider on a project: My setup involves a div container that spans 100% of the width of the page. Inside this container, there is another div (housing the slider) that takes up 80% of the width. D ...

Streamline your processes by automating jQuery AJAX forms

I am looking to automate a click function using the code snippet below in order to directly submit form votes. Is there a method to develop a standalone script that can submit the votes without requiring a webpage refresh: <input type="submit" id="edit ...

Problem with input field borders in Firefox when displayed within table cells

Demo When clicking on any cell in the table within the JSFiddle using Firefox, you may notice that the bottom and right borders are hidden. Is there a clever solution to overcome this issue? I have experimented with a few approaches but none of them work ...

Laravel 8 - sweet alert functions properly, however, the ajax functionality is not functioning as expected

As a newcomer to Ajax, I am facing an issue with deleting records from the database using Sweet Alert2. Although my swal is working fine, the ajax function seems to be malfunctioning. Can anyone point out where the problem might be and suggest a solution? ...

Having issues with PHP not displaying your SQL query results?

Can someone lend a hand? I'm attempting to add some content as per the requirement of stackoverflow for more text instead of just code. ...

What is the best way to implement a grid view using Polymer?

I need some assistance with creating a grid view similar to the one shown in this image https://i.sstatic.net/uJHAW.jpg using polymer. I am feeling overwhelmed and confused about how to go about it. Should I use bootstrap along with polymer or any other ...