What is the best approach to ensure consistent spacing between columns of the same height in Bootstrap?

I'm currently working on a website project that involves displaying images in a specific grid format. To achieve this, I am utilizing Laravel and Bootstrap.

The primary objective is to create a grid layout with spacing that maintains the height of the images. However, I encountered an issue when attempting to add a border to create space between the divs. This resulted in a border appearing not only to the right but also at the bottom of the first two divs, causing them to have a smaller height compared to the last one:

Image: https://gyazo.com/9bd97d19073a123966a652e3603ebfd4

[![The first two rectangles display a border bottom in addition to the border right]

For reference, this is the type of grid I am aiming to achieve: https://gyazo.com/337d9e044a56e327e0c7e69069ae5c17

Below is the code I have implemented thus far:

   <div class="row g-0 mx-0">
        <div class="col-md-3">
            <img src="https://i.ibb.co/Ky415Wt/imageonline-co-placeholder-image-2.jpg" alt="" class="img-fluid" style="border-right: 10px solid white;">
        </div>
        <div class="col-md-3">
            <img src="https://i.ibb.co/Ky415Wt/imageonline-co-placeholder-image-2.jpg" alt="" class="img-fluid" style="border-right: 10px solid white;">
        </div>
        <div class="col-md-6">
            <img src="https://i.ibb.co/r5LDwny/imageonline-co-placeholder-image-3.jpg" alt="" class="img-fluid" style="border-right: 10px solid white;">
        </div>
    </div>

I'm puzzled as to why adding a border-right also results in a border-bottom. I attempted using margin instead, but it caused the larger image to extend beyond the row boundary:

Here is a visual of the issue: https://gyazo.com/5a785de16398756021dd843ba038cbc6

If anyone could provide guidance on how to achieve the desired outcome, it would be greatly appreciated. https://gyazo.com/337d9e044a56e327e0c7e69069ae5c17

Answer №1

It appears that Bootstrap 4 is being used to create this layout, as indicated by the presence of bootstrap-4 in the tags. The issue with your code not functioning properly is likely due to the fact that g-0 is a feature of Bootstrap 5. It seems you may have inadvertently consulted the Bootstrap v5 documentation.

If you are indeed utilizing bootstrap 4, you can resolve this issue by adding no-gutters to the row containing div.

In order to maintain consistent image heights, I recommend incorporating some custom CSS with a value of 40vh.

I have prepared an example for you to reference:

Answer №2

With the assistance of a colleague, I was able to find the optimal solution. Sharing the code snippet below for anyone encountering a similar issue:

<div class="row justify-content-between" style="margin-top: 50px">
        <div class="col-md-4">
            <img src="https://example.com/image1.jpg" alt="" class="img-fluid">
        </div>
        <div class="col-md-4">
            <img src="https://example.com/image2.jpg" alt="" class="img-fluid">
        </div>
        <div class="col-md-4">
            <img src="https://example.com/image3.jpg" alt="" class="img-fluid">
        </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

Tips for enabling the background div to scroll while the modal is being displayed

When the shadow view modal pops up, I still want my background div to remain scrollable. Is there a way to achieve this? .main-wrapper { display: flex; flex-direction: column; flex-wrap: nowrap; width: 100%; height: 100%; overflow-x: hidden; ...

Numerous Iterations of Bootstrap 5 Management

Previously in Bootstrap 4, I achieved the creation of multiple tooltips on document ready using the following code: $('div.sidebar-menu i[data-toggle="tooltip"]') .tooltip({ boundary: "viewport", delay: { "show" ...

Arrangement of content in three columns with a flex direction set to column

In my current project, I am working on creating a view of items that are mapped using React. The main objective is to set up a 3-column layout with items arranged vertically within each column. Each item panel contains a hidden div element which expands wh ...

The radio button's checked attribute fails to function

I am currently working on adding a hover effect to radio button labels, and while it is functioning correctly, I would like to achieve the following: When a radio button is selected, I want the corresponding label to have a background color. Despite tryi ...

Unusual Grid Method Behavior in Tkinter

I need help with achieving this desired outcome with my code: Creating 4 frames with the following layout (dashes represent column spans): -X- XXX Each of these frames (represented by X's) should have two rows like so: cowN,1 cowN,2 The issue ...

How can I modify the appearance of the bootstrap scrollbar with scrollspy?

I'm struggling to modify the color of the scrollbar in Bootstrap scrollspy despite having a functional scrollbar. Here is an example of my code: HTML: <body> <div class="container, scrollbar" id="myScrollspy"> <div class=" ...

Add a stylish border to your image within a container of fixed width

I am facing a challenge with a fixed width DIV element. Inside this element, there is a second DIV containing only an IMG element. My goal is to add a border to the image without exceeding the boundaries of either of the enclosing DIV tags. Solution #1: ...

Using Nuxt.js with Vagrant and Homestead for seamless port forwarding

I am encountering an issue where I can't seem to connect to my Nuxt.js application OUTSIDE of the vagrant box (i.e., on my host or local machine), although it is able to fetch content INSIDE the vagrant box. Here's what I'm doing: I'v ...

Implementing server side authentication with Laravel Breeze and Next.js

I recently set up a new project using Laravel Breeze and Next.js. I followed the official Laravel boilerplate found at https://github.com/laravel/breeze-next. The setup is working well, but I'm wondering if there's a way to verify user authentica ...

Overlapping divs are observed when utilizing absolute positioning in CSS

I am facing a challenge with placing the div identified by our_team below the div with the ID of services. When I use absolute positioning, the former ends up overlapping the latter. The services div transitions to display information when hovered over du ...

Stay tuned for Quasar's input validation event notifications

Within my Vue3 Quasar application, I have implemented a component structure similar to the following: <template> <div class="q-pa-md"> <div id="myCustomLabel">{{ props.label }}</div> <q-input r ...

Creating Custom Pagination in Laravel Using Bootsrap 5

Is there a way to customize the pagination on mobile view in Laravel with Bootstrap 5? The default pagination only shows previous and next buttons. I need it to display as "prev 1 2 3 next". Does anyone have a solution for this? This is what I expect the ...

Guide on how to use a tooltip for a switch component in Material-UI with React

I am attempting to incorporate a tooltip around an interactive MUI switch button that changes dynamically with user input. Here is the code snippet I have implemented so far: import * as React from 'react'; import { styled } from '@mui/mater ...

Utilize varying sizes within a single column using Bootstrap

I am struggling to create a heading that spans the entire width of my listview within Bootstrap. Despite being in the same column, the heading does not extend as far as the listview. I desire for the title to stretch all the way across the list, leading m ...

Tips for inserting a personalized image or icon into the ANTD Design menu

Can anyone help me figure out how to replace the default icons with a custom image or icon in this example: https://ant.design/components/layout/#components-layout-demo-side I attempted to do it by including the following code: <Menu.Item to="/" key=" ...

The issue with the Material UI Drawer component is that it is casting a shadow even when

Having some trouble with the Material UI Drawer component. Whenever I try to display it on my webpage, it automatically focuses on the inner div, adding a shadow or border if the focus is anywhere else. Does anyone know why this shadow appears and how to r ...

Issue with displaying Django Bootstrapv5 component in carousel item

I am struggling to display at least 5 cards in each carousel-item, but currently it only shows one card per item. Can you help me figure out what needs to be done? {% for knowledge in knowledges %} <div class="carous ...

Is anyone else experiencing issues with their imagemap due to Twitter Bootstrap?

I'm excited to ask my first question here as a beginner. I am truly grateful for all the assistance and guidance I have received from this site. I hope that the questions I ask can also benefit others in some way :) Although imagemaps may not be used ...

Styling tables with borders in CSS

If a table is set to have a border at a high level, how can I ensure that classes inheriting from it do not have any borders set? table,td,th { border: 1px solid #0B6121; } How can I make sure that my other table has no borders at all? table.menu { ...

Toggle the visibility of an element with a single button click

Below is a snippet of my sample code: SAMPLE HTML CODE: <ul> <li class="item"> item 1 </li> <li class="item"> item 1 </li> <li class="item"> item 1 </li> <li class="item"> item 1 </li> <l ...