Set the gap size of the divider in a Square Grid Image using HTML

I need help adjusting the white space gap between my First Column and Second Column in a square grid. They currently appear too far apart, and I would like to specify exact measurements for this gap while keeping the pictures in a square shape. Additionally, being able to set row divider measurements would be helpful as well. Please refer to the green arrow in the picture link below for visual clarity.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>



<div class="container">
  <div class="row">
<div class="col-6 justify-content-center d-flex"><img class="img-thumbnail w-100" src="https://www.woodlandtrust.org.uk/media/100078482/Sycamore01.jpg?cb=-11897985&preset=gallery-tab-main-image"></div>
<div class="col-6 justify-content-center d-flex"><img class="img-thumbnail w-100" src="https://statesymbolsusa.org/sites/statesymbolsusa.org/files/styles/symbol_thumbnail__medium/public/primary-images/Applesfreshpicked.jpg?itok=YmYkBfY7"></div>

<div class="col-6 justify-content-center d-flex"><img class="img-thumbnail w-100" src="https://openbookphilly.com/wp-content/uploads/2016/11/bookstack.png"></div>
<div class="col-6 justify-content-center d-flex"><img class="img-thumbnail w-100" src="https://media.wired.com/photos/5b86fce8900cb57bbfd1e7ee/master/w_582,c_limit/Jaguar_I-PACE_S_Indus-Silver_065.jpgColumn"></div>
  </div>
</div>
</body>
</html>

For more information on creating an equal size square grid picture system using HTML, please visit: HTML Create an Equal Size Square Grid Picture System

htmlcsstwitter-bootstrap

Answer №1

To achieve this, you can customize the col-6 class by adjusting the padding as needed.

It is advisable to create an additional class to modify the padding instead of directly editing the col-6 class.

The default settings for col-6 in Bootstrap include:

padding-left: 15px;
padding-right: 15px;

I have created a class called nopadding with the following style:

.col-6.nopadding{ 
   padding: 0;
}

If you want to eliminate the space between the image and its border, you will also need to remove the padding from the image itself. Since the images have the class img-thumbnail, you can add the following CSS:

.nopadding .img-thumbnail { 
    padding: 0;
}

This setup results in the final outcome shown below:

.col-6.nopadding{ 
padding: 0;
}

.nopadding .img-thumbnail { 
padding: 0;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<div class="container">
  <div class="row">
    <div class="col-6 nopadding justify-content-center d-flex"><img class="img-thumbnail w-100" src="https://www.woodlandtrust.org.uk/media/100078482/Sycamore01.jpg?cb=-11897985&preset=gallery-tab-main-image"></div>
    <div class="col-6 nopadding justify-content-center d-flex"><img class="img-thumbnail w-100" src="https://statesymbolsusa.org/sites/statesymbolsusa.org/files/styles/symbol_thumbnail__medium/public/primary-images/Applesfreshpicked.jpg?itok=YmYkBfY7"></div>

    <div class="col-6 nopadding justify-content-center d-flex"><img class="img-thumbnail w-100" src="https://openbookphilly.com/wp-content/uploads/2016/11/bookstack.png"></div>
    <div class="col-6 nopadding justify-content-center d-flex"><img class="img-thumbnail w-100" src="https://media.wired.com/photos/5b86fce8900cb57bbfd1e7ee/master/w_582,c_limit/Jaguar_I-PACE_S_Indus-Silver_065.jpgColumn"></div>
  </div>
</div>
</body>
</html>

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

"Having the same meaning as $(this) in jQuery, the CSS

Is there a CSS equivalent to the Jquery selector $(this)? For example: .widget h4 { background: black } .widget:hover h4 { background: white } In this scenario, when any element with the .widget class is hovered over, the child h4 changes its background ...

cssselectorthis

unexpected alteration of text sizing in mathjax within reveal.js presentations

Something strange is happening with the font size in my slides. The code for each slide is the same, but there is an unexpected change between the 3rd and 4th slide. I cannot figure out what is causing this discrepancy. Oddly enough, when I remove the tit ...

javascripthtmlcssmathjaxreveal.js

Words appear on the screen, flowing smoothly from left to right

I am trying to create a hover effect where a caption appears when an image is hovered over. The text should slide in from left to right, causing the container to grow along the X axis as the image is hovered over. I have managed to make the text appear on ...

csscss-transitions

Sometimes, JQuery struggles to set input values accurately

Exploring the single page app sample provided here, I have encountered some anomalies when attempting to manipulate input controls with JQuery under certain conditions. Below is the consistent HTML structure followed by the JavaScript snippets in question. ...

javascriptjqueryhtmlbootstrap-4single-page-application

Handling an HTTP Get request by utilizing Server-Sent Events (SSE)

Exploring the possibilities of HTML5 and node.js has led me to test out Server Sent Events successfully using this example. My experiment then involved responding to a button press with an SSE. Upon clicking the "Increment" button, I extracted a number fr ...

htmlnode.jsserver-sent-events

Converting a JSON file into an HTML table using PHP

I need help figuring out how to display JSON data in an HTML table. I have a script that successfully outputs my JSON content, but I'm struggling to format it into a table. Below is the code I have so far: <?php $dir = "/Apache24/htdocs/reservat ...

phphtmljson

Tips for implementing styling in a material table within a reactjs application

Is there a different way to set the display property to inline-block since cellStyle doesn't seem to recognize it? How can I adjust the width of a specific column, let's say with the name title, without affecting the width of all other co ...

cssreactjsmaterial-uimaterial-table

Creating a simulated loading screen

I have created a preloader page for my website following tutorials, such as the one found here: https://codepen.io/bommell/pen/OPaMmj. However, I am facing a challenge in making this preloader appear fake without using heavy content like images or videos. ...

javascripthtmlcsssettimeoutpreloader

What is the process for updating a particular div element?

I am currently developing a webpage that allows users to select an item, and the relevant information will be displayed. On this page, I have incorporated two buttons: btnBuy0 and btnBuy1. The functionality I am aiming for is that when BtnBuy0 is clicked ...

javascripthtmlappendupdates

Showcasing Portfolio Work in a User-Friendly Mobile Design

Currently revamping my portfolio website and looking for ways to optimize the display of my personal projects. I have a card-like interface in place that works well on desktop but only shows one project at a time on mobile devices. Seeking solutions to imp ...

javascripthtmlcsssliderportfolio

Storing JSON location data in JavaScript

When converting JSON data into a list structure, I aim to use the "AAA.BBB[0].CCC.DDD[5].EEE" format as the ID. This way, any modifications made by a user to the content of that specific list item will directly affect the JSON data linked to that location. ...

javascriptjqueryhtmljson

Display the div without using javascript/jquery if the radio button is chosen

Could someone help me find a solution similar to the one mentioned here: If Radio Button is Selected Show Div I am specifically looking for a way to achieve this using only HTML and CSS, without involving JavaScript or jQuery. Any suggestions would be gre ...

htmlcss

Is there a way to synchronize the autohide duration for both the LinearProgress MUI and SnackBar components?

Can someone help me align my SnackBar with the LinearProgress so that they both have an auto-hide duration of 4 seconds? I've been struggling to figure it out for hours and haven't found a solution yet. Could the issue be in the useEffect part of ...

javascriptcssreactjsmaterial-ui

Bootstrap Button Loader

I am facing an issue with integrating bootstrap and ASP.NET. Today, I attempted to add some style to the buttons on my webform but encountered some issues. For instance, when I use input or simple buttons, Bootstrap works perfectly fine. However, when I tr ...

asp.nettwitter-bootstrapwebforms

Divide the output results into two equal horizontal sections within the same HTML table

Is there a way to dynamically split the output of a specific result into two horizontal sections that fit within the browser width? The number of rows returned from the service is variable, so a fixed solution won't work. I also want to avoid manually ...

javascripthtmlcssangularjshtml-table

Challenges encountered on Chrome browser when using label:hover along with relative positioning

Currently, I am in the process of creating a price list for a section of a website I'm developing. To make it interactive, I am utilizing checkbox type inputs along with labels so that users can select the services they desire, and the webpage will au ...

cssgoogle-chromehoverpositioningcss-position

How can I specify the exact width for Bootstrap 3 Progress Bars?

I have a single page that displays all my files in a table format, and I also have the count of open and closed files. My goal is to represent the percentage of closed files using a progress bar. The width of the progress bar should change based on this p ...

javascripthtmlcsstwitter-bootstrap-3

Expand the image background to fit within a div container

Below is the code snippet I am working on: <div id="intro_section_upper" > <%= image_tag("video_background.jpg", :id=>"video_bg") %> <div id="video_table_main" > <table class=" ...

htmlruby-on-railscss

Adjusting the image placement within a modal window (using bootstrap 3)

Behold, an example modal: <!-- Large Modal --> <div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"> <div class="modal-dialog modal-lg"> <div class="modal-content"> ...

javascriptjqueryhtmlcsstwitter-bootstrap

Issues with fundamental JavaScript client-side code

As a newcomer to the world of javascript and jQuery, I am diving into my first experiment with javascript. My initial focus has been on changing questions by clicking next or previous buttons. The goal is to create a dynamic quiz webpage that updates quest ...

javascriptjqueryhtml