Ways to resolve the issue of columns having unequal heights in Bootstrap

I'm a novice when it comes to bootstrap. I'm endeavoring to put together a gallery showcasing some magnificent artwork. However, I've encountered an issue. The columns are all taking the same height even though the images aren't particularly large. How can I eliminate the excess space?

<div class="container-fluid">
      <div class="row content" id="images">
        <div class="col-md-4">
          <img src="..\images\allyson-beaucourt-HaD6zYONkg0-unsplash.jpg" alt="" class="img-fluid">
        </div>
        <div class="col-md-4">
          <img src="..\images\annie-spratt-52hSxHwXE7I-unsplash.jpg" alt="" class="img-fluid">
        </div>
        <div class="col-md-4">
          <img src="..\images\amr-taha-ig_Qc8qoTSI-unsplash.jpg" alt="" class="img-fluid">
        </div>
        <div class="col-md-4">
          <img src="..\images\annie-spratt-Pzyyzaiy-LE-unsplash.jpg" alt="" class="img-fluid">
        </div>
        <div class="col-md-4">
          <img src="..\images\arno-senoner-FOM8031NAG8-unsplash.jpg" alt="" class="img-fluid">
        </div>
        <div class="col-md-4">
          <img src="..\images\bp-miller-f6BffCg5Ymc-unsplash.jpg" alt="" class="img-fluid">
        </div>
      </div>
</div>

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

This is the desired layout. https://i.sstatic.net/f8ZbK.jpg

htmlcssbootstrap-4

Answer №1

This information could prove to be beneficial.

<div class="container-fluid">
<div class="row">
    <div class="col-md-6 content" id="images">
        <div class="col-md-12 ">
             <img src="..\images\allyson-beaucourt-HaD6zYONkg0-unsplash.jpg" alt="" class="img-fluid">
        </div>
        <div class="col-md-12  ">
            <img src="..\images\annie-spratt-52hSxHwXE7I-unsplash.jpg" alt="" class="img-fluid">
        </div>
        <div class="col-md-12  ">
            <img src="..\images\amr-taha-ig_Qc8qoTSI-unsplash.jpg" alt="" class="img-fluid">
        </div>
    </div>

    <div class="col-md-6 content" >
        <div class="col-md-12  " style="max-height: 50%">
            <img src="..\images\annie-spratt-Pzyyzaiy-LE-unsplash.jpg" alt="" class="img-fluid">
        </div>
        <div class="col-md-12  " style="max-height: 50%">
            <img src="..\images\arno-senoner-FOM8031NAG8-unsplash.jpg" alt="" class="img-fluid">
        </div> 
      </div>
</div>

explore more about bootstrap grid 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

Capturing Vuejs data for various pathways

Currently, I am developing a Vue file that contains the following code: <router-link :to="{name: 'detailed'}" tag='li' @click='getData("test")'> testing</router-link> In the script section, the code looks like th ...

javascripthtmlvue.js

Issue with JavaScript function not triggering in Internet Explorer

Here is the code snippet I am working with: <body onLoad="subcatSelection();"> The function that should run on body load is located in a .js file that is included using this code: <script type="text/javascript" src="bincgi/search_lists.js"& ...

javascripthtmlinternet-explorerbrowser

Is it possible to apply the same styling to multiple elements simultaneously in jQuery by grouping them as in CSS?

Keeping code neat is essential. In CSS, elements can be grouped like this: .element1, .element2, .element3, .element4, .element5, .element6 { font-weight:bold; } I am curious if there is a similar method in jQuery or if each element needs to be set indi ...

jquerycssreadability

How to perfectly align an image within a button using CSS

I need help creating a button with an image using the following code: .btnWo { position: relative; outline: none; border: none; height: 150px; width: 400px; border-radius: 10px; color: #FFF; } .btnWo img { height: 150px; ...

htmlcss

What is the best way to expand and collapse a mat-expansion-panel using a button click

Is it possible to expand a specific mat-expansion-panel by clicking an external button? I've attempted linking to the ID of the panel, but haven't had any luck... <mat-expansion-panel id="panel1"> ... </> ... <button (click)="doc ...

htmlangularangular-material

Get the current temperature by clicking on the "simpleweather

Working on an app using jQuery with the SimpleWeather plugin for HTML5 and Cordova. Looking to overlay a background-image with the temperature. -HTML-HEAD- $(document).ready(function() { $.simpleWeather({ location: '', wo ...

jqueryhtmlcsscordova

Tips for vertically aligning arrows in slick slider in relation to the image with text below

As shown in the image, my arrows are positioned at the top 50% relative to the height of the slide container. [1]: https://i.sstatic.net/DjEZh.png ...

javascriptcssslick.js

Issues with CSS positioning

I'm facing an issue with the jQuery drop-down bar slipping behind images on a specific page that uses jQuery innerfade. You can see the problem here: <?php include('perch/runtime.php'); ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML ...

javascriptjqueryhtmlcss

Using clip-path in SVG works perfectly on images, but unfortunately it does not work on div

I came across an interesting example on MDN about using a clip-path SVG on an image. However, it seems that the same clip-path does not work properly when applied to a div. Can anyone shed some light on: The reason why this code is not achieving the inte ...

csssvgclip-path

The form contains an HTML table, but unfortunately, the buttons are not functioning as expected

I have encountered an issue with my form and table setup that I cannot seem to resolve. Despite researching similar problems, I have not been able to find a solution. In the code snippet provided below, you can see that when I click on the buttons for De ...

phphtmlformshtml-table

Is it possible to incorporate Excel files into a web-based system that only supports HTML?

Currently, I am working on an HTML-based system where my supervisor has specified that only HTML can be used to keep things easy and simple. My question is: Can Excel files be added to the HTML-based system, and if so, is it possible to work with, save, a ...

html

The dropdown menus in Bootstrap are expanding outside the screen when opened

When I click on the dropdown in the Navbar on the right side, the menus open up far to the right and are not visible until I scroll horizontally. Here is the code snippet: <nav class="navbar navbar-expand-lg navbar-light bg-light"> < ...

htmlcssangulartwitter-bootstrap

Bootstrap causing malfunction of JQuery bounce animation

Looking to create a bouncing popup on hover using Bootstrap (v3.0.0) panel, but encountering an issue where the panel changes its width after the bounce effect. For reference: http://fiddle.jshell.net/YxRvp/ If anyone has a solution for this problem, ple ...

jquerycsstwitter-bootstrapbounce

In Pure JavaScript, an HTML element is added every time the click event is triggered

Hey everyone, I'm facing a small issue and I could use some help fixing it. I need to implement an onclick event that adds HTML code every time it's clicked. I am hesitant to use innerHTML due to its potential risks. Here is the code snippet: bu ...

javascripthtml

Is there a way to retrieve the sub-child menu data from a JSON file?

I am currently working on creating a horizontal menu from a json file. However, I am facing issues in retrieving the subchild elements properly. Below is an example of my json file: var data = [{ "menu":[ { "MenuId":1, ...

javascriptjquerycssjsonmenu

When viewing on mobile devices, the hover effect in responsive web design

While working on a responsive website, I encountered some challenges. I have a Div containing an image and some information. When a user hovers over this div, the background changes and 3 buttons appear. However, the issue arises when using a mobile devi ...

javascripthtmlcss

Is it possible to design this layout within a flex container while ensuring the specific order of elements remains intact for potential future swaps?

Check out this example layout <div class="flex"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item"& ...

htmlcssflexbox

Executing several Javascript functions when the page is loaded

I have attempted to invoke 4 JavaScript functions from the HTML body when the page is loaded. Each function calls a JSP servlet to retrieve data from a database and populate the respective list boxes. Currently, I am focusing on the edit screen where I am ...

javascripthtmljsp

What is the recommended way to include an image in a v-for loop in Vue.js?

I have attempted various online solutions, but I am still unable to display images on the screen. Could it be a simple mistake? The file names and folders are accurate. When providing the path, I aim to retrieve the image associated with the sub-club name ...

javascripthtmlcssimagevue.js

Steps for creating an edit feature when hovering over a div

Is there a way to implement a hover effect on a dynamically created table to display a small edit button in the top right corner of each cell? The goal is to have this button trigger a popup window when clicked. Something similar to the image below: https ...

javascriptcssmodel-view-controller