Bootstrap 4 image gallery with thumbnails sizing

I'm facing an issue with my responsive image gallery that has only 6 thumbnails. Everything looks great on large and medium devices, but in mobile view, the thumbnails appear too small. Adding padding doesn't work as it breaks the side margins alignment. Is there a way to make the thumbnails slightly bigger without affecting the side margins? I've included images for better understanding.

Here is an image showing the aligned side margins along with the small thumbnails:

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

And below you can see what happens when padding is added; the thumbnails are larger but the side margins lose their alignment:

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

.container {
  max-width: 98%;
  margin: 0 auto;
}

.image-container {
  background-color: #ffffff;
  padding: 10px;
}

.main-image-container img {
  max-width: 100%;
  height: auto;
}

.thumbnail-image-container img {
  max-width: 100%;
  height: auto;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<div class="container mt-4">
  <div class="row">

    <div class="col-lg-7 image-container">
      <div class="row">
        <div class="col-12 main-image-container img-fluid">
          <img src="https://placeholdit.co//i/1280x720?&text=Test">
        </div>
      </div>
      <div class="row pt-2">
        <div class="col-2 thumbnail-image-container img-fluid">
          <img src="https://placeholdit.co//i/1280x720?&text=Test">
        </div>
        <div class="col-2 thumbnail-image-container img-fluid">
          <img src="https://placeholdit.co//i/1280x720?&text=Test">
        </div>
        <div class="col-2 thumbnail-image-container img-fluid">
          <img src="https://placeholdit.co//i/1280x720?&text=Test">
        </div>
        <div class="col-2 thumbnail-image-container img-fluid">
          <img src="https://placeholdit.co//i/1280x720?&text=Test">
        </div>
        <div class="col-2 thumbnail-image-container img-fluid">
          <img src="https://placeholdit.co//i/1280x720?&text=Test">
        </div>
        <div class="col-2 thumbnail-image-container img-fluid">
          <img src="https://placeholdit.co//i/1280x720?&text=Test">
        </div>


      </div>
    </div>

htmlcssbootstrap-4image-gallery

Answer №1

To achieve a consistent look, we can apply the same padding to all col-* classes by using Bootstrap's padding classes like p-*. For example, adding the p-1 classes to the main-image-container and thumbnail-image-container elements will provide uniform spacing.

.container {
  max-width: 98%;
  margin: 0 auto;
}

.image-container {
  background-color: #ffffff;
  padding: 10px;
}

.main-image-container img {
  max-width: 100%;
  height: auto;
}

.thumbnail-image-container img {
  max-width: 100%;
  height: auto;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<div class="container mt-4">
  <div class="row">

    <div class="col-lg-7 image-container">

      <div class="row">
        <div class="col-12 p-1 main-image-container img-fluid">
          <img src="https://placeholdit.co//i/1280x720?&text=Test">
        </div>
      </div>

      <div class="row pt-2">
        <div class="col-2 p-1 thumbnail-image-container img-fluid">
          <img src="https://placeholdit.co//i/1280x720?&text=Test">
        </div>
        <div class="col-2 p-1 thumbnail-image-container img-fluid">
          <img src="https://placeholdit.co//i/1280x720?&text=Test">
        </div>
        <div class="col-2 p-1 thumbnail-image-container img-fluid">
          <img src="https://placeholdit.co//i/1280x720?&text=Test">
        </div>
        <div class="col-2 p-1 thumbnail-image-container img-fluid">
          <img src="https://placeholdit.co//i/1280x720?&text=Test">
        </div>
        <div class="col-2 p-1 thumbnail-image-container img-fluid">
          <img src="https://placeholdit.co//i/1280x720?&text=Test">
        </div>
        <div class="col-2 p-1 thumbnail-image-container img-fluid">
          <img src="https://placeholdit.co//i/1280x720?&text=Test">
        </div>
      </div>

    </div>

  </div>
</div>

Another approach is to organize the thumbnails into two rows with proper col-* classes. This arrangement ensures a neat display as demonstrated in the following example:

.container {
  max-width: 98%;
  margin: 0 auto;
}

.image-container {
  background-color: #ffffff;
  padding: 10px;
}

.main-image-container img {
  max-width: 100%;
  height: auto;
}

.thumbnail-image-container img {
  max-width: 100%;
  height: auto;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<div class="container mt-4">
  <div class="row">

    <div class="col-lg-7 image-container">

      <div class="row">
        <div class="col-12 main-image-container img-fluid">
          <img src="https://placeholdit.co//i/1280x720?&text=Test">
        </div>
      </div>

      <div class="row pt-1">
        <div class="col-4 col-md-2 mt-2 thumbnail-image-container img-fluid">
          <img src="https://placeholdit.co//i/1280x720?&text=Test">
        </div>
        <div class="col-4 col-md-2 mt-2 thumbnail-image-container img-fluid">
          <img src="https://placeholdit.co//i/1280x720?&text=Test">
        </div>
        <div class="col-4 col-md-2 mt-2 thumbnail-image-container img-fluid">
          <img src="https://placeholdit.co//i/1280x720?&text=Test">
        </div>
        <div class="col-4 col-md-2 mt-2 thumbnail-image-container img-fluid">
          <img src="https://placeholdit.co//i/1280x720?&text=Test">
        </div>
        <div class="col-4 col-md-2 mt-2 thumbnail-image-container img-fluid">
          <img src="https://placeholdit.co//i/1280x720?&text=Test">
        </div>
        <div class="col-4 col-md-2 mt-2 thumbnail-image-container img-fluid">
          <img src="https://placeholdit.co//i/1280x720?&text=Test">
        </div>
      </div>

    </div>

  </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

How can I center align all images using Bootstrap?

My current grid images are aligned in a specific way. https://i.sstatic.net/RmNE9.png However, I aim to adjust the grid images to look like this, specifically focusing on centering "img 1". How can I achieve this? https://i.sstatic.net/frNvp.png HTML ...

htmlcssbootstrap-4

Using JavaScript to Transmit URL

Imagine I have a URL similar to this: http://localhost:8000/intranet/users/view?user_id=8823 All I aim to achieve is to extract the value from the URL using JavaScript, specifically the user_id (which is 8823 in this instance), and transmit it through an ...

javascripthtmliframe

Getting the text from a Selenium element can become tricky when dealing with product discounts that alter the element

(Programming) I am working on selecting random products from a website, some with discounts and some without. For instance: How do I retrieve product 748 (without discount)? or How do I retrieve product 419 (with discount)? When the product ha ...

javahtmlseleniumtestingautomated-tests

Tips for modifying multiple divs with the same class using querySelector

I am curious about how to change the class on multiple divs at once using JavaScript. In the example below, only the first use of the class is recognized, while all subsequent ones are ignored. querySelectorAll does not seem to work. Thank you in advan ...

javascripthtmlcssjquery-selectors

Creating a top-notch design with a standard app vibe (Material Design)

For the past year, I have been using Cordova to create apps by converting HTML, JavaScript, and CSS code into .apk files. However, I have struggled to achieve the same level of professionalism and "normal" feel that popular Android apps like WhatsApp posse ...

javascriptandroidhtmlcordovamaterial-design

Exploring ways to transfer a function variable between files in React

Currently, I am working on a quiz application and have the final score stored in a function in app.js. My goal is to generate a bar graph visualization of the user's results (e.g. 6 right, 4 wrong) based on this score. To achieve this, I created anoth ...

javascripthtmlreactjschart.js

What is the best way to design a bookmarklet that can overlay an HTML/div layer and apply CSS styles from an

Is there a way to incorporate a bookmarklet that can bring in a new layer/div with additional HTML and CSS from an external file, overlaying it on the current page? If anyone has an example of a bookmarklet that achieves this, would you be willing to shar ...

javascriptjquerycsshtmlbookmarklet

Converting Ajax to JSON with Jquery offline and Manifest for enhanced offline web applications

Looking to create an offline web application, I'm in the process of transitioning from Ajax to JSON using JQuery offline. Here is the initial Ajax code: $.ajax({ url: contentpage, data: contentpagedata, cache: false }).done(function( html ) { ...

javascriptjqueryajaxjsonhtml

WebDriverException: Error: {"errorMessage":"The object is undefined"

I encountered an error while running the code on this HTML page, specifically at /html/body/div[3]/div[1]/div[1]/div[1]/div/div[10]/a/div[1]/div[2]: WebDriverException: Message: {"errorMessage":"null is not an object (near '...ull).singleNodeVa ...

pythonhtmlseleniumphantomjs

Having trouble aligning the form in the center?

Despite #container being centered, I am struggling to center the <form>. It is important for me to have all elements inside the form aligned horizontally and despite trying various techniques, it is not working as expected. <!-- Container Start - ...

htmlcss

A step-by-step guide to implementing Google Analytics Event tracking using PHP

Implementing Google Analytics Events in Javascript can be done using the following code: ga('send', 'event', 'test', 'test','value'); I am trying to incorporate this feature throughout my entire project. ...

javascriptphphtmlgoogle-analytics

Update an element's margin-right value with jQuery

I have designed a basic <ul> list in HTML and applied different margin-right values to each of the <li> elements using CSS (jsFiddle). Here is the HTML code: <ul> <li>First</li> <li>Second</li> <li& ...

javascriptjqueryhtmlcssmargin

Tricky CSS layout challenge: Creating a flexible width single-line design

How can I create a single-line CSS layout that flows to the right endlessly, with each box occupying a set percentage of the viewport width (e.g. 20%)? To better illustrate, refer to the following diagram: +-----------------------------+ |VIEWPORT ...

csslayout

Utilize Bootstrap to expand a row with 24 responsive columns and fill the remaining vertical space

Hello everyone! This is my first time posting a question here, even though I've been relying on this site for solutions for several years now. I've encountered a "multi-row" issue that seems to be unique and hasn't been covered yet. Despite ...

cssflexboxbootstrap-5

The vertical menu was added, but the text did not align properly

I pasted a sidebar from a different source https://i.stack.imgur.com/jkYWz.png My goal is to have the text appear at the top of the page, similar to this example https://i.stack.imgur.com/1aR5s.png After adding this line, my text is displaying at the b ...

css

Utilizing CSS filters to add a blur effect to specific elements within an SVG

I've been attempting to use the CSS filter blur on certain elements, but for some reason it's not working as expected. Check out this example in a jsfiddle: http://jsfiddle.net/kuyraypj/ Even though I have applied the following CSS, my '.b ...

csssvg

Interactive Material Icons with Hover Effects in CSS

I'm having trouble adding a hover effect to material icons in my code. Despite everything else looking good, the hover effect is not working as expected. Below is the code snippet I've been using: import ManageAccountsIcon from '@mui/icons-m ...

cssreactjsuser-interfacematerial-uihover

Tips for analyzing a JSON response from a meme API using HTML and JavaScript

I'm looking to integrate an API into my website in order to fetch random memes from reddit. The API was developed by D3vd and can be found on github at When I make a request to (the api), the response typically looks like this: { "postLink ...

javascripthtmljson

What steps can be taken to update the cart if all products have been removed?

How can I implement a refresh for my cart page every time the product length is 0 without causing unreachable code? It seems like there must be a simple solution to this problem. switch (action.type){ case "REMOVE_PRODUCT": return ...

javascripthtmlreactjsreact-native

Eliminating quotation marks from individual elements within a JavaScript array that includes JSON-encoded HTML strings retrieved from a MySQL database using PHP

Performing an Ajax call to fetch data from a MySQL database using the data1.php file with PDO results in HTML strings being stored in an array, encoded into JSON format, and then sent to the Ajax response function for display on a webpage. However, dealing ...

phphtmljsonajaxquotes